TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSで画像の下に隙間ができる原因と消す方法を現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
CSS

CSSで画像の下に隙間ができる原因と消す方法を現役エンジニアが解説【初心者向け】

初心者向けにCSSで画像の下に隙間ができる原因と消す方法について解説しています。意図しない余白がある場合の原因と対処法を、例を上げて説明します。検証と余白の削除を行う際の参考にしてみましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

CSSで画像の下に隙間ができる原因と消す方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

画像の下に隙間ができる原因と消す方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

隙間が生じる例を見てみよう

画像の下部の余白としてmargin-bottom、padding-bottomを設定しているわけでもなく、違和感のある隙間を確認できることが可能です。

初見は、全角スペースや半角スペースが表示されていることにも見受けられるものの、その一例を再現するために枠としてブロックレベル要素のdivタグとその子要素としてインライン要素のimgタグを定義しています。

ブロックレベル要素の高さが子要素の高さと一致しておらず、高さに差が生じているため、隙間を見つけることができます。

この隙間は、デベロッパーツールのエレメンツの項目（Google Chrome）、または、インスペクタの項目（Mozilla Firefox）で検証可能です。

 

隙間が生じる主な原因と対処法

原因

画像のimgタグに標準的なスタイルとして、vertical-align: baseline;が設定されており、この値が隙間を作り出しています。

ブラウザの標準的なスタイルシートとして、あらかじめ定義されてあることが多いため、デベロッパーツールでもこの値を確認することに対して困難でした。

この原因を特定する場合、ブラウザの標準的なスタイルシートを解体しなければわからないほどでした。

 

対処法

ブラウザの標準的な装飾を初期化するためのスタイルシートのreset.cssなどには、この設定の値を上端に整えて、隙間を埋めるための初期化のスタイルが定義されていません。

ブロックレベル要素の高さも、その子要素と同じ値として定義してから隙間を埋めることが可能です。

そして、本質的な原因となっているvertical-alignの値をbaselineからtopなどに変更することでも隙間を埋めることができるでしょう。

 

[PR] Webデザインで副業する方法とは

実際に対処して隙間を消してみよう

インライン要素の画像に対してvertical-align: top;を設定します。

インライン要素のimgタグとその親要素であるdivタグの下部に生じた隙間が解消されました。

CSSに隙間が生まれた際には、vertical-alignの値を変化させて対応しましょう。

執筆してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

大石ゆかり

CSSで画像の下に隙間ができる原因と消す方法がよくわかったので良かったです！

田島悠介

ゆかりちゃん、これからも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので参加してみてください。

記事を検索

関連するキーワード

関連する記事

CSSのhoverで別の要素の値を変更させる方法【初心者向け】

CSSのhoverで別の要素の値を変更させる方法について解説します。hoverはマウスが要素に触れている場合の処理を書くプロパティですが、別の要素を変化させるこ...
CSS

デバイスに合わせたい！CSSのメディアタイプの使い方【初心者向け】

今回はCSSのメディアタイプについて説明をしていきます。デバイスに合わせてレイアウトを変えるために必要な知識なので、Webサイト制作に役立つでしょう。 そ...
CSS

CSSの親要素から子要素へのスタイルの適用方法を現役エンジニアが解説【初心者向け】

CSSの親要素から子要素へのスタイルの適用方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
CSS

CSSのリンクの色を変えない方法を現役エンジニアが解説【初心者向け】

CSSのリンクの色を変えない方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも...
CSS

CSSだけでif文のような条件分岐を実装する方法を現役エンジニアが解説【初心者向け】

CSSだけでif文のような条件分岐を実装する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
CSS

行間を調整する時に便利！CSSのline-heightの使い方【初心者向け】現役エンジニアが解説

CSSで書くline-heightの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
CSS

あわせてよく読まれている記事

サイズ指定に役立つ！CSSでcalc( )を使う方法【初心者向け】

