シバタスブログ 

この記事に含まれるタグ :
CSS  リンク  ボタン  スマホ  

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

   ↑  2018/05/08 (火)  カテゴリー: その他(Web・PC・スマホ)
スポンサーリンク

この記事で「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ってスゲーな。

スポンサーリンク

この記事に含まれるタグ : CSS リンク ボタン スマホ 

(記事編集) https://shibatas.blog.fc2.com/blog-entry-453.html

2018/05/08 | Comment (0) | HOME | ↑ ページ先頭へ ↑ |

Comment

コメントを投稿する 記事: CSSのみのリンクボタンを綺麗に横並び表示できたメモ

お気軽にコメントをどうぞ。
非公開 (管理人のみ閲覧可能なコメント) にしたい場合には、ロック にチェックを入れてください。

  任意 : 後から修正や削除ができます。
  非公開コメントとして投稿する。(管理人にのみ公開)