- 投稿日：2019-10-24T23:09:20+09:00
CSSが反映されない理由 ～背景の色は白じゃない、透明なんだ～
CSSで方眼を作るぞ！⇒縦横どちらかしか反映されない…
「HTMLページの背景を方眼紙みたいにしたいなあ」と思い、コードを書きました。
＜理想＞
＜最初に書いたコード ※これでは「理想」にならない＞
・HTML(関連部分のみ抜粋)hougan.html<div id="page" style="width:100%; height:100%;"></div>・CSS
hougan.css#page {background: linear-gradient(to right, #ffffff 49px, #b0c4de 1px), linear-gradient(to bottom, #ffffff 49px, #b0c4de 1px); background-size: 50px 50px;}
コードの説明をします。「わかるよ！」という方はお読み飛ばしください
linear-gradientというのは、
・まず色の変化の方向をきめて（to top, to bottom, to right, to leftなど）
・その方向に向かって〇px（あるいは〇%）までの部分を何色にする！
という指定ができるものです。上のコードではまず１個目のlinear-gradientで、
「左から右に向かう方向で考えてね。一番左から49pxまでを#ffffff（白）で、そこから1pxを#b0c4de（青っぽい色）にしてね！」と指定をしています。
↓こんな感じ↓
それから２個目のlinear-gradientで、
「上から下に向かう方向で考えてね。一番上から49pxまでを#ffffff（白）で、そこから1pxを#b0c4de（青っぽい色）にしてね！」と指定をしています。
↓こんな感じ↓
指定された２つのlinear-gradientは重なりあうので、縦線と横線が交わった方眼のような見た目になるのです。
そして最後のbackground-sizeで、「49pxの白色部分と1pxの青色部分でできた合計50pxの模様を、divの範囲のなかで繰り返してね！」と指定しています。
・・・コードの説明おわり・・・☟さて、先ほどのコードの実行結果は…
縦線しか反映されてない！！なんで？？？？上のレイヤーを透明にしないと、下のレイヤーに書いてあるものは見えない
失敗の原因はタイトル通り、線と線の間の余白部分を#ffffff（白）で指定していたためでした。反映されなかった横線は、正しく実装されていたのに、上のレイヤーの白色で塗りつぶされてしまっていたのです。
そこで、今まで#ffffffで指定していた49pxの部分を、透明（transparent）で指定すると、下に隠れていた横線がちゃんと見えるようになり方眼模様を実装できました。
＜正しいコード＞
・CSShougan.css#page {background: linear-gradient(to right, transparent 49px, #b0c4de 1px), linear-gradient(to bottom, transparent 49px, #b0c4de 1px); background-size: 50px 50px;}最初のコードで「#ffffff」だった部分を「transparent」に変更！
実行結果は
理想通りになりました！以上です。
この記事がもし誰かの助けになれたら幸いです。
- 投稿日：2019-10-24T16:56:46+09:00
進捗状況
- 投稿日：2019-10-24T16:34:25+09:00
cssでdiv要素を重ねることなく背景画像を透過する方法
こんにちは！さくです！
web制作をしていると「背景画像を透過したいなぁ」とか「背景を薄くしたい！」
というシチュエーションに多く遭遇すると思いますが、google先生に方法を尋ねると【div要素を重ねて上から透過レイヤーを掛ける】という冗長な方法が散見されます。
background-imageは要素ではないのでopacityは適用されません。よって、ここではblend-modeを活用します。
サンプル
css-lighten-samplebackground-image: url("room_syosai.png"); background-color: rgba(255, 255, 255, 0.8); background-blend-mode: lighten;結果
css-darken-samplebackground-image: url("room_syosai.png"); background-color: rgba(0, 0, 0, 0.6); background-blend-mode: darken;結果
blend-modeとは事前に用意された背景色あるいは背景画像を効果を与えて合成する機能です。
たったの三行で背景透過が実現できました。div要素を使って〜よりかは遥かに少ない行数で望んだ結果が得られたかと思います。
またblend-modeには他にも十数種類のブレンド方式が存在します
blend-modeについて、詳しくはこちらHTMLクイックリファレンス様
http://www.htmq.com/css/background-blend-mode.shtmlグラデーション
blend-modeとは違いますがグラデーションを重ねる方法も紹介したいと思います。
css-gradation-samplebackground: linear-gradient(315deg, rgba(250, 68, 101, 0.6), rgba(105, 188, 200, 0.6)) ,url(room_syosai.png);
linear-gradientを使ってたったの一行で画像にグラデーションを掛けることができました。
linear-gradientについて、詳しくはこちらMDN web docs様
https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient最後に
簡単に背景画像を透過する方法を紹介しました。どちらの機能もデザイン面の検証を行う際捗る機能です。
皆さんのweb開発の一助となれれば幸いです！twitter→(@saku_nectaris)
フォローよろしくな！
- 投稿日：2019-10-24T14:41:05+09:00
スペルミスを防ぎたい！
この記事を書くきっかけ
研修でサイト模写をしているときにスペルミスに気付かず、タイムロスしてしまったため。
実例
模写したサイト→らくらくメルカリ便[https://www.mercari.com/jp/rakuraku-mercari/]
index.html<nav class="blead-crumbs"> <ul> <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="https://www.mercari.com/jp/" itemprop="url"> <span itemprop="title"> メルカリ </span> </a> <i class="fas fa-chevron-right" style="color: darkgray"></i> </li> <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <span itemprop="title"> らくらくメルカリ便 </span> </li> </ul> </nav>styles.cssbread-crumbs { border-top: 1px solid #eeeeee; background: #ffffff; } .bread-crumbs ul { padding: 16px 0; font-size: 0; width: 700px; overflow: visible; margin: 0 auto; } nav ul { list-style: none; } .bread-crumbs li { display: inline-block; font-size: 14px; text-align: center; } .bread-crumbs ul li i { margin: 0 8px; font-size: 9px; } .fas fa-chevron-right { content: \f054; font-family:'Font Awesome 5 Free'; font-weight:900; } .bread-crumbs li:last-child { font-weight: 600; }どこが間違っているかわかりました？
間違っているところは…
index.html<nav class="blead-crumbs"> <ul> <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">navのclass名が間違っています。
正しくはbread-crumbsです！
css側は正しい綴りなのにhtml側が間違っていたせいで、見た目が変わらなかったわけです。
ちなみにbleadは「刀」です。スペルミスを防ぐには？
- 単語を覚える
これが一番の予防策が気がします。完璧にとはいかなくても「こんな綴りだったような」程度でいいと思います。英語ができれば訳ないんですけどね。
- 検索してみる
今回スペルミスに気づけたのはVisual Studio Code内で検索したからです(早めに「検索しよう」と思えば、無駄な時間を減らせた)。
それから綴りが「これで合ってたっけ？」と少しでも思ったら即ググること！
意味も一緒に覚えてしまえばいいんです。他に「こんな方法でスペルミスを防いでいるよ」という意見があれば教えてください。
- 投稿日：2019-10-24T12:20:03+09:00
GoogleフォントがEdge、IE11で適用されない
IEはともかく、Edgeも読み込まれないとは。
link、importのコードを見直す
csshttps://fonts.googleapis.com/css?family=Noto+Serif+JP:400,700&subset=japanese&display=swapのように、&が文字参照になっていたら、&に書き換える。
csshttps://fonts.googleapis.com/css?family=Noto+Serif+JP:400,700&subset=japanese&display=swapすると読み込まれた。
とはいえ、文字参照を勝手に書き換えていいのかとモヤモヤしてたら、
2019年10月24日の11時ごろ、Googleフォントの提供コードから文字参照が消えていました。
- 投稿日：2019-10-24T12:06:54+09:00
Bootstrapのよく使うクラスまとめておいた！！！！
はじめに
bootstrapのよく使うクラスを一覧にしておきます。備忘録。
width/height
width
25% .w-25 50% .w-50 75% .w-75 100% .w-100 auto .w-auto height
25% .h-25 50% .h-50 75% .h-75 100% .h-100 auto .h-auto margin
全て(≥0px) 小以上(≥576px) 中以上(≥768px) 大以上(≥992px) 特大(≥1200px) 上側のマージンを0 .mt-0 .mt-sm-0 .mt-md-0 .mt-lg-0 .mt-xl-0 右側のマージンを0 .mr-0 .mr-sm-0 .mr-md-0 .mr-lg-0 .mr-xl-0 下側のマージンを0 .mb-0 .mb-sm-0 .mb-md-0 .mb-lg-0 .mb-xl-0 左側のマージンを0 .ml-0 .ml-sm-0 .ml-md-0 .ml-lg-0 .ml-xl-0 左右のマージンを0 .mx-0 .mx-sm-0 .mx-md-0 .mx-lg-0 .mx-xl-0 上下のマージンを0 .my-0 .my-sm-0 .my-md-0 .my-lg-0 .my-xl-0 全方向のマージンを0 .m-0 .m-sm-0 .m-md-0 .m-lg-0 .m-xl-0
全て(≥0px) 小以上(≥576px) 中以上(≥768px) 大以上(≥992px) 特大(≥1200px) 上側のマージンを0.25rem .mt-1 .mt-sm-1 .mt-md-1 .mt-lg-1 .mt-xl-1 右側のマージンを0.25rem .mr-1 .mr-sm-1 .mr-md-1 .mr-lg-1 .mr-xl-1 下側のマージンを0.25rem .mb-1 .mb-sm-1 .mb-md-1 .mb-lg-1 .mb-xl-1 左側のマージンを0.25rem .ml-1 .ml-sm-1 .ml-md-1 .ml-lg-1 .ml-xl-1 左右のマージンを0.25rem .mx-1 .mx-sm-1 .mx-md-1 .mx-lg-1 .mx-xl-1 上下のマージンを0.25rem .my-1 .my-sm-1 .my-md-1 .my-lg-1 .my-xl-1 全方向のマージンを0.25rem .m-1 .m-sm-1 .m-md-1 .m-lg-1 .m-xl-1
全て(≥0px) 小以上(≥576px) 中以上(≥768px) 大以上(≥992px) 特大(≥1200px) 上側のマージンを0.5rem .mt-2 .mt-sm-2 .mt-md-2 .mt-lg-2 .mt-xl-2 右側のマージンを0.5rem .mr-2 .mr-sm-2 .mr-md-2 .mr-lg-2 .mr-xl-2 下側のマージンを0.5rem .mb-2 .mb-sm-2 .mb-md-2 .mb-lg-2 .mb-xl-2 左側のマージンを0.5rem .ml-2 .ml-sm-2 .ml-md-2 .ml-lg-2 .ml-xl-2 左右のマージンを0.5rem .mx-2 .mx-sm-2 .mx-md-2 .mx-lg-2 .mx-xl-2 上下のマージンを0.5rem .my-2 .my-sm-2 .my-md-2 .my-lg-2 .my-xl-2 全方向のマージンを0.5rem .m-2 .m-sm-2 .m-md-2 .m-lg-2 .m-xl-2
全て(≥0px) 小以上(≥576px) 中以上(≥768px) 大以上(≥992px) 特大(≥1200px) 上側のマージンを1rem .mt-3 .mt-sm-3 .mt-md-3 .mt-lg-3 .mt-xl-3 右側のマージンを1rem .mr-3 .mr-sm-3 .mr-md-3 .mr-lg-3 .mr-xl-3 下側のマージンを1rem .mb-3 .mb-sm-3 .mb-md-3 .mb-lg-3 .mb-xl-3 左側のマージンを1rem .ml-3 .ml-sm-3 .ml-md-3 .ml-lg-3 .ml-xl-3 左右のマージンを1rem .mx-3 .mx-sm-3 .mx-md-3 .mx-lg-3 .mx-xl-3 上下のマージンを1rem .my-3 .my-sm-3 .my-md-3 .my-lg-3 .my-xl-3 全方向のマージンを1rem .m-3 .m-sm-3 .m-md-3 .m-lg-3 .m-xl-3
全て(≥0px) 小以上(≥576px) 中以上(≥768px) 大以上(≥992px) 特大(≥1200px) 上側のマージンを1.5rem .mt-4 .mt-sm-4 .mt-md-4 .mt-lg-4 .mt-xl-4 右側のマージンを1.5rem .mr-4 .mr-sm-4 .mr-md-4 .mr-lg-4 .mr-xl-4 下側のマージンを1.5rem .mb-4 .mb-sm-4 .mb-md-4 .mb-lg-4 .mb-xl-4 左側のマージンを1.5rem .ml-4 .ml-sm-4 .ml-md-4 .ml-lg-4 .ml-xl-4 左右のマージンを1.5rem .mx-4 .mx-sm-4 .mx-md-4 .mx-lg-4 .mx-xl-4 上下のマージンを1.5rem .my-4 .my-sm-4 .my-md-4 .my-lg-4 .my-xl-4 全方向のマージンを1.5rem .m-4 .m-sm-4 .m-md-4 .m-lg-4 .m-xl-4
全て(≥0px) 小以上(≥576px) 中以上(≥768px) 大以上(≥992px) 特大(≥1200px) 上側のマージンを3rem .mt-5 .mt-sm-5 .mt-md-5 .mt-lg-5 .mt-xl-5 右側のマージンを3rem .mr-5 .mr-sm-5 .mr-md-5 .mr-lg-5 .mr-xl-5 下側のマージンを3rem .mb-5 .mb-sm-5 .mb-md-5 .mb-lg-5 .mb-xl-5 左側のマージンを3rem .ml-5 .ml-sm-5 .ml-md-5 .ml-lg-5 .ml-xl-5 左右のマージンを3rem .mx-5 .mx-sm-5 .mx-md-5 .mx-lg-5 .mx-xl-5 上下のマージンを3rem .my-5 .my-sm-5 .my-md-5 .my-lg-5 .my-xl-5 全方向のマージンを3rem .m-5 .m-sm-5 .m-md-5 .m-lg-5 .m-xl-5 padding
全て(≥0px) 小以上(≥576px) 中以上(≥768px) 大以上(≥992px) 特大(≥1200px) 上側のパディングを0 .pt-0 .pt-sm-0 .pt-md-0 .pt-lg-0 .pt-xl-0 右側のパディングを0 .pr-0 .pr-sm-0 .pr-md-0 .pr-lg-0 .pr-xl-0 下側のパディングを0 .pb-0 .pb-sm-0 .pb-md-0 .pb-lg-0 .pb-xl-0 左側のパディングを0 .pl-0 .pl-sm-0 .pl-md-0 .pl-lg-0 .pl-xl-0 左右のパディングを0 .px-0 .px-sm-0 .px-md-0 .px-lg-0 .px-xl-0 上下のパディングを0 .py-0 .py-sm-0 .py-md-0 .py-lg-0 .py-xl-0 全方向のパディングを0 .p-0 .p-sm-0 .p-md-0 .p-lg-0 .p-xl-0
全て(≥0px) 小以上(≥576px) 中以上(≥768px) 大以上(≥992px) 特大(≥1200px) 上側のパディングを0.25rem .pt-1 .pt-sm-1 .pt-md-1 .pt-lg-1 .pt-xl-1 右側のパディングを0.25rem .pr-1 .pr-sm-1 .pr-md-1 .pr-lg-1 .pr-xl-1 下側のパディングを0.25rem .pb-1 .pb-sm-1 .pb-md-1 .pb-lg-1 .pb-xl-1 左側のパディングを0.25rem .pl-1 .pl-sm-1 .pl-md-1 .pl-lg-1 .pl-xl-1 左右のパディングを0.25rem .px-1 .px-sm-1 .px-md-1 .px-lg-1 .px-xl-1 上下のパディングを0.25rem .py-1 .py-sm-1 .py-md-1 .py-lg-1 .py-xl-1 全方向のパディングを0.25rem .p-1 .p-sm-1 .p-md-1 .p-lg-1 .p-xl-1
全て(≥0px) 小以上(≥576px) 中以上(≥768px) 大以上(≥992px) 特大(≥1200px) 上側のパディングを0.5rem .pt-2 .pt-sm-2 .pt-md-2 .pt-lg-2 .pt-xl-2 右側のパディングを0.5rem .pr-2 .pr-sm-2 .pr-md-2 .pr-lg-2 .pr-xl-2 下側のパディングを0.5rem .pb-2 .pb-sm-2 .pb-md-2 .pb-lg-2 .pb-xl-2 左側のパディングを0.5rem .pl-2 .pl-sm-2 .pl-md-2 .pl-lg-2 .pl-xl-2 左右のパディングを0.5rem .px-2 .px-sm-2 .px-md-2 .px-lg-2 .px-xl-2 上下のパディングを0.5rem .py-2 .py-sm-2 .py-md-2 .py-lg-2 .py-xl-2 全方向のパディングを0.5rem .p-2 .p-sm-2 .p-md-2 .p-lg-2 .p-xl-2
全て(≥0px) 小以上(≥576px) 中以上(≥768px) 大以上(≥992px) 特大(≥1200px) 上側のパディングを1rem .pt-3 .pt-sm-3 .pt-md-3 .pt-lg-3 .pt-xl-3 右側のパディングを1rem .pr-3 .pr-sm-3 .pr-md-3 .pr-lg-3 .pr-xl-3 下側のパディングを1rem .pb-3 .pb-sm-3 .pb-md-3 .pb-lg-3 .pb-xl-3 左側のパディングを1rem .pl-3 .pl-sm-3 .pl-md-3 .pl-lg-3 .pl-xl-3 左右のパディングを1rem .px-3 .px-sm-3 .px-md-3 .px-lg-3 .px-xl-3 上下のパディングを1rem .py-3 .py-sm-3 .py-md-3 .py-lg-3 .py-xl-3 全方向のパディングを1rem .p-3 .p-sm-3 .p-md-3 .p-lg-3 .p-xl-3
全て(≥0px) 小以上(≥576px) 中以上(≥768px) 大以上(≥992px) 特大(≥1200px) 上側のパディングを1.5rem .pt-4 .pt-sm-4 .pt-md-4 .pt-lg-4 .pt-xl-4 右側のパディングを1.5rem .pr-4 .pr-sm-4 .pr-md-4 .pr-lg-4 .pr-xl-4 下側のパディングを1.5rem .pb-4 .pb-sm-4 .pb-md-4 .pb-lg-4 .pb-xl-4 左側のパディングを1.5rem .pl-4 .pl-sm-4 .pl-md-4 .pl-lg-4 .pl-xl-4 左右のパディングを1.5rem .px-4 .px-sm-4 .px-md-4 .px-lg-4 .px-xl-4 上下のパディングを1.5rem .py-4 .py-sm-4 .py-md-4 .py-lg-4 .py-xl-4 全方向のパディングを1.5rem .p-4 .p-sm-4 .p-md-4 .p-lg-4 .p-xl-4
全て(≥0px) 小以上(≥576px) 中以上(≥768px) 大以上(≥992px) 特大(≥1200px) 上側のパディングを3rem .pt-5 .pt-sm-5 .pt-md-5 .pt-lg-5 .pt-xl-5 右側のパディングを3rem .pr-5 .pr-sm-5 .pr-md-5 .pr-lg-5 .pr-xl-5 下側のパディングを3rem .pb-5 .pb-sm-5 .pb-md-5 .pb-lg-5 .pb-xl-5 左側のパディングを3rem .pl-5 .pl-sm-5 .pl-md-5 .pl-lg-5 .pl-xl-5 左右のパディングを3rem .px-5 .px-sm-5 .px-md-5 .px-lg-5 .px-xl-5 上下のパディングを3rem .py-5 .py-sm-5 .py-md-5 .py-lg-5 .py-xl-5 全方向のパディングを3rem .p-5 .p-sm-5 .p-md-5 .p-lg-5 .p-xl-5 text-align/float
全て(≥0px) 小以上(≥576px) 中以上(≥768px) 大以上(≥992px) 特大(≥1200px) text-align:left .text-left .text-sm-left .text-md-left .text-lg-left .text-xl-left text-align:center .text-center .text-sm-center .text-md-center .text-lg-center .text-xl-center text-align:right .text-right .text-sm-right .text-md-right .text-lg-right .text-xl-right text-align:justify .text-justify .text-sm-justify .text-md-justify .text-lg-justify .text-xl-justify インライン要素を改行禁止 .text-nowrap .text-sm-nowrap .text-md-nowrap .text-lg-nowrap .text-xl-nowrap ブロック要素を中央揃え .center-block .text-sm-block .text-md-block .text-lg-block .text-xl-block
float:left .pull-left float:right .pull-right floatの解除 .clearfix インライン要素位置
ベースライン .align-baseline 上端揃え .align-top 中央揃え .align-middle 下端揃え .align-bottom テキストの上端揃え .align-text-top テキストの下端揃え .align-text-bottom display
全て(≥0px) 小以上(≥576px) 中以上(≥768px) 大以上(≥992px) 特大(≥1200px) 非表示 .d-none .d-sm-none .d-md-none .d-lg-none .d-xl-none インライン表示 .d-inline .d-sm-inline .d-md-inline .d-lg-inline .d-xl-inline インライン-ブロック表示 .d-inline-block .d-sm-inline-block .d-md-inline-block .d-lg-inline-block .d-xl-inline-block ブロック表示 .d-block .d-sm-block .d-md-block .d-lg-block .d-xl-block テーブル表示 .d-table .d-sm-table .d-md-table .d-lg-table .d-xl-table テーブル行表示 .d-table-row .d-sm-table-row .d-md-table-row .d-lg-table-row .d-xl-table-row テーブルセル表示 .d-table-cell .d-sm-table-cell .d-md-table-cell .d-lg-table-cell .d-xl-table-cell display:flex .d-flex .d-sm-flex .d-md-flex .d-lg-flex .d-xl-flex display:inline-flex .d-inline-flex .d-sm-inline-flex .d-md-inline-flex .d-lg-inline-flex .d-xl-inline-flex Justify content
全て(≥0px) 小以上(≥576px) 中以上(≥768px) 大以上(≥992px) 特大(≥1200px) アイテムの左寄せ .justify-content-start .justify-content-sm-start .justify-content-md-start .justify-content-lg-start .justify-content-xl-start アイテムの右寄せ .justify-content-end .justify-content-sm-end .justify-content-md-end .justify-content-lg-end .justify-content-xl-end アイテムの左右中央揃え .justify-content-center .justify-content-sm-center .justify-content-md-center .justify-content-lg-center .justify-content-xl-center アイテムを両端から均等に並べる .justify-content-between .justify-content-sm-between .justify-content-md-between .justify-content-lg-between .justify-content-xl-between アイテムを等間隔に並べる .justify-content-around .justify-content-sm-around .justify-content-md-around .justify-content-lg-around .justify-content-xl-around List
垂直リスト
リストの親要素（基本はul）につける .list-group リスト（基本はli）につける .list-group-item 枠なしリスト .list-group-flush リストマーカーを削除 .list-unstyled 水平リスト
全て(≥0px) 小以上(≥576px) 中以上(≥768px) 大以上(≥992px) 特大(≥1200px) 横並びのリスト .list-group-horizontal .list-group-horizontal-sm .list-group-horizontal-md .list-group-horizontal-lg .list-group-horizontal-xl Border
四角
四面全てに線 .border 上部に線 .border-top 右側に線 .border-right 下部に線 .border-bottom 左側に線 .border-left 丸
すべて角丸 .rounded 上部が角丸 .rounded-top 右側が角丸 .rounded-right 下部が角丸 .rounded-bottom 左側が角丸 .rounded-left 円 .rounded-circle 長い円 .rounded-pill 角 .rounded-0 Position
通常位置 .position-static 相対位置 .position-relative 絶対位置 .position-absolute 固定位置 .position-fixed sticky位置 .position-sticky 最上部固定 .fixed-top 最下部固定 .fixed-bottom Shadow
影なし .shadow-none 影（薄い） .shadow-sm 影（普通） .shadow 影（濃い） .shadow-lg font
太め .font-weight-bold 普通 .font-weight-normal 細め .font-weight-light イタリック .font-italic おわりに
コピペして使ってくださいませ、、、
- 投稿日：2019-10-24T00:20:58+09:00
display: inline-block; で横並びの時、忘れがちなものまとめ
記事の前に
webの勉強で、今はHTML,CSSを学習中。
そのときは再現できても、
学んだことをすぐ忘れがちなので、頭の中を整理し、まとめるため作成。
あと、コメントアウトでの注釈多めです。
自分のためだが、他の人にも、もしも役に立ったら。display: inline-block; を使う理由
display:flexでは対応しづらい古いIEなどで横並びさせたい時に使う。
そうでないときはdisplay:flexが便利floatだと、浮いたりするし、コードが複雑になるため、floatはほぼ使用しない。(経験的にfloatは、かなりかなり複雑、、、)
3floatは、画像の横に文章を回り込ませるときに使用のみ使用を考える。
参考
float:leftやfloat:rightを使う時に注意する点とその対策について教えてください。
1横並び基本 中央寄せ
index.html<div id="nav"> <p>inline-blockで横並びにしたもの</p> <ul> <li >HOME</li> <li>HTML</li> <li>CSS</li> </ul> </div>style.css@charset "utf-8"; p{text-align: center;} /*文章を左右中央に揃えたいときは、 1その文章が含まれる要素、 2もしくはその親要素に対してtext-align:centerを指定 */ #nav ul { list-style-type: none; text-align:center; /* 機能1 ブロックを中央に 機能2 テキストを真ん中に*/ } /* id="nav"の中のulの中のliに対してCSSを適用*/ @charset "utf-8"; p{text-align: center;} /*文章を左右中央に揃えたいときは、 1その文章が含まれる要素、 2もしくはその親要素に対してtext-align:centerを指定 */ #nav ul { list-style-type: none; text-align:center; /* 機能1 ブロックを中央に 機能2 テキストを真ん中に*/ } /* id="nav"の中のulの中のliに対してCSSを適用*/ #nav ul li { display: inline-block;/*横並びになる、解除すると横並びでなくなる。*/ } #nav ul li { width: 80px; padding: 10px 0; margin: 10px 0; vertical-align: middle;/*縦の表示位置も指定できる*/ background: blue; color: #fff; font-size: 14px; }結果
コード参考
【CSS】displayの使い方を総まとめ！inlineやblockの違いは？
2隙間をなくし、各ブロックをぴったりくっつける方法
1のコードに追加部分のみ記載
style.css#nav ul { font-size: 0;/* inline-block指定時に隙間をなくす*/ } #nav ul li { vertical-align: bottom;/* 高さを揃える*/ } #nav ul li { font-size: 14px;/* font-size0指定したため、 指定必要*/ }上記のコードのそれぞれの意味については、display: inline-block; と float:
で以下のように説明されています。display: inline-block; ←子要素に対して
vertical-align: top; または vertical-align: bottom; ←子要素に対して
font-size: 0; ←親要素に対して
※ 2によって高さまたはボトムを揃える。
※ 3によってinline-block指定時に生じる隙間をなくす。子要素にfont-size指定するのを忘れないように。※ liに無駄な余白出る場合に付け加えるのか、常に使うのか、多分、後者なのだろうが、まだ理解不足なので、理解した上で
後日修正予定。参考url
display: inline-block; と float:
画面に均等に配置する方法についてはまたあとでまとめます。