CSSで書くcalcファンクションの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 要素の水平や垂直のセンタリング、可変的な幅の指定や均等に要素を配置したい場合にもcalcファンクションを使えます。 異なる単位で複雑な計算も簡単に指定できます。 レイアウトやサイズ指定を楽に行うことができるので、少し応用的な使い方ですが、覚えておくと便利でしょう。 目次隙間が生じる例を見てみよう隙間が生じる主な原因と対処法実際に対処して隙間を消してみよう執筆してくれたメンター そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   大石ゆかり CSSで3等分にした要素の幅を設定するにはどうしたらいいですか？ 田島悠介 いろいろ方法があるけどcalcファンクションを使えば簡単だよ。 大石ゆかり calc？CSSで計算ができるんですか？ 田島悠介 その通り！たとえば全体の幅から3等分した要素を作りたいならwidth: calc(100% / 3)のように指定できるよ。 大石ゆかり へぇー。わかりやすいですね。 田島悠介 そうなんだ。まずはどういった記述の仕方をするか見てみよう。 大石ゆかり はい！   calcファンクションとは CSSのcalcファンクションとは、レイアウトやサイズ指定に計算式を使えるようにしてくれるファンクションです。 通常だと100pxや3emのようにレイアウトやサイズを指定しますが、calcファンクションを用いることで、100px + 50pxや、3em – 1em のように四則演算を使えるようになります。 たとえば、縦横150pxの要素をブラウザの表示領域で中央に配置するには以下のように記述できます。 width: calc(100vw / 2 - 150px / 2); height: calc(100vh / 2 - 150px / 2); このように指定すれば、中央位置（50vw, 50vh）から150pxの要素の端から中心までの距離（150px / 2）だけずらした位置を求めて中央にセンタリングできます。   calcファンクションを使うメリット 異なる単位で計算することができる 計算が明白になる calc()は結果の値ではない 異なる単位で計算することができる CSSのcalcファンクションは、異なる単位の値で計算式を作成できます。 異なる単位で計算できれば、相対的な長さの単位（%、em、vwなど）と絶対的な長さの単位（pxやptなど）を組み合わせて、要素をセンタリングするなどの指定が簡単に記述できます。 %、em、pxなどいろいろな単位を組み合わせた計算が可能です。 たとえば、表示領域全体から固定幅 80pxの要素の残りの幅を calc(100% – 80px) のように計算式で求められます。 このように、固定幅の要素と幅が可変する要素を並べたいときに便利です。 計算が明白になる calcファンクションを使うと、値が何を意味しているかが分かりやすくなります。 たとえば3等分の幅にしたい場合、「width: 33.333333333%;」と指定するよりも「width: calc(100% / 3);」としたほうが、3等分の幅にしたいことが明白にわかります。 固定された値を指定するよりもわかりやすく、3分割や7分割などの割り切れない値も設定できます。 calc()は結果の値ではない calcファンクションの計算結果は固定されているわけではなく、ブラウザの幅などに合わせてリアルタイムに計算されます。 たとえば「height: calc(100vh – 50px);」と指定すれば、ブラウザの表示領域に合わせて常に高さが表示領域の半分より50pxだけ少なくなるように調整されます。   [PR] Webデザインで副業する方法とはcalcファンクションの書き方 calcファンクションはCSSで値の代わりとして計算式を指定できます。 widthやheight、font-sizeなど値が指定できるところなら使えます。 構文 プロパティ（widthなど）: calc(式) 四則演算が使用できる 指定する式では四則演算の演算子（+、-、*、/）が使えます。 前後に空白が必要 加算（+）と減算（-）では演算子の前後に半角スペースを空ける必要があります。 除算（/）や乗算（*）では演算子の前後に半角スペースを入れなくても計算式が認識されますが、慣習として四則演算の演算子の前後には半角スペースを入れます。 ※演算子の前後に半角スペースを入れないと、加算や減算ではなく正の値や負の値として認識されます。詳しくは公式ドキュメント「calc() – CSS: カスケーディングスタイルシート | MDN」をご覧ください。 calcが利用できる場所 calcファンクションは、長さ（<length>）、周波数（<frequency>）、角度（<angle>）、時間（<time>）、数量（<number>）、整数値（<integer>）の値を設定する場所に対して使用できます。 入れ子が可能 calcファンクションは入れ子にできます。 入れ子にすると計算式の優先順位を決める、単なる括弧( )として扱われます。   calcファンクションの実装例 実際にcalcファンクションを使った実装例を見てみましょう。 ルートに基づいたサイズ指定 要素を3等分の幅にする 左右のセンタリング 上下の中央配置 ヒーローヘッダーの高さ調整 ルートに基づいたサイズ指定 calcファンクションを使えば、フォントのサイズを相対的に指定できます。 たとえば、calcファンクションでルート（最上位の要素。html要素）のフォントサイズより5px大きいサイズを指定しておけば、ルートのフォントサイズが変更されたら一緒に変わるようにできます。 スマートフォンとPCなどでフォントサイズを一括して変更したいときに便利です。 ソースコード 「text_plus」クラスの要素のフォントサイズをルートのフォントサイズの1.5倍になるようにcalcファンクションで計算します。 ルート（html要素）のフォントサイズが変更されたら、「text_plus」クラスの要素のサイズも変更されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">
CSS

