先日、こんなツイートをしました。

✅線を引くのにまだborder使ってるの？

2行で簡単に文字に線を引くことができるプロパティ

css<br>h1 {<br> text-decoration: overline;<br> text-decoration-color: deeppink;<br>https://t.co/qGR0TTfvFL#駆け出しエンジニアと繋がりたい#デイトラ pic.twitter.com/QTZmB3jlL7

— おか | 知多半島のホームページ屋 (@oka_jumboworld) November 22, 2020

これを見つけたとき
「やっぱりcssって面白い」
と思いました。難しいけど、楽しいんですよね。

どこかの外国人がcodepenでシェアしており、知りました。
こちらが参考コードです。

See the Pen
Overstanding overlines by Adam Argyle (@argyleink)
on CodePen.

外国人のシェアしたのでは文字の上にしか線を引いてなかったので、自分で試してみました。

See the Pen
text-decoration by TakahiroOkada (@okalog)
on CodePen.

ふむふむ。なかなか便利そうですね。

文字の下に下線を引く方法

上のcodepenのコードを参考にしてもらえれば分かると思うんですが、実際に僕が書いたコードがこちらです。
※ラインを引くためだけに必要なプロパティです。文字サイズとかは省略しています。

.top{
  text-decoration: overline;
  text-decoration-color: #FF1494;
}
.bottom{
  text-decoration: underline;
  text-decoration-color: #C9B500;
}

text-decorationで上下どちらかの線を決めて、text-decoration-colorで色の指定しています。
他にも何かできないかなって調べてみたらこんなこともできました。(※用途不明)

See the Pen
mdEZgmL by TakahiroOkada (@okalog)
on CodePen.

めんどくさいので、やりませんがドットや二重線とかも引けそうですね。
・参考記事（https://developer.mozilla.org/ja/docs/Web/CSS/text-decoration-style）

border-bottomとの違い

ツイートしたときに、こんな質問を頂きました。
これ実は僕も気になって調べたんですよね。

そしたら、非常によくまとまった記事があって勉強させて頂きました。
・参考記事（https://www.seleqt.net/programming/the-best-way-draw-underline/）

まとめると

さてアンダーラインを引くにはどの方法がベストでしょうか？その答えは状況によって使い分けることがベストとなります。
文字のサイズが小さい場合は、「text-decoration」を利用して、「text-decoration-skip」を適用するのがよいでしょう。見映えは多くのブラウザーで面白味のないものかもしれませんが、見た人が気にならないものでしょう。
本文の場合、「background-image」を利用するのがよいでしょう。アンダーラインが細かったり、テキストとは異なる色を指定する場合は「text-shadow」プロパティを外します。
テキストが1行だけの場合は、「border-bottom」を利用し、必要に応じて他のプロパティで調整するのがいいです。
将来的に各ブラウザーのサポートがよりよくなれば、アンダーラインを引くベストな方法は「text-decoration」になるでしょう。

とのことでした。

せっかくなので、色々試してみようと思います。

手順1：四角形を作る

.triangle{
　content: ' ';
  width:10px;
  height:10px;
  border: 3px solid black
}

手順2：三角形の色を決める

 // 今回は左辺を黄色にする
 border-left-color: yellow;

手順3：辺（border）を厚くする

//変更点
border: 20px solid black;

手順4：widthとheightと小さくする

//変更点
width: 0px;
height:0px;

手順5：borderを透明にする

完成！

//変更点
border: 20px solid transparent;

最終コード

.triangle{
  content: ' ';
  width: 0px;
  height: 0px;
  border: 20px solid transparent;
  border-left-color: yellow;
}

どうも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のちょいテク詰め合わせ

まずはデフォルトテーマを丸々コピーしてオリジナルテーマの基礎を作成

この記事は『/var/lib/redmine』にRedmineをインストールした前提ね。
まずは『/var/lib/redmine/public/themes』にテーマ名のフォルダーを作成。
今回はテーマ名『atai』にしたよー。

そしたら『/var/lib/redmine/public』内にある『images』『javascripts』『stypesheets』をさっき作った『atai』フォルダーにコピー。

あとは管理画面に行って…

表示タブのテーマで設定すればOK！

ね？簡単でしょ？

ブラウザのデベロッパーツール使って感触を確かめながらCSS調整

Chromeなら『Ctrl + Shift + i』でデベロッパーツール開くん！
んで、変更したい場所を選択、どのCSSファイルの何行目が適用されてるか分かるん！
右サイドバーのCSSの値は変更すればその場で反映されるん！

『application.cssの29行目のbackground-colorの値は#000000かな～』
てな感じで一つ一つパラメータを決めながら、元のCSSファイルを変更していくん！

CSS変更しても反映されないんだけど！

ブラウザのキャッシュをクリアしてページを再読み込み！
Chromeなら『Ctrl + Shift + r』じゃ！

いい感じの配色にするには？

まずカラーコーディネーターの資格を取ります。
Color Scheme Designer 便利です！
ほぼほぼ説明不要なくらいインターフェースが直感的で分かりやすいです。

Color List タブで色のコードをコピれますん。
うーん、痒い所に手が届く！

はい、こんな感じ

うーん、とっても使いやすくなったぞ^^


画像は下記から頂きました。
【公式】10話邪神ちゃんドロップキックのアニメ画像 - アル

蛇足

デベロッパーツールで変更後のCSSをダウンロードできれば楽だな～。
CSSファイルを差し替えちゃえばデベロッパーツール上でやった編集が一気に反映される！

『期限が1日以内のチケットが5件以上あったらヘッダーに点滅するアイコン表示』
なんて実務的なカスタマイズしてもいいかもね。

バージョン

CentOS Linux release 8.2.2004 (Core)
Redmine 4.0.6

初学者さん向けの記事です。
レスポンシブに欠かせない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;
}

