- 投稿日:2020-11-22T17:28:02+09:00
マク○ナルド風ハンバーガーをCSSだけで作ってみた
どうも7noteです。本気でハンバーガーの再現やってみた。
「3本線でハンバーガーメニュー???」
「ハンバーガーってこんなんじゃなかったっけ?」ソース
index.html<div class="hamburger"> <div class="vans"></div> <div class="cheese"></div> <div class="patty"></div> <div class="vans"></div> </div>style.css.hamburger { width: 75px; /* ハンバーガーの横幅。横:縦は[3:2]くらいがおすすめ */ height: 50px; /* ハンバーガーの立幅。横:縦は[3:2]くらいがおすすめ */ position: relative; } .vans { content: ""; display: block; width: 100%; height: 90%; position: absolute; left: 0; border-radius: 100%; } .vans:first-of-type { background: radial-gradient(at 40% 80%,#E9B751,#E9B751 30%, #E5AB34); box-shadow: 0 8px 1px -5px rgba( 187, 0, 35, 0.8), inset 0 -2px 2px 2px rgba(255,255,255,0.4); top: 0; z-index: 10; } .vans:last-of-type { background: #B6733A; box-shadow: 0 -2px 2px 2px rgba(255,255,255,0.4) inset; top: 35%; /* 具の量によって調整 */ z-index: 1; } .cheese { position : absolute; left: 50%; top: 22%; margin: auto; width : 45px; height : 45px; transform : translateX(-50%) rotate(35deg) skewX(-25deg); z-index : 5; background: #F5CE00; z-index: 5; } .patty { position : absolute; top: 50%; left: 50%; width : 90%; height : 30px; transform : translateX(-50%); background: #793D00; border-radius: 100%; box-shadow: 0 -2px 2px 2px rgba(255,255,255,0.2) inset; z-index: 3; }解説
バンズの作り方は以前どらやきを作った方法と同じく、横長の楕円に影を付けて立体感を出しています。お肉のパティも同様。
チーズは四角をひし形にして回転させることでそれっぽく見せることができます。最後は
z-index
で順番を調整して、topなどで表示位置を調整して完成!まとめ
他にも色々作っているのでよかったら見ていってください。
・クリスマスはもうすぐ!CSSだけでプレゼント箱を作ってみた。
・CSSでの立方体の作り方(サイコロも作れるよ)
・ドラ〇もんも大好きな「どら焼き」をCSSだけで作ってみた。おそまつ!
~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ
- 投稿日:2020-11-22T14:14:35+09:00
【初学者向け】flexboxを使ってレスポンシブ対応の練習をしよう!
初学者さん向けの記事です。
レスポンシブに欠かせないflexBoxを使って、画面サイズにあったコンテンツ作りを練習して行きたいと思います。
かくいう自分も最初の頃は、これから紹介するやり方でなんとなくレスポンシブを理解したところから始めました。今回はそれを紹介ししながら、一緒に手を動かしながらコーディングできれば思います。レジュメ
1.ブロックを作る。
→まずは文字なしでブロックのみを使って、flexboxを体感的に学びます。2.レスポンシブ対応
→各サイズの画面でも自然な形になるようにコードを追加していきます。3.モバイルファーストなコードに書き換えます。
→分かりやすいように最初はPCファーストな書き方で書きます。ですが基本的にはモバイルファーストで書くのが主流なのでこれに書き換えます。4.より実践的な形にする。
→世の中に出回っているサイトを見本に本物WEBページの一部っぽくしていきます。1.ブロックを作る。
ではベースとなるhtml,cssを書いていきます。最初は分かりやすくするためブロックだけ作りましょう。
※headにこの記載がない場合は追記しましょう。
html<!-- レスポンシブ対応用にmetaのviewportを記載 --> <meta name="viewport" content="width=device-width, initial-scale=1.0">html<div class="wrapper"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> <div class="box">6</div> </div>css@charset "UTF-8"; /* reset */ *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Noto Sans JP', sans-serif; line-height: 1; } ul{ list-style: none; } a{ text-decoration: none; } /* main contents */ body{ background-color: rgb(230, 230, 230); } .wrapper{ background-color: white; width: 960px; margin: 0 auto; } /* .boxの共通CSS */ .box{ /* box本体のCSS */ width: 300px; height: 200px; background-color: pink; /* 文字色、配置位置設定 */ line-height: 200px; color: white; font-size: 3rem; text-align: center; /* boxどうしの間隔を開ける */ margin: 10px; }ここまでは難しい事はありませんね。一応コメントを追加してるのでどうグループ分しているか見て理解しましょう。
ではブラウザを確認します。このように縦に6つブロックが並んでいればOKです!
ではもう少し手を加えます。ブロックの色が交互になるように、「奇数番目の.boxのみ背景色を変える」をやってみます。css(追加分のみ記載)/* 奇数番目の.boxのみ背景色を変える */ .box:nth-child(odd){ background-color: aquamarine; }nth-childは疑似クラスです。兄弟要素の位置を()内で指定出来ます。
兄弟要素とは同列のアウトラインにいる要素の事を指しています。今回の場合.boxクラスが同列に6つ並んでいるので6兄弟となり、1番目なら「:nth-child(first-child)」、2番目なら「:nth-child(2)」みたいに番号や名称で指定可能です。ちなみに今回は奇数番目の兄弟にのみCSSを適用したいので(odd)を使用します。(偶数の場合は(2n)または(even))ブラウザを確認しましょう。
見事奇数番目の.boxの色が変わりました。
続いて.boxを横並びにします。css.wrapper{ background-color: white; width: 960px; margin: 0 auto; /* 子要素を横並びにする */ display: flex; }ブラウザを確認します。
横並びになりましたが、何やら.boxの形がおかしいです。
flexboxの特徴として横並びをして子要素の幅が親要素の幅を超えた場合は、子要素を均等にして並べる特性があります。ではこれを回避するためにどうしたら良いでしょうか?目的を確認します。
.wrapperのwidthは960pxです。一方.boxのwidthは300pxに加えmarginが両端に10pxづつ付いています。なので1つの.boxで320pxを要します。つまり.boxが3つ並ぶと960pxになります。なので目的としては3つ.boxが並んだら、自動的に折り返し設定をします。
ではCSSを1つ追加しましょう。css.wrapper{ background-color: white; width: 960px; margin: 0 auto; /* 子要素を横並びにする */ display: flex; /* .boxが幅の端まで来たら折り返し */ flex-wrap: wrap; }ブラウザを確認しましょう。
出来ましたね!一応これでベースは完成しました。
だだ画面を小さくしたりすると表示がおかしくなってしまいます。なので次の章で各画面に合わせた対応をしていきたいと思います。2.レスポンシブ対応
さて次に各画面サイズでページがみやすくなるようにコードを追加していきます。
レスポンシブで必要な知識やワードを箇条書きにします。
・デベロッパーツール
→開発者専用のWEBページ検証ツールです。Chromeブラウザ上、Ctrl+Shift+iで起動します。画面をスライドする事でいろんなサイズの画面を検証する事が出来ます。(以下参照)・ブレイクポイント
→画面の表示が切り替わるポイント(画面サイズ)のこと。
よく使われるブレイクポイントは480,576,768,960,992,1024,1200,1400pxです。例えば480pxをブレイクポイントと置いた場合以下のような書き方になります。
この場合480pxをブレイクポイントとして、480px以上なら.testのcolorを赤、480px未満なら.testのcolorを青、にしています。
さてこの2点を理解したところで、実際にコードを追加していきましょう。
今回は992px,768pxをブレイクポイントとします。
現状.boxが3つ並んだ時は綺麗に画面が表示されています。
2つの場合はどうでしょうか?デベロッパーモード(Chromeブラウザ上、Ctrl+Shift+i)で確認します。.boxが左に寄ってしまってます。更にいうと.warapperで指定したbackground-color: white;が右に長く伸びています。
ではどう書いたら良いでしょうか?
今回の目的を確認します。・.boxを中央に寄せたい。
・白い背景が.box2つ分がちょうど収まるくらいのサイズにしたい。ですね。そしてもう1つブレイクポイントはどうしたら良いでしょうか?
何度も言いますが現状3つまでは綺麗に表示されています。960pxまでは問題ないということになります。なので普通に考えたら960pxをブレイクポイントと考えるはずです。
ですが通常の場合少し余裕を持たせるのが良いでしょう。970~1000pxくらいが良いと思います。
今回はせっかくなので、よく使う992pxを使いましょう。ではコードを書いていきます。
css/* 992px以下は.wrapperの幅を変えます */ @media screen and (max-width: 991.9px){ .wrapper{ /* .boxがちょうど2つ収まるように幅を計算 */ width: 640px; } }ブラウザを確認します。
あら不思議!白い背景に良い感じに.boxが収まり、中央寄せにもできました。
続けて1つの場合もやっていきます。やりかたはさっきまでと同じです。
まずは画面を確認します。さっきと同様左寄せになってしまってます。
なので今度は小さいブレイクポイントに対して.wrapperのwidthを320pxを指定します。
ブレイクポイントはちょっと広めですが768pxにしましょう。css/* 768px以下は.wrapperの幅を変えます */ @media screen and (max-width: 767.9px){ .wrapper{ width: 320px; } }ブラウザを確認します。
まぁ多少不恰好な感じもしますが、今回はこれで良しとしましょう。
これでレスポンシブ完了です。
デベロッパーツールで動作を確認しましょう。こんな感じに動けばOKですね!
次の章ではモバイルファーストなコードに変えていきます。3.モバイルファーストなコードに書き換えます。
分かりやすいように最初はPCファーストな書き方で書きました。ですが基本的にはモバイルファーストで書くのが主流なのでこれに書き換えます。
初めに現状のCSSのコードを全て、掲載します。
css@charset "UTF-8"; /* reset */ *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Noto Sans JP', sans-serif; line-height: 1; } ul{ list-style: none; } a{ text-decoration: none; } /* main contents */ body{ background-color: rgb(230, 230, 230); } .wrapper{ background-color: white; width: 960px; margin: 0 auto; /* 子要素を横並びにする */ display: flex; /* .boxが幅の端まで来たら折り返し */ flex-wrap: wrap; } /* 992px以下は.wrapperの幅を変えます */ @media screen and (max-width: 991.9px){ .wrapper{ /* .boxがちょうど2つ収まるように幅を計算 */ width: 640px; } } /* 768px以下は.wrapperの幅を変えます */ @media screen and (max-width: 767.9px){ .wrapper{ width: 320px; } } /* .boxの共通CSS */ .box{ /* box本体のCSS */ width: 300px; height: 200px; background-color: pink; /* 文字色、配置位置設定 */ line-height: 200px; color: white; font-size: 3rem; text-align: center; /* boxどうしの間隔を開ける */ margin: 10px; } /* 奇数番目の.boxのみ背景色を変える */ .box:nth-child(odd){ background-color: aquamarine; }どこがPCファーストかというと、今回の場合.wrapperのwidthをレスポンシブ対応用に変えました。
コードは頭から呼ばれて行くので今回の場合width:960px;→width:640px;→width:320px;という順番になってしまってます。これがPCファーストということになっています。なんだそんなことか、と思うかもしれませんがスマホによるアクセスの増加を考えると馬鹿にできないことになります。
なのでモバイルファーストなコードに書き換えます。
といっても今回は変更箇所が少ないので解説はしません。変更後のコードを載せますので是非違いを見比べて見て下さい。以降は変更後のコードを使います。
※動作上には変わりありません。css(変更後)@charset "UTF-8"; /* reset */ *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Noto Sans JP', sans-serif; line-height: 1; } ul{ list-style: none; } a{ text-decoration: none; } /* main contents */ body{ background-color: rgb(230, 230, 230); } .wrapper{ background-color: white; margin: 0 auto; /* 子要素を横並びにする */ display: flex; /* .boxが幅の端まで来たら折り返し */ flex-wrap: wrap; /* モバイルファーストの場合 */ width: 320px; } /* モバイルファーストにすると */ @media screen and (min-width: 768px) and (max-width: 991.9px){ /* 768~991.9pxまで */ .wrapper{ width: 640px; } } @media screen and (min-width: 992px){ /* 992以上 */ .wrapper{ width: 960px; } } /* .boxの共通CSS */ .box{ /* box本体のCSS */ width: 300px; height: 200px; background-color: pink; /* 文字色、配置位置設定 */ line-height: 200px; color: white; font-size: 3rem; text-align: center; /* boxどうしの間隔を開ける */ margin: 10px; } /* 奇数番目の.boxのみ背景色を変える */ .box:nth-child(odd){ background-color: aquamarine; }4.より実践的な形にする。
ある程度flexboxとレスポンシブ対応の事がわかってきたところで、仕上げにもう少しWEBページっぽくしていきたいと思います。
【完成イメージ】
今まで作った物の基本的なベースは崩さず作りました。
では早速改修作業に入ります。まずはhtmlから変えていきましょう。現在ある.boxのテキストは消してしまいましょう。
そして画像、タイトル、テキストの順にタグを追加していきます。
そして文書構造をはっきりさせるためdivをarticleタグに差し替えます。
※画像は各自ご用意ください。html<h1>FlexBox記事プレビューサンプル</h1> <div class="wrapper"> <article class="box"> <img src="../assets/img/image_1.jpeg" alt="サンプルイメージ1"> <h2>記事のタイトル</h2> <p>サンプルテキスト。この記事では●●について書かれています。是非参考にして下さい。</p> </article> <article class="box"> <img src="../assets/img/image_2.jpeg" alt="サンプルイメージ2"> <h2>記事のタイトル</h2> <p>サンプルテキスト。この記事では●●について書かれています。是非参考にして下さい。</p> </article> <article class="box"> <img src="../assets/img/image_3.jpeg" alt="サンプルイメージ3"> <h2>記事のタイトル</h2> <p>サンプルテキスト。この記事では●●について書かれています。是非参考にして下さい。</p> </article> <article class="box"> <img src="../assets/img/image_4.jpeg" alt="サンプルイメージ4"> <h2>記事のタイトル</h2> <p>サンプルテキスト。この記事では●●について書かれています。是非参考にして下さい。</p> </article> <article class="box"> <img src="../assets/img/image_5.jpg" alt="サンプルイメージ5"> <h2>記事のタイトル</h2> <p>サンプルテキスト。この記事では●●について書かれています。是非参考にして下さい。</p> </article> <article class="box"> <img src="../assets/img/image_6.jpg" alt="サンプルイメージ6"> <h2>記事のタイトル</h2> <p>サンプルテキスト。この記事では●●について書かれています。是非参考にして下さい。</p> </article> </div>ブラウザを確認するとトンデモナイことになってると思いますw?
このまま一気にCSSを書いていきましょう。まず.box内のテキスト関連のCSSは一旦消します。
/* 文字色、配置位置設定 */のコメントから下4つを消します。そして一番、大暴れしている.box内の画像のサイズ指定をします。
css.box > img{ /* サイズ指定 */ width: 100%; }一旦ブラウザを確認しましょう。
なんとか見れるくらいにはなりました。
ただ画像サイズがバラバラです。それぞれの画像のアスペクト比を保ったままの状態になっているからです。
なのでサイズを揃えます。他のデザインツールでトリミングしても良いのですが、正直無駄というかCSSであれば秒でできるのでCSSでサイズ調整します。まずは高さからです。
css.box > img{ /* サイズ指定 */ width: 100%; height: 140px; }画面を見ると高さは揃いました。ですが猫の画像なんか分かりやすいのですが少し潰れてます。そう高さだけを指定するとアスペクト比が崩れます。なのでもうひと手間加えます。
css.box > img{ /* サイズ指定 */ width: 100%; height: 140px; /* アスペクト比を維持 */ object-fit: cover; }これで画像の変形もなく高さが揃いました。
次にテキストを調整したいのですが、その前に.boxそのものの調整をしたいです。
画像やテキストが.box内いっぱいに表示されています。
また高さも200pxじゃ足りない域に来ました、なのでここを調整します。css.box{ /* box本体のCSS */ width: 300px; /* heightを子要素全体の高さに設定 */ height: 100%; background-color: pink; /* boxどうしの間隔を開ける */ margin: 10px; /* 内側余白 */ padding: 10px; }余白も出来て、子要素が全て.boxの中に収まりました。これでだいぶ見やすくなりました。
ではタイトルとテキストの調整をしていきます。ここまで来ればもう簡単です。cssh1{ text-align: center; margin: 2rem 0; } .box > h2{ font-size: 20px; margin: 10px 0; text-align: center; color: darkblue; } /* 偶数番目の.boxの子要素h2に対してのみ */ .box:nth-child(even) > h2{ color: darkred; } .box > p{ font-size: 16px; color: gray; }今回は:nth-child(even)を使って、偶数番目の.boxの子要素h2に対してのみテキストの色を変えています。ついでにh1も配置の調整しました。
どうでしょう?目的通り画面を作成出来ましたでしょうか?出来なかった方は最終形コードを掲載するのでしっかり見比べて間違いを見つけましょう。コメントを適当に追加してるのでそこもちゃんと見て、どのようにグループ分けしているか、どのような意味のCSSなのかしっかり理解しましょう。動いたから終わりじゃないですよ?
css@charset "UTF-8"; /* reset */ *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Noto Sans JP', sans-serif; line-height: 1; } ul{ list-style: none; } a{ text-decoration: none; } /* main contents */ body{ background-color: rgb(230, 230, 230); } h1{ text-align: center; margin: 2rem 0; } .wrapper{ background-color: white; margin: 0 auto; /* 子要素を横並びにする */ display: flex; /* .boxが幅の端まで来たら折り返し */ flex-wrap: wrap; /* モバイルファーストの場合 */ width: 320px; } /* モバイルファーストにすると */ @media screen and (min-width: 768px) and (max-width: 991.9px){ /* 768~991.9pxまで */ .wrapper{ width: 640px; } } @media screen and (min-width: 992px){ /* 992以上 */ .wrapper{ width: 960px; } } /* .boxの共通CSS */ .box{ /* box本体のCSS */ width: 300px; /* heightを子要素全体の高さに設定 */ height: 100%; background-color: pink; /* boxどうしの間隔を開ける */ margin: 10px; /* 内側余白 */ padding: 10px; } /* 奇数番目の.boxのみ背景色を変える */ .box:nth-child(odd){ background-color: aquamarine; } .box > img{ /* サイズ指定 */ width: 100%; height: 140px; /* アスペクト比を維持 */ object-fit: cover; } .box > h2{ font-size: 20px; margin: 10px 0; text-align: center; color: darkblue; } /* 偶数番目の.boxの子要素h2に対してのみ */ .box:nth-child(even) > h2{ color: darkred; } .box > p{ font-size: 16px; color: gray; }長くなりましたがこれでFlexBoxとレスポンシブの練習は終了です。
以下におまけとしてもう少しデザインやアクションを追加したコードサンプルを載せておきますので余裕のある方はで是非挑戦して見て下さい。おまけ
今回の範囲ではないので解説はしません。
もう少し装飾やアクションを追加してもっと実用的な物にしましたので、是非参考にして下さい。【完成品】
html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Template</title> <!-- Google Font --> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700;900&display=swap" rel="stylesheet"> <!-- CSS --> <link rel="stylesheet" href="../assets/css/responsive_traning.css"> </head> <body> <h1>FlexBox記事プレビューサンプル</h1> <div class="wrapper"> <article class="box"> <div class="imageFrame"> <img src="../assets/img/image_1.jpeg" alt="サンプルイメージ1"> <div class="layer"> <p><a href="#">Show More</a></p> </div> </div> <h2>記事のタイトル</h2> <p>サンプルテキスト。この記事では●●について書かれています。是非参考にして下さい。</p> </article> <article class="box"> <div class="imageFrame"> <img src="../assets/img/image_2.jpeg" alt="サンプルイメージ2"> <div class="layer"> <p><a href="#">Show More</a></p> </div> </div> <h2>記事のタイトル</h2> <p>サンプルテキスト。この記事では●●について書かれています。是非参考にして下さい。</p> </article> <article class="box"> <div class="imageFrame"> <img src="../assets/img/image_3.jpeg" alt="サンプルイメージ3"> <div class="layer"> <p><a href="#">Show More</a></p> </div> </div> <h2>記事のタイトル</h2> <p>サンプルテキスト。この記事では●●について書かれています。是非参考にして下さい。</p> </article> <article class="box"> <div class="imageFrame"> <img src="../assets/img/image_4.jpeg" alt="サンプルイメージ4"> <div class="layer"> <p><a href="#">Show More</a></p> </div> </div> <h2>記事のタイトル</h2> <p>サンプルテキスト。この記事では●●について書かれています。是非参考にして下さい。</p> </article> <article class="box"> <div class="imageFrame"> <img src="../assets/img/image_5.jpg" alt="サンプルイメージ5"> <div class="layer"> <p><a href="#">Show More</a></p> </div> </div> <h2>記事のタイトル</h2> <p>サンプルテキスト。この記事では●●について書かれています。是非参考にして下さい。</p> </article> <article class="box"> <div class="imageFrame"> <img src="../assets/img/image_6.jpg" alt="サンプルイメージ6"> <div class="layer"> <p><a href="#">Show More</a></p> </div> </div> <h2>記事のタイトル</h2> <p>サンプルテキスト。この記事では●●について書かれています。是非参考にして下さい。</p> </article> </div> </body> </html>css@charset "UTF-8"; /* reset */ *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Noto Sans JP', sans-serif; line-height: 1; } ul{ list-style: none; } a{ text-decoration: none; } /* main contents */ body{ background-color: rgb(230, 230, 230); } h1{ font-family: 'Noto Serif JP', serif; font-weight: 900; text-align: center; margin: 2rem 0; } .wrapper{ background: url(../img/bg_1.jpg) center/cover; border: 10px solid burlywood; padding: 50px 0; margin: 0 auto; /* 子要素を横並びにする */ display: flex; /* .boxが幅の端まで来たら折り返し */ flex-wrap: wrap; /* モバイルファーストの場合 */ width: 340px; } /* モバイルファーストにすると */ @media screen and (min-width: 768px) and (max-width: 991.9px){ /* 768~991.9pxまで */ .wrapper{ width: 660px; } } @media screen and (min-width: 992px){ /* 992以上 */ .wrapper{ padding: 100px 0; width: 980px; } } /* .boxの共通CSS */ .box{ /* box本体のCSS */ width: 300px; /* heightを子要素全体の高さに設定 */ height: 100%; background-color: pink; /* boxどうしの間隔を開ける */ margin: 10px; /* 内側余白 */ padding: 10px; /* アクション時間調整 */ transition: .3s; } /* 奇数番目の.boxのみ背景色を変える */ .box:nth-child(odd){ background-color: aquamarine; } /* 5の倍数番目の.boxのみ背景色を変える */ .box:nth-child(5n){ background-color: #ffff46; } .box:hover{ transform: scale(1.01); box-shadow: 10px 15px 10px gray; } .imageFrame{ position: relative; } .imageFrame > img{ border: none; vertical-align: bottom; /* サイズ指定 */ width: 100%; height: 140px; /* アスペクト比を維持 */ object-fit: cover; } .imageFrame > .layer{ /* layer本体 */ background-color: rgba(0, 0, 0, 0.3); width: 100%; height: 100%; /* positioning */ position: absolute; top: 0; left: 0; } .imageFrame > .layer p{ text-align: center; line-height: 140px; } .imageFrame > .layer a{ font-family: 'Lobster', cursive; letter-spacing: 3px; color: white; border: 1px solid white; box-shadow: 0 0 10px white; border-radius: 3px; padding: 5px 10px; transition: .3s; } .imageFrame > .layer a:hover{ background-color: orange; color: black; box-shadow: 0 0 10px orange; } .box > h2{ margin: 10px 0; font-family: 'Noto Serif JP', serif; font-size: 20px; text-align: center; color: darkblue; font-weight: 900; } /* 偶数番目の.boxの子要素h2に対してのみ */ .box:nth-child(even) > h2{ color: darkred; } .box:nth-child(5n) > h2{ color: rgb(50, 50, 0); } .box > p{ font-size: 16px; color: gray; letter-spacing: 3px; }こんな感じになりました。疑似クラスでアクションを追加するためにhtmlにクラスを追加したりしてます。あとはwebFontを3種類使ってます。.boxの色もパターンを増やしました。まだまだ改良の余地はありますがこれだけでもまぁまぁ見れる感じになったかと思います。
- 投稿日:2020-11-22T03:20:12+09:00
【HTML/CSS】文章を一行で納めるためには「white-space」を「nowrap」に指定する
文章が長くなっても一行に収めたかった
こんにちは、ndj です。
HTML
でタグ内の文章が長くなった場合でも行幅を保持したい場面があったので、その方法を記録しておきます。
ついでに、行幅を保持した場合に起こる不格好な部分も成形する方法も記録しておきます。この記事の要約
- 文章を一行に収めるためには、
white-space
プロパティをnowrap
に指定する。- 文章の長さがタグの横幅を超えた分を非表示にするには
overflow
プロパティをhidden
に指定する。- 文章の長さがタグの横幅を超えたとき、省略記号を表示するには
text-overflow
プロパティをellipsis
に指定する。文章を一行で納めるためには white-space プロパティに nowrap を指定する
題の通りです。
サンプルを以下に記します。See the Pen QWEXmJJ by ndj (@ndjndj) on CodePen.
p
タグのwidth
は横幅を設定するためにとりあえず指定しています。border
は横幅を明示的にするために設定しています。
通常、文章の長さが指定した横幅を超える場合は行の折り返しが発生しますが、white-space
にnowrap
を指定すると行の折り返しは行われません。
MDN web docs
によるとwhite-space
プロパティは「要素内のホワイトスペースをどのように扱うかを設定する」プロパティだそうです。
このプロパティは、デフォルトでは、normal
が設定されています。
normal
プロパティの挙動は以下の通りです。連続するホワイトスペースはまとめられます。ソース内の改行文字もホワイトスペースとして扱われます。行ボックスを埋めるために、必要なら行を折り返します。
参考:MDN web docs: white-space一方で、
nowrap
プロパティは以下のように、normal と同じくホワイトスペースを詰めますが、行の折り返しは行いません。
参考:MDN web docs: white-spaceとあります。
つまり、行の折り返しをさせないためにこのプロパティをnowrap
に設定するわけですね。
しかし、上記のサンプルですと、行の折り返しを行わないので文章が横幅を超えてしまった場合はそのまま要素の横幅からはみ出してしまうので不格好です。文章の長さがタグの横幅を超えた分を非表示にするには
overflow
プロパティをhidden
に指定する。行の折り返しを行わないために、指定した横幅よりも文章が長くなってしまう場合があります。
あらかじめ指定した横幅よりも長くなってしまった文章を非表示にするサンプルを以下に記します。See the Pen qBNzYVP by ndj (@ndjndj) on CodePen.
上記のように、
overflow
プロパティをhidden
に設定することで幅を超えた文章を非表示にすることができます。
MDN web docs
によると、overflow
プロパティの初期値は、visible
に設定されています。これで、文章が長くなってしまっても指定した横幅を超えないように設定することができました。
文章の長さがタグの横幅を超えたとき、省略記号を表示するには
text-overflow
プロパティをellipsis
に指定する。最後に、文章の長さがタグの横幅を超えたときに省略記号を表示する方法を記録しておきます(やり方は題のとおりなんですが)。
以下にサンプルを記します。See the Pen eYzwryz by ndj (@ndjndj) on CodePen.
上記のように、
text-overflow
プロパティをellipsis
(省略記号という意味らしいです)に設定すると、文章が長くなってしまった場合に省略記号が表示されます。
MDN web docs
によると、初期値はclip
といって、文章が指定した幅を超えた場合はそこで切り取るという設定です。
このプロパティは行の折り返しの有無を制御したり、文章が幅からはみ出すことの有無を直接指定するものではないことに気をつけたいです。
ちなみに、省略記号を任意のものにするtext-overflow: "任意の文字列"
という設定もあるのですが、2020年11月22日時点では、firefox
、Android 版 firefox
以外ではサポートされていないそうです。参考:MDN web docs: text-overflow
最後に
文章が長くなってしまった場合でも、レイアウトは崩したくない。。という場面があり、これからも出くわしそうだなと思ったので記録しておきます。
以上です。ここまで読んでくださりありがとうございました。
誤字脱字、アドバイスやご指摘などありましたらコメントいただけると幸いです。参考
Web備忘録: [CSS] 1行で収まらなずに要素の幅を超えた文字列を「…」で省略する方法
MDN web docs: white-space
MDN web docs: overflow
MDN web docs: text-overflow