CSSのinline-blockの改行による隙間を消す方法【初心者向け】

CSSのinline-blockの改行による隙間を消す方法について解説します。 ソースコード上で改行があるとインライン要素やインラインブロック要素に空白が出来てしまう問題を解決します。 そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 CSSのinline-blockの改行による隙間を消す方法について詳しく説明していくね！ 大石ゆかり お願いします！   inline-blockに隙間が出来てしまう原因 inline-blockは、インライン要素のように扱えて、簡単に横並びが実現できる上に、横幅と縦幅を与えられるなど、とても便利な設定なので、良く使われるのではないでしょうか。 しかし同時に、「変な隙間ができた」経験、ありませんか。 HTML <div class="container"> <div class="inline-contents"></div> <div class="inline-contents"></div> <div class="inline-contents"></div> </div>   CSS .container { display: block; border: 1px #000 solid; } .inline-contents { width: 33.3333%; height: 200px; display: inline-block; background-color: #66b6d5; } 右と下。。明らかに設定していない数値なのに、隙間があいてます。 そのせいで、width: 33.3333% (つまり1/3 以下)の箱が三つ、横並びになっているはずなのに、カラム落ちしてしまっています。 今回ばかりは、box-sizing を設定しても、marginやpaddingを0にしても、変化なしです。 inline-blockは、inline要素としての側面は「横並びにできる」ことだけではなく、font-size や line-height などの値が影響してくる場合があります。   inline-blockの隙間を消す書き方 下にできる隙間は、文字のデフォルトの設定でベースラインが図のようになっているので、下に少し隙間を取ろうとする性質が残っているため、できてしまいます。 (そのため、.inline-contentsにvertical-align: bottom; を当てると、下の隙間だけ解決します。) 横にできる隙間は、<div>間の改行が原因なので、全て取ると解決しますが、コードがごちゃごちゃしてしまいます。コメントアウトを<div>間に書く方法もありますが、全てにそれを書くのは、ちょっと退屈な作業になりそうですね。 色々と面倒に感じてきたかと思いますが、実は、親の要素（ここでは.container）に、ある値を一つだけ書いてあげるだけで解決します。 それは、「font-size: 0;」。 なぜ親要素なのかというと、inline-blockを設定した要素そのものが「文字」の特徴を持ち合わせているためです。   [PR] Webデザインで副業する方法とは実際に書いてみよう HTML <div class="container"> <div class="inline-contents">aaa </div> <div class="inline-contents">aaa<br>
CSS

JavaScriptでDOM操作で要素を削除する方法を現役エンジニアが解説【初心者向け】

JavaScriptのDOM操作で要素を削除する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次隙間が生じる例を見てみよう隙間が生じる主な原因と対処法実際に対処して隙間を消してみよう執筆してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptのDOM操作で要素を削除する方法について詳しく説明していくね！ 大石ゆかり お願いします！   ※DOMとはHTMLを操作する仕組みのことで、木の枝のような階層構造になっています。DOMの操作について、詳しくは解説記事「JavaScriptでDOMを操作する方法【初心者向け】」をご覧ください。   要素自身を削除する 呼び出した要素自身を削除するときは、removeメソッドを使います。 書式 削除する要素.remove(); 削除する要素自身から、removeメソッドを呼び出します。 removeメソッドで要素を削除すると、削除した要素内の他の子要素も含めてすべて削除されます。 クリックされた時の処理など、イベントを発生させた要素そのものを削除する場合は、受け取ったEventオブジェクトのtargetからremoveメソッドを呼び出せます。 他の要素を削除したいのであれば、「document.getElementById」などで取得します。 ※イベントとは、マウスのクリックやページの読み込みが完了したときなどの動作を指します。JavaScriptではイベントが発生したときに実行する関数を指定するために、各要素のonclick属性などに処理する関数を指定できます。onclick属性については解説記事「クリック時の処理！JavaScriptでonclickを使う方法【初心者向け】」をご覧ください。 ※Eventオブジェクトとは、イベントが発生したときの情報が収められているものです。イベントの発生源である要素などが取得できます。JavaScriptの関数にEventオブジェクトを渡すには、HTMLのonclick属性に「event」を引数として渡します。   サンプルコード クリックしたボタンそのものと、「パープル」の要素自身を削除するサンプルコードです。 ソースコード // 「このボタンを削除」 がクリックされた時の処理 function del_this(event) { //イベントの発生源の要素を削除 event.target.remove(); } // 「パープルを削除」 がクリックされた時の処理 function del_purple(){ //「パープル」の要素をIDから取得 const elem_purple = document.getElementById('purple'); //elem_purple（idがpurple）の要素自身を削除 elem_purple.remove(); } <p>レッド</p> <p id="purple">パープル</p> <p>グリーン</p> <p>ブルー</p> <button onclick="del_this(event)">このボタンを削除</button> <button onclick="del_purple()">パープルを削除</button> 実行結果 See the Pen js_remove_this by mentor-inoue-y (@mentor-inoue-y) on CodePen. 解説 クリックされた要素自身を削除 function del_this(event) { ～ } 「このボタンを削除」ボタンがクリックされたときに呼び出される関数を定義しています。 HTMLの「このボタンを削除」ボタン（button要素）にあるonclick属性に、「del_this(event)」と指定して関数が呼び出されるようにしています。 HTMLのonclick属性でeventを引数で渡すことにより、イベントを発生させた要素の情報を関数に送れます。 イベントを処理する関数 del_this(event)でeventを受け取って、クリックされた要素をevent.targetで取得できます。 event.target.remove(); event.targetはイベント（今回はクリック動作）の発生源の要素である「このボタンを削除」ボタンを指していて、removeメソッドにより要素自身を削除できます。   取得した要素自身を削除 function del_purple(){ ～ } 「パープルを削除」ボタンがクリックされたら呼び出される関数を定義しています。 HTMLの「パープルを削除」ボタン（button要素）にあるonclick属性に、「del_purple()」と指定して関数が呼び出されるようにしています。 const elem_purple =
JavaScript

HTMLで複数の画像を均等に横並びする方法を現役エンジニアが解説【初心者向け】

HTMLで複数の画像を均等に横並びする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 HTMLで複数の画像を表示する場合、特別なことをしないと縦に並んで表示されます。 しかし、実務では均等に横に並べて表示することのほうが多いです。 この記事を通じて、実務でも利用できるような、HTMLで複数の画像を均等に横並びする方法を学べます。 目次 画像を横並びにする方法 画像間の隙間を均等に保つ方法 ブラウザの横幅を変えても均等に保つ方法 複数の画像を均等に横並びしてみよう そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 複数の画像を均等に横並びする方法について詳しく説明していくね！ 大石ゆかり お願いします！   画像を横並びにする方法 横並びさせたい画像に対して、以下の3通りがあります。 displayプロパティにinline-blockを指定する方法 floatを使用する方法 dispalyプロパティにflexを指定する方法   displayプロパティにinline-blockを指定する方法 displayプロパティとは、表示する要素の調整を行うプロパティです。 要素によって指定された要素に対して適用するデザインの種類です。 displayプロパティにinline-blockを設定するためには、該当する要素に対して、次のようなCSSのコードを指定することで適用が可能です。 li { display: inline-block; }   もし、display: inline-block;を指定しない場合は、次のように縦に並んで表示されます。 １つめ ２つめ ３つめ   liに対して、display: inline-block;を指定することで、次のように横並びの表示が可能になります。 See the Pen inline-block by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen.   floatを使用する方法 float プロパティを利用することでも横並びが可能です。 float とは「浮かぶ」という意味の英単語です。 float プロパティを利用すると、ブロックレベル要素を左寄せや右寄せにできます。 li{ float:left; } float プロパティでは、leftを指定することで要素を右に回り込ませ、左寄せにできます。 また、rightを指定することで要素を左に回り込ませ、右寄せにすることができます。 ↑ 冗長   ブロックレベル要素とは次のような要素です。 h1,h2,h3,h4,h5,h6等の見出し div section article p ul, ol table   liに対して float:left;を指定することで、次の表示のように横並びの表示が可能になります。 See the Pen float by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen.   dispalyプロパティにflexを指定する方法 displayプロパティをflexにすることでも横並びの表示が可能です。 inline-blockで指定する際は、liに対して display: inline-block;を指定しました。 flexで指定する際は、ulに対して display: flex;を指定すると良いです。 親要素であるulをflexで指定することで、小要素であるliを横並びにできます。 ul{ display: flex; } ulを利用すると、liで箇条書き表示を行う際に、箇条書きの各行頭に●を表示することが可能です。 ulの他にもolを利用することが可能です。 olを利用してliで箇条書き表示を行う際に、箇条書きの各行頭に1.2.3.のような連番を表示できます。 See the Pen flex by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen. [PR] Webデザインで副業する方法とは画像間の隙間を均等に保つ方法 marginプロパティを使用することで隙間を作ることができますが、均等の隙間になる値を計算してから定義します。 marginプロパティは、borderと言う境界の外側の余白を意味します。 似たような余白で、paddingというものがあります。 paddingはborderの内側の余白で、marginはborderの外側の余白と覚えておくと良いですよ。   ブラウザの横幅を変えても均等に保つ方法 ブラウザの横幅を変更させても、隙間などの値を均等に保つために、相対的な値になる単位（%）を使用します。 ブラウザの横幅を変更させる方法としては、ショートカットキーを利用する方法があります。 例えば、Google Chromeというブラウザを利用する場合、以下のようなショートカットキーで表示を変更できます。 「Ctrl」＋「+」（Ctrlキーを押しながら+キーを押す）で拡大表示が可能です。 「Ctrl」＋「-」（Ctrlキーを押しながら-キーを押す）で縮小表示が可能です。 「Ctrl」＋「０」（Ctrlキーを押しながら数字の0キーを押す）で標準サイズの表示が可能です。     複数の画像を均等に横並びしてみよう 以下の例は、display:flex;とflex-wrap:wrap;を使用し、marginにて均等に隙間（余白）を維持する設定です。   HTML <!DOCTYPE html> <html> <head>
HTML

スマホ対応！CSSでメディアクエリの書き方【初心者向け】現役エンジニアが解説

今回はBootstrapなどを使わずにレスポンシブページを実現する方法であるメディアクエリについて説明します。 Webサイトを作る上でスマホ対応は当たり前になってきています。 メディアクエリとはメディアタイプやメディア特性によって表示を変えるレスポンシブデザインで利用する設定です。 レスポンシブデザインではスマホやタブレットやPCによって変わるメディアタイプやメディア特性に応じた最適な表示にするデザインを言います。 メディアクエリを理解することはレスポンシブデザインへの理解へとつながる基礎的な部分になります。 メディアクエリを理解することで、Web制作において様々な端末で最適な表示を可能にできます。 これからWebサイトを作る上では必ず必要になる知識なので、ぜひ今のうちに習得しましょう。 目次 動画で学ぶ！メディアクエリとは メディアクエリとは Web制作で推奨されているメディアタイプ メディア特性 メディアクエリの書き方 複雑なメディアクエリの組み合わせを実現する方法 実際に書いてみよう   田島悠介 今回はメディアクエリを利用する方法を解説しよう。 大石ゆかり 田島メンター！！メディアクエリというのは何ですか〜？ 田島悠介 スクリーンや印刷などのメディアタイプに加えて、さらに縦横の長さなどによるスタイルの適用範囲を決めることができるものなんだ。 大石ゆかり なるほど、いろいろな条件に対応して見え方を変えるという感じでしょうか？よろしくお願いします！ 動画で学ぶ！メディアクエリとは 今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。 [PR] Webデザインで副業する方法とはメディアクエリとは 今や、Webページを閲覧する際にレスポンシブデザインであることは当たり前になりつつあります。 メディアクエリはCSSを用いて、レスポンシブなWebページを作ることができます。 CSS3になってから登場した新しい表現なのでぜひ習得していきましょう。   メディアタイプの種類 メディアタイプ 対応デバイス all すべてのデバイス braille 点字用ディスプレイ embossed 点字用プリンター handheld モバイルデバイス print プリンター projection プロジェクター screen ディスプレイ speech 音声出力デバイス tty 固定幅フォントで出力するデバイス tv テレビ   なお、メディアクエリ4からは、screen, print, speech, all を除くすべてのメディアタイプを非推奨に指定されています。   Web制作で推奨されているメディアタイプ Web制作で推奨されているメディアタイプは以下の4つです。 all screen print speech について詳しく解説していきます。   all すべてのメディアタイプに適用されます。   コード例 @media all { p { color: green; } } 表示結果   解説 次のように@media allで宣言して{}内で指定のcssを記載すると適用されます。 allで適用すると結果的にすべてのメディアタイプで同じ処理になります。 今回はcolor: white;で色が緑色になります。   screen ディスプレイが存在するメディアタイプに適用されます。 PC、スマホ、タブレットはscreenです。   screenの動作 See the Pen medis by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen. 解説 screenのcolor:redという指定で文字が赤色で表示されています。   print 印刷用に適用されます。 印刷プレビュー画面で確認できます。   print表示結果 解説 screenのコードを印刷プレビューすると、青色になります。   speech 音声読み上げ機能の際に適用されます。 今回は、次のコードで「メディアタイプによる、色、処理の変化」音声出力した場合、「、」の部分で空白時間が発生し、自然な語り口になります。 @media speech { p { speak: literal-punctuation; } }   メディア特性 メディア特性名 メディア特性 any-hover マウスを該当要素の上に移動させた場合に処理をします。この移動をホバーと言います。 any-pointer ポインティングデバイスの性能に応じて表示するcssを変更できます。 aspect-ratio ビューポートの幅対高さのアスペクト比に応じて表示するcssを変更できます。 color 機器の表示色数性能に応じて表示するcssを変更できます。 color-gamut 機器の表示色域に応じて表示するcssを変更できます。 color-index 機器の色参照テーブルの項目数に応じて表示するcssを変更できます。 device-aspect-ratio 機器の幅対高さのアスペクト比に応じて表示するcssを変更できますが非推奨です。 device-height 機器のレンダリング面の高さを指定できますが、非推奨です。 device-width 機器のレンダリング面の幅を指定できますが、非推奨です。 display-mode cssのdisplay-modeで指定した内容に応じて表示するcssを変更できます。 forced-colors カラーパレットを制限している場合に応じて表示するcssを変更できます。メディアクエリ5以降の追加機能です。 grid 機器がグリッドとビットマップ画面のどちらを利用するか指定できます。 height ビューポートの高さを指定できます。 hover マウスホバーした際のcssを指定できます。 inverted-colors 色が反転している場合にcssを適用できますが、Safariのみ利用可能です。メディアクエリ5以降の追加機能です。 light-level 明るさに応じて表示するcssを変更できますが、メディアクエリ5以降の追加機能です。 monochrome 機器のモノクロ出力情報に応じて表示するcssを変更できます。 orientation ビューポートの向きに応じて表示するcssを変更できます。 overflow-block ブロック軸方向にあふれたコンテンツの扱いに応じて表示するcssを変更できます。 overflow-inline インライン軸方向にあふれたコンテンツがスクロールできるかに応じて表示するcssを変更できます。 pointer ポインティングデバイスの性能に応じて表示するcssを変更できます。ただし、 any-pointerのほうがより正確に処理できます。 prefers-color-scheme ユーザーが表示させたい明るさに応じて表示するcssを変更できます。メディアクエリ5以降の追加機能です。 prefers-contrast 隣接色のコントラスト量の増減に応じて表示するcssを変更できます。ただ、実験段階のため表示できるブラウザは存在しません。 prefers-reduced-motion ユーザーが表示上で動きを少なくしたい場合に適用できます。前庭運動障害をお持ちの方向けの設定です。メディアクエリ5以降の追加機能です。 prefers-reduced-transparency ユーザーが透明度を下げたいと希望している場合に適用できます。メディアクエリ5以降の追加機能です。 resolution 機器のピクセル解像度に応じて表示するcssを変更できます。 scan 機器のスキャン処理方式に応じて表示するcssを変更できます。 scripting JavaScriptなどのスクリプト利用に応じて表示するcssを変更できます。メディアクエリ5以降の追加機能です。 update コンテンツ表示更新頻度に応じて表示するcssを変更できます。 width ビューポートの幅に応じて表示するcssを変更できます。   メディアクエリの書き方 メディアクエリの書き方は以下の通りです。 link要素として指定する場合 スタイルシートに指定する場合 CSS内で@importする時に記述する CSS内で@mediaを記述する 詳しく解説していきます。   link要素として指定する場合 headerのlink要素でメディアクエリを指定する方法を解説します。 サンプルコード <link rel="stylesheet" href="./media.css" media="screen and (max-width: 780px)"> 解説 href=”./media.css”では、読み込むファイルのパスを、同じ階層にあるmedia.cssで指定しています。 media=”screen and (max-width: 780px)”では、メディアタイプの指定 and (メディア特性の指定)を行っています。 今回は表示デバイスの最大幅が780pxの場合適用されます。 つまり実際の表示の変化はmedia.cssの実装が適用されます。   CSS内で@importする時に記述する スタイルシート内に@importを利用してメディアクエリを適用する方法について解説します。 サンプルコード @import url('media.css') screen and (max-width: 780px); 解説 @importでインポートすることを宣言しています。 url(‘media.css’)でmedia.cssをインポートしています。 screen and (max-width: 780px)では、メディアタイプの指定 and (メディア特性の指定)を行っています。 今回は表示デバイスの最大幅が780pxの場合、media.cssが適用されます。 つまり実際の表示の変化はmedia.cssの実装が適用されます。   CSS内で@mediaを記述する スタイルシート内に@mediaを利用してメディアクエリを適用する方法について解説します。 サンプルコード @media screen and
CSS

デザインを実装する上で知っておきたい！9つの原理とは

本稿は、Smashing magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、UXディレクターでありデザイン本の執筆もしているTom Greever氏によって投稿されました。   先日、クライアントに向けたHTMLとCSSを使用してデザインを実装するための方法についての講習会で指導を行っていました。 そこでは、スタイルガイド駆動開発やOOCSS・SMACSSのような取り組み方、及びモジュール設計などの工程についての議論も行われました。最終日近く、ある人に「でも、どうやってそれが正しく行われていると判断したらいいんでしょうか？」という質問を受けました。 最初、私は混乱していました。それまで私は「正しく行う」ことだけを説明していましたが、その質問が何が主格の選択肢であるかを評価するためのより深いニーズに根ざしているのに気付きました。 例えば「他と共同して動作するクラスの数は最小限にする」というような特定のアドバイスは、モジュール性に関する幅広い認識がなければ役に立たないのです。 私たちの仕事がきちんとできているかを本当に知るために、デザイン実装の目安として使えるより高いレベルの原則が必要であると気付きました。 この溝を埋めるため、デザイン実装に関する9つの原則をまとめています。 CSSやコードを吟味するときの他にチームに志願している人への面接を行うときでも、これらの原理は特定の技術やデザインを実装する一般的な手段を超越した骨組みとして利用することができます。   1.構造化 文書はスタイルシート適用の有無に関わらず、意味があり論理的に書かれている。 2.効率的 デザイン実装に使われているマークアップとアセットは最小限である。 3.標準化 共通の規定があり、自由に使うことができる。 4.抽象化 ベースとなる要素は特定のコンテキストから切り離され、中心となるフレームワークを形成している。 5.モジュール化 共通して使える要素は、再利用ができるように分割されている。 6.設定が可能 ベースとなる要素を、任意のパラメータでカスタマイズできる。 7.拡張が可能 コードは簡単に拡張することができ、今後も追加されることが見込まれている。 8.文書化されている すべての要素は、それを使用して拡張できるように他の人に説明されている。 9.正確である 最終的なアウトプットは、予定された通りのデザインとして適切な表現がされている。   プロジェクトに各原則がどのように適用するかを確認するため、この記事の基準として私のプロジェクトのひとつのモックアップを使用します。 これは既存のECサイト中の、デイリーディールを宣伝する特別なランディングページです。スタイルの一部は既存のサイトから継承されますが、ほとんどの要素は新しいものであるということに注意してください。上記の原則を使って、この静止画像からHTMLとCSSを生成してみましょう。 この製品の「カード」レイアウトは、新しい要素です。   1.構造化 文書はスタイルシート適用の有無に関わらず、意味があり論理的に書かれている。 ここでの原則は、ドキュメント(HTML)の内容がスタイル(CSS)がなくても意味を持つということです。正しい見出しレベル(heading)や順序なしリスト(ul)などを設定し、<header>や<article>といった意味のあるタグを利用するということでもあります。 aria-labelやalt属性、その他のアクセシビリティに必要な可能性があるものをきちんと使用しましょう。 見た目的に変わらないアンカータグとボタンのどちらを使うかということは、大したことには思えないかもしれません。ですが視覚的に同じであっても、これらは違う意味を伝え違う動作を行います。セマンティックマークアップはその意味を検索エンジンや補助技術に伝え、他デバイスにおいての再利用もやりやすくします。それはプロジェクトの将来性に繋がります。   よく構造化された文書を作成するということは、セマンティックHTMLを書くことを学び、W3Cによる標準や他の専門家のベストプラクティスを習慣づけ、自分のコードが分かりやすくなるように時間をかけることです。 スタイルシートなしでブラウザで確認するのが、一番シンプルなHTMLのテスト方法になります。 そのHTMLはCSSがなくても使うことができるか 階層構造が一目で分かるかどうか HTML自体で意味を伝えることができるか しっかりした構造をもつ文書を作成するにはHTMLから始めるのがよいでしょう。ビジュアル的なスタイルを考える前に、構造とそれぞれの意味のためにプレーンなHTMLを書きます。divは避け、妥当なタグを考えます。この基本的なステップが、適切な構造を作るために役立つでしょう。 <section> <header> <h2>Daily Deals</h2> <strong>Sort</strong> <span class="caret"></span> <ul> <li><a href="#">by ending time</a></li> <li><a href="#">by price</a></li> <li><a href="#">by popularity</a></li> </ul> <hr />
Webデザイン

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSで画像の下に隙間ができる原因と消す方法を現役エンジニアが解説【初心者向け】