ここまでは難しい事はありませんね。一応コメントを追加してるのでどうグループ分しているか見て理解しましょう。
ではブラウザを確認します。

このように縦に６つブロックが並んでいればOKです！
ではもう少し手を加えます。ブロックの色が交互になるように、「奇数番目の.boxのみ背景色を変える」をやってみます。

css(追加分のみ記載)

/* 奇数番目の.boxのみ背景色を変える */
.box:nth-child(odd){
  background-color: aquamarine;
}

nth-childは疑似クラスです。兄弟要素の位置を（）内で指定出来ます。
兄弟要素とは同列のアウトラインにいる要素の事を指しています。今回の場合.boxクラスが同列に６つ並んでいるので６兄弟となり、１番目なら「:nth-child(first-child)」、２番目なら「: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づつ付いています。なので１つの.boxで320pxを要します。つまり.boxが3つ並ぶと960pxになります。

なので目的としては３つ.boxが並んだら、自動的に折り返し設定をします。
ではCSSを１つ追加しましょう。

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を青、にしています。

さてこの２点を理解したところで、実際にコードを追加していきましょう。
今回は992px,768pxをブレイクポイントとします。
現状.boxが3つ並んだ時は綺麗に画面が表示されています。
２つの場合はどうでしょうか？デベロッパーモード(Chromeブラウザ上、Ctrl+Shift+i)で確認します。

.boxが左に寄ってしまってます。更にいうと.warapperで指定したbackground-color: white;が右に長く伸びています。

ではどう書いたら良いでしょうか？
今回の目的を確認します。

・.boxを中央に寄せたい。
・白い背景が.box２つ分がちょうど収まるくらいのサイズにしたい。

ですね。そしてもう１つブレイクポイントはどうしたら良いでしょうか？
何度も言いますが現状3つまでは綺麗に表示されています。960pxまでは問題ないということになります。

なので普通に考えたら960pxをブレイクポイントと考えるはずです。
ですが通常の場合少し余裕を持たせるのが良いでしょう。970~1000pxくらいが良いと思います。
今回はせっかくなので、よく使う992pxを使いましょう。

ではコードを書いていきます。

css

/* 992px以下は.wrapperの幅を変えます */
@media screen and (max-width: 991.9px){
  .wrapper{
    /* .boxがちょうど２つ収まるように幅を計算 */
    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がちょうど２つ収まるように幅を計算 */
    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は一旦消します。
/* 文字色、配置位置設定 */のコメントから下４つを消します。

そして一番、大暴れしている.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の中に収まりました。これでだいぶ見やすくなりました。
ではタイトルとテキストの調整をしていきます。ここまで来ればもう簡単です。

css

h1{
  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を３種類使ってます。.boxの色もパターンを増やしました。まだまだ改良の余地はありますがこれだけでもまぁまぁ見れる感じになったかと思います。

文章が長くなっても一行に収めたかった

こんにちは、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 に設定されています。

参考：MDN web docs: overflow

これで、文章が長くなってしまっても指定した横幅を超えないように設定することができました。

文章の長さがタグの横幅を超えたとき、省略記号を表示するには 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