↑
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ってスゲーな。
スポンサーリンク
（記事編集） https://shibatas.blog.fc2.com/blog-entry-453.html
2018/05/08 | Comment (0) | HOME | ↑ ページ先頭へ ↑ |コメントを投稿する 記事: CSSのみのリンクボタンを綺麗に横並び表示できたメモ
お気軽にコメントをどうぞ。非公開 （管理人のみ閲覧可能なコメント） にしたい場合には、ロック にチェックを入れてください。
Comment