HTML/CSSシェアツイートLINEこんにちは。Web制作フリーランスのホリエです。今回は、ウェブサイトで頻出するパーツであるメディアをとりあげ、正しいCSSの書き方を考えてみます。メディアって何?という方のために先に示しておくと、下記のように、画像とテキストが並んだパーツです。これを実装していきます。<p>ホームページを持ちたい。ゼロの状態からホームページの立ち上げまで全てお願いしたい・・・しかし時間もコストもかけられない、というお客様向けの事業です。<br>お客様への入念なヒアリング後、最適なデザインテンプレートをベースに作り込むことで、大幅に工数を減らし、短納期、低価格を実現しています。flexを指定しています。centerを指定しています。flex-endにします。比較するとそれぞれ下記のような感じになります。1;スクリーンサイズが変化したときに、画像とテキストをどのように伸縮させるかを指定しています。flex-basis)のショートハンドになります。ここで、このショートハンドの説明をするとそれだけで一記事できてしまうほどのボリュームになってしまいますので、参考記事をご紹介するだけにとどめておきます。0と同等)と指定しているので、スクリーンサイズが変化したときの動きをざっくり表現すると、以下のような感じになります。画像:スクリーンサイズが変化しても、親要素の幅の30%を常に維持する。テキスト:親要素の幅から画像と余白を除き、残った領域はすべて総取りする。画像は小さくなりすぎると見づらくなるので、flex-basisで最小幅を決めて、テキストは余ったエリアで表示させている、ということですね。3%;親要素の幅の3%を、画像とテキストの余白に当てています。余白を固定値(px)で指定すると、スクリーンサイズが縮んだときに、余白が相対的に広くなって、全体のバランスが崩れます。そのために固定値(px)ではなく、相対値(%)で指定しています。100%;スクリーンサイズが狭いとき、画像が親要素(この場合は.media__img-wrapper)からはみ出さないようにするための指定です。この指定は、結構忘れがちです・・・。0;将来の保守のことを考えた、実は格調高いコードです。この指定は、.media__bodyの最後の子要素の下部余白を削除しています。今回のコードでは、最後の子要素<p>に下部余白を設定していないので、直接影響はない指定ですが、今後、子要素を追加/削除したときに効果を発揮します。例として、最後の子要素<p>を削除し、タイトルだけ残す場合を考えてみます。0;が適用されていない場合、下記のようにタイトル下部にmarginが残っているので、タイトルが天地中央からやや上寄りにずれてしまいます。0;を適用しておくと、タイトル下部のmarginが削除され、ぴったり天地中央に揃います。このように、複数の要素からなるパーツの場合、最後の要素の下部余白を常に削除する設定にしておくと、レイアウト崩れが起きなくなるので、覚えておくと便利です。block;でFlexboxを解除します。20px;横並びのときに指定されていた画像右側の余白を、縦並びに合わせて画像下部に付け替えています。おわりメディアはコーポレートサイトなどでよく出てくるパーツなので、使いまわしできるコードを一つ常備しておくと、とても便利ですね。この機会にぜひ自在に使えるようにしてみてください。次回はこれを基本として、拡張バージョンを作ってみたいと思います。この記事は以下の書籍を参考にさせていただいてます。CSS設計を体系的に学ぶには最高の一冊です。メディアこの記事を書いた人ホリエ新卒で大企業に入社。16年後に「そうだ、これからは個人で生きていこう」と思いたち、フリーランスになった人。Web制作を中心にこつこつモノづくりの日々を送っています。【脱ビギナーCSS】基本のメディアを拡張してみる関連記事HTML/CSS【脱ビギナーCSS】基本のメディアを拡張してみる今回は、前回作成した基本のメディアを拡張してみます。CSSの上書き部分だけ書けばいいので、少ないコード量で拡張することが出来ますよ。ホリエ2021年9月14日HTML/CSSHTML/CSS【脱ビギナーCSS】基本のボタンに矢印を追加してみる今回は、前回作った基本のボタンを拡張する形で、矢印付きボタンを作ります。ホリエ2021年9月12日HTML/CSSHTML/CSSヘッダーをコーディングしてみよう今回は、ヘッダーのコーディングをしていきます。Progateからスタートした初学者が最初にぶつかる関門としてヘッダーの実装を挙げる方が多いと思いますので、ここでしっかり基礎を理解していきましょう!ホリエ2021年10月25日HTML/CSSHTML/CSS【脱ビギナーCSS】シンプルな基本のボタンを実装してみる今回は、どんなウェブサイトでも必ず登場する基本のパーツであるボタンをとりあげ、正しいCSSの書き方を考えてみます。