CSSのみのリンクボタンを綺麗に横並び表示できたメモ

2018年9月1日

この記事で「CSSのみで作ったリンクボタン」の作業メモをしました。

画像を使わない(スマホを意識した)CSSリンクボタン作成メモ

このリンクボタンを横並びにしたいと思いました。

スポンサーリンク
 

ボタンが横並びになるタグリスト?みたいなヤツです。ブログ個別記事のフッターあたりに、ずら~っと並んでいるアレのようなヤツです。

最初は普通にテキストリンクで、左右のスペースを全角スペースで取りながら、横に並べていたんですが、「スマホだとこれは死ぬほどタップしずらい・・」という事に気づいて、まず、冒頭の記事のように、テキストリンクをリンクボタンに変えました。

それでCSSのみで作ったリンクボタンを横にずら~っと並べたかったのですが、これが結構難しい。

左右の余白は全角スペースなどを使えばできるのですが、上下の余白を作るのが難しい。具体的にはリンクボタンをたくさん並べていくと2行以上になることがある。この時、上下に隣り合うボタンがピッタリとくっついてしまって、めちゃくちゃ見にくい。という状況になりました。「line-heightプロパティ」を使うのが良さげかも・・とも思いましたが、これでも上手く行きませんでした。

そうして調べていた所、「flex」というモノを発見。

これを使えば、メチャクチャ簡単にリンクボタンを横にずら~っと並べられて、しかもリンクボタンが2行以上になってもしっかりと余白を開けられるようになりました。

次の記事に詳しく書いてありました。

CSSの基本!横並びなどフレキシブルに対応する「Flexボックス」 | WEB改善事例集

あとは、これの必要な部分コピペ&修正して、CSSソースに貼り付け。divタグでflexを呼び出せば、divタグで囲まれた部分は横並びにずら~っと並びます。それも綺麗に。

メモとして、CSSソースに貼り付けたモノを載せておきます。

.flex{
padding: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.flex > *{
margin:7px 7px;
}

flex-direction: row;で横並びを指定。flex-wrap: wrap;で端に行ったら折り返すことを指定。.flex > *部分のmarginでリンクボタン周りの余白を指定。

HTML部分ではdivでflexをclass指定。後はdivで囲まれた部分に、リンクボタン(aタグ)をガシガシ貼り付けていけば、それが綺麗に横並びに表示されます。

な ん て 便利なんだ!!

。。。

こんな感じで想像以上に簡単に出来ました。CSS3ってスゲーな。

スポンサーリンク