CSSWebページ上のリンクボタンは四角いものが主でしたが、CSSの進化によっていろいろな形状でのリンクボタンを簡単に作成することができるようになってきています。そんな中でも最近Webページ上の表現でよく見かける六角形のリンクボタンをCSSを使って構成する方法について2パターンの形状で紹介してみます。「CSSで六角形(ハニカム)のリンクボタンを作る方法」サンプルを別枠で表示リンクの形状を四角でも丸でもなく六角形の形で整形して、クリックできるエリアもその範囲のみとしています。六角形の形状は頭が尖ったパターンと頭が平坦なパターンがあるのでその2通りの方法を紹介します。頭が尖った六角形パターンまずはサンプル画面左の頭が尖った六角形パターンから。HTMLにはクラスを付けたリンクタグを設置します。class="hexagonA"><span>LinkA</span></a>リンクタグにはクラスを付けなくても実装可能ですがサンプルでは「hexagonA」というクラスを付けてそれに対して指定をつけていきます。リンク<a>タグの中には<span>タグでテキスト囲っていますがこれは必須ではなく中に入る文字を上下中央にするための要素なので不要な場合は削除してしまっても大丈夫です。このリンクタグに対して以下のようにCSSで六角形を整形していきます。「:before」「:after」の疑似要素を使って同じサイズの要素をそれぞれ生成します。用意した3つの長方形のうちの「:before」「:after」の2つをCSSの「rotate」を使ってそれぞれ角度を変えることで六角形を整形しています。「transition」を使ってのロールオーバーアニメーション等の設定も可能になります。頭が平坦な六角形パターン続いて、サンプル画面右の頭が平坦な六角形パターンについて。HTMLには同様にクラスを付けたリンクタグを設置します。class="hexagonB"><span>LinkB</span></a>こちらのパターンもリンクタグにはクラスを付けなくても実装可能ですがサンプルでは「hexagonB」というクラスを付けてそれに対して指定をつけていきます。このリンクタグに対して以下のようにCSSで頭が平坦な六角形を整形していきます。「:before」「:after」の疑似要素を使って同じサイズの長方形を生成した後それらの要素を「rotate」で角度を変えて六角形を整形しています。一つ目のパターンでは横長の長方形を使って頭が尖った六角形を整形し二つ目のパターンでは縦長の長方形を使って頭が平坦な六角形を整形しています。以上がCSSで六角形(ハニカム)のリンクボタンを作る方法でした。「:before」「:after」の疑似要素を使って簡単に整形することができリンクボタン以外でもページ上のパーツで六角形を作る必要がある際にも同様の方法で作成できるのでなにかの時には便利に使えるかと思います。CSSで六角形(ハニカム)を作る際にぜひ。PostsCSS3「transform」で3Dっぽく画像を重ね合わせてみる実験。※コメントにHTMLタグを直接入力しないでください。※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。Webサイト構築に関する技術やWebサービスを紹介するブログです。jQueryをはじめとしたWebサイトを彩る技術のほか、HTML(HTML5)、CSS(CSS3)、iPhoneやTwitterを使った実験などなど、Webサイト制作に役立つであろうと思われる情報を備忘録として掲載しています。