縦横碁盤目のような文字付き画像(アイコン)メニューを作成するCssのコードプログラミングTwitter3Facebook0はてブ0Pocket0LINEコピー2015.06.14Cssで画像(アイコン付き)とテキストを縦横に並べて碁盤の目のようなメニューを作成します。完成したメニューはこちらです。wordpress電子書籍testtesttesttesttesttesttestメニュー下のエリアです。実装するにあたり、作りたい仕様を簡単に解説します。アイコンの下にまずテキストを置きます。横に3つ、縦に3つ並べます。スマホのメニューみたいなものを作りたかったのです。Sizingを使うことにしました。Sizingを使えば、paddindやborderを気にしなくてOKです。Awesomeを使う方法もありますが、自分で作成した画像を使いたかったため、単純に画像を使っています。スポンサーリンクコードとコードの解説まず、htmlコードです。アイコンの画像はhtml内で個別に変更します。class="break">メニュー下のエリアです。</p>次に、cssコードです。#333;}個別に解説します。width:33%;33%で3つに分割すると、1%の隙間ができますが、どのみち隙間ができるようなので、今回は1%は無視しました(^^;こういうところにこだわるべきでしょ、というお話もわかるんですけどね。余白の取り方やサイドバーに線を引いていなければわからないなど、工夫次第で問題を吸収できるかな、とか思いましたね。text-align:center;box-sizing:内の中央合わせを行います。線の引き方についてです。#333;上部はすべて線を引いて問題ないため、普通に引きます。両端は線を引かないことにします。#333;}3nだと、左から3番目のセル3n+1だと、左から1番目のセル3n+2だと、左から2番目のセル(要は中央)今回は真ん中に線を引きたいため、3n+2になります。この3n+2の左右に線(border)を引くことになります。上部の線はすでに引いてあるため、次に下線を引きます。lastは後ろからです。列を追加した場合は、こちらをいじるだけです。#333;}今回、参考にさせていただいた、ありがたいサイトはこちらになります。スマートフォン専用ページを作成する際に知っておきたいポイント|Webparkスポンサーリンクfloatの解除を忘れずにこのメニューの下に何かを置く場合、メニューがfloatを使っているため回り込みを解除する必要があります。{clear:left;}float:left;を使っているため、clear:left;で回り込みを解除します。ちなみに、float:left;とfloat:right;を使ったら、clear:both;になります。図のある、わかりやすいサイトはこちらになります。float段組の基本|floatレイアウトホームページ作成講座Webは素人なので何か適当なところがあるかもしれませんが^^;、参考になるところがあれば幸いです。【比較表あり】安いオンラインプログラミングスクールはおすすめ?【無料あり】プログラミングスクールは格安に!cssやphpも楽勝に!電子書籍並みの価格で買える格安のプログラム動画学習サイトも一緒に紹介!初心者から上級者向け英語コンテンツまであり。蛍光ペンのマーカーのような効果を作成できます。行頭と行末にタグを挿入・追加する方法などこの記事では個人的によく使う正規表現のメモをまとめていきます。正規表現で行頭と行末にタグを追加する方法などを紹介します。エディタは秀丸を使っています。Unlimitedを含む)や動画をまとめていきます。wordpressであってもphpの基本は変わりません。phpの書籍は...2017.12.29プログラミングPHPやCSSの構文チェックツール/Chromeデベロッパーツールのスマホサイトのデバッグcssやphpなどの構文チェックツール、Chromeデベロッパーツールのスマホサイトのデバッグについて簡潔にまとめていきます。codeの部分を追記しました。...2020.02.02プログラミングスタイルシート(css)のコメントアウトでダブルスラッシュ(//)は使えない今更なのですが、、スタイルシート(css)のコメントアウトでダブルスラッシュは使えません。特定のウィジェットを除外・消去する方法をまとめていきます。Adsence)や広告なんかでよく使われますかね。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。漫画や小説で安いアプリ/サイトはどこ!?Gitのおすすめ本(入門書籍)!GithubとBitbucketの比較!タイトルとURLをコピーしました。