1. Top
  2. » Web・PC関連
  3. » CSSのみのリンクボタンを綺麗に横並び表示できたメモ

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

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


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

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

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

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

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

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

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

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


あとは、これの必要な部分コピペ&修正して、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ってスゲーな。
スポンサーリンク
たった90日で成績ビリから、いきなりトップに躍り出た方法

関連記事

ブログ更新情報を受け取る
フォローして受け取る


RSS購読する
follow us in feedly
最新記事

Comment

Comment Form
コメントの投稿
HTMLタグは使用できません
ID生成と編集に使用します
管理者にだけ表示を許可する

Page Top

最新記事
カテゴリ
ブログ更新情報を受け取る

フォローしてチェックする


RSS購読する
follow us in feedly
最新コメント
リンク

このブログをリンクに追加する

アクセスカウンター
ブロとも申請フォーム

この人とブロともになる

RSSリンクの表示