今回の記事はHTML5についてご紹介します。そもそもHTML5

とはどんなものなのか理解しきれていない人がいるのではない

しょうか。HTML5の基本となる考え方についてご紹介し、新しく

追加されたタグやアウトラインついてもご紹介していきます。

HTML5とは

HTMLをコーディングしていく際に必ず必要なDOCTYPE宣言というものがあります。

上に記載されているのがHTML5のようのDOCTYPE宣言になります。

この一行をHTMLに書くことによって『このファイルはHTML5でコー

ディングしてきます』といった意味になります。このHTML5というのは、

HTMLのバージョンだと思って下さい。HTMLというのは数字によって

バージョンに分けられています。HTMLのバージョンによって何が違うか

というと大きな違いは使えるタグと属性が異なります。

HTML5の特徴

アウトライン

HTML5で追加されているタグを使ってコーディングをしていく際に意識してほしいのが

アウトラインという考え方になります。サンプルをご覧下さい。

上の文章は猫の体に関する文章があったとします。この文章は長くないので読者にとっても

読めるものだと思いますがよりわかりやすく読者が読みやすいようにするにはアウトライン

が必要になります。

・アウトラインの考え方

見出しをつけてわかりやすく小分けにすることをアウトラインと言います。このように猫の体に

関する文章に対して情報に構造を持たせる事で読書はより読みやすくなります。これはHTMLの

見出しのタグをつけて以下のようになります。

このように話の構造によってわかりやすくするために見出し

を使ってグループ化していく作業をアウトラインと言います。

見出しのレベルだけで話の構造を表すのは、コーディングをしていく

うちに不可能になってきます。ここでアウトラインをわざと明示する

ためのsectionタグというものがあります。見出しをつけた際には、

必ず各見出しにsectionタグで囲むようにしましょう。そうする事で

機械にアウトラインが伝わるようになります。Webサイトに掲載する

文章というのは、アウトラインを持っている方が読書に伝わりやすく

なるので意識して作るようにしましょう。

アウトラインを明示するタグ

HTML5で追加された新たなタグになります。

HTML5.1

HTML5を学んだところですでにHTML5.1が出てきています。2016年11月には

HTML5からHTML5.1にバージョンアップしています。そんなに大きな変化は

ありませんのでご安心して下さい。ひとつだけ便利な要素が追加されている

のでご紹介します。

picture要素が新しく追加されました。画像に対する複数のソース追加するための

コンテナーの役割を果たします。レスポンシブデザインの記事を読んでくれた人は

わかると思いますが、source media属性を使って画面幅の最小値と最大値といった

レスポンシブの設定がHTMLのタグだけでできます。

まとめ

HTML5の基本について学びましが、HTMLは頻度良くバージョンがアップします。

大きな変化はありませんがHTML5.1が出ているのが現状です。HTMLをコーディン

グしていくうえで便利なタグが出てきています。機械にわかりやすく伝えるための

コーディングになっているのでぜひ積極的に使っていきましょう。

また最近のWebページでは、ほとんどがHTML5でコーディングされているのでHTML5

でどのようにアウトラインが明示されているのかいろんなWebページをチェックすると良いです。

The post HTML5から新たなに出た便利なタグ first appeared on ネット書店Blog.

Copyright © 2026 ネット書店Blog All Rights Reserved.

レスポンシブWebデザインについてやっていきます。レスポンシブWebデザインは

Webページを制作する上で必要不可欠な存在です。HTMLで文章に印をつけていき

CSSでレイアウトや装飾をしていくことは基本的な技術となります。デバイスによって

Webページのデザインを変更していくやり方をレスポンシブWebデザインと言います。

もちろんスマートフォンで見る画面幅とPCで見る画面幅ではサイズが異なるのは当然なこ

とです。例えばスマートフォンで見た時は、ナビゲーションの部分がハンバーガーメニュー

で表示されていたり、PCで見た時はナビゲーションが横列や縦列に表示されているといった

表示形式の違いを実装するのがレスポンシブWebデザインの役割となります。

レスポンシブWebデザインができてからデバイス対応が簡単になった

レスポンシブWebデザインが出る前はデバイスごとの切替といったやり方でした。ひとつの

HTMLファイルに対して見るデバイスに応じてCSSファイルを複数用意して実装していたと

いうことです。ここ数年で様々な種類のデバイスが出てきてタブレットやいろんな大きさの

スマートフォンといった形が出てきているのでレスポンシブWebデザインは画面幅が異なって

もそれに対して調整を行なっていく事ができる大事なポイントとなってきます。

・HTMLはワンソース（ひとつのHTMLファイル）

・CSSで画面幅に応じてブレイクポイントを指定して表示形式を変える

CSSを書く際に肝となるメディアクエリとブレイクポイント

メディアクエリとは

@mediaから始まる部分のことをメディアクエリと呼びます。

max-width （その幅以下の場合）　or 　min-width（その幅以上の場合）

※注意：maxはそれ以上ではなく、それ以下場合という意味。

　　　　minはそれ以下ではなく、それ以上の場合という意味。

意外と理解に苦しむところなので注意しましょう。

ブレイクポイントとは

画面幅の切替を決めるpxの部分をブレイクポイントと呼びます。

検証ツールを利用していろいろなサイトのブレイクポイントを見るようにしましょう。

よく使われるCSSのテクニック

画面幅に応じて写真を縮尺させたいとき

max-width=最大幅という意味になります。これは画面幅に応じて画像を名一杯表示させる

という意味にです。画面が拡大・縮小しても画像を画面幅に応じて表示させるということ

です。これを設定しないと画面幅から画像がはみ出てしまったり、横スクロールがおきて

しまうので忘れず記述するようにしましょう。

height=高さをautoとすることで高さも画面幅に応じて画像が名一杯表示してくれます。

画面の最大幅を設定したい時

#containerという画面の大枠の部分を指定したいときに#containerを記述します。

上記の記述は、画面幅が800pxを超えた場合、Webページのコンテンツ内容はそれ

以上広がることなく中央寄せで表示されるという意味になります。

レスポンシブレイアウトの種類

もともと綺麗に横並びにするやり方は、floatしかありませんでした。レスポンシブ

Webデザインが台頭してきて複雑なレイアウトを行いたいときにレイアウトを作る

のが大変でした。そこで出てきたのでFlexboxとCSS Gridになります。

これは、レイアウトの見栄えを簡単に実現するために作られたものになります。

Flexbox

Flexboxには大きく分けて2つの要素があります。

まずひとつめが親要素となるFlexboxコンテナーです。大枠の緑色の部分を指します。

ふたつめにその中にある子要素Flexboxアイテムです。イメージは大枠の部分である

Flexboxコンテナーを指定してFlexboxアイテムが動くという形になります。floatの

レイアウトに比べるとソースコードが少なく簡単に実装することができます。

CSS Grid

CSS GridはFlexboxと同様に親要素となるGridコンテナーと子要素となるGrid

アイテムがあります。CSS Gridはまずラインというものを引きます。これは格子状の

もので区切られセルというものができます。CSS Gridの良いところは好きなところに

好きな子要素のGridアイテムを配置できるということになります。基本的Flexboxを

利用するWebサイトが多くてCSS Gridは新しいレイアウトの手法となり、これから

レイアウトを整えていく中で主流になっていくのでぜひ覚えてください。

まとめ

レスポンシブWebデザインは、Webページをデザインするうえで絶対に必要なスキル

となります。現代では、PCよりも調べごとをするときはスマートフォンが主流に

なっていますのでPC用表示形式、スマートフォン用表示形式といったデザインが

できるようにしましょう。モバイルファーストでデザインしていく方法も別記事で

解説しているので目を通して見てください。

またその綺麗なレイアウトの簡単な整え方も出ているので実装しながら見つけると

CSSでひとつうえのデザインが実現できるようになります。

The post レスポンシブWebデザインでよく使われるCSSテクニック first appeared on ネット書店Blog.

Copyright © 2026 ネット書店Blog All Rights Reserved.

今日は、セレクタの優先度についてやっていきます。

セレクタには詳細度というものがありこれまでCSSを記述する

際にセレクタ、プロパティ、値といった記述の仕方を解説してきました。

この記事からはワンステップレベルアップしてセレクタが反映される優先度についてやっ

ていきます。HTMLとCSSの組み合わせを見ながらセレクタの優先度に慣れていきましょう。

HTMLとCSS見て何が適用されるのか

左側に記述されているのがHTML、右側に記述されているのがCSSとなります。

右側のCSSを見ていただくとどちらのCSSが適用されるのか分かりますでしょうか。

結論②が適用されます。左側のHTMLを見ていただくとdivの中にp要素が存在します。

CSSが適用される形として後に記述されたCSSが適用されるというのが基本としてあります。

ここでbodyタグが存在しています。HTMLのほうにはbodyタグが存在していませんが、HTML

をコーディングしていく際にbodyタグは必須項目となります。セレクタの記述がdivとbodyの

場合、どちらもHTMLタグであり影響力が同じであるため、後に記述されているカラー緑が

適用されることになります。

次は先程のものと比べて非常に複雑なHTMLとCSSになっていますが整理しな

がら解説していきます。まず左側のHTMLは全体は、<div id=”content”>が大枠で

囲まれています。その中の下には、<div class=”today”>があり囲まれています。

またその中には、p要素がありem要素が存在します。左側のCSSをご覧いただくと、

①〜③までCSSが記述されています。強調箇所となっているHTMLで記述されている

em要素のコーヒーと紅茶の文字色はどれが適用されるのか分かりますでしょうか。

結果として①が適用されます。なぜかと言いますとセレクタには詳細度といった

ものが設定されています。左側をご覧いただくとidセレクタは100点を持っています。

セレクタの中で非常に強い力を持っています。classセレクタは10点、タイプセレクタは

1点といったところになります。①のCSSのセレクタの指定は、idセレクタ、classセレクタ

タイプセレクタ全てを兼ね備えているので結果的に1番大きな数値を保持しているので①が

CSSとして適用されることになります。

このようにCSSに慣れてきてややこしいCSSが増えてくると『なんで正しくセレクタ、

プロパティ、値を指定しているのに適用されないのか』といったことも出てきます。セレクタ

の詳細度に原因があることがよくありますので覚えておきましょう。

擬似クラス・擬似要素

擬似クラス

HTMLで記述したa要素で指定しているリンク先についての要素名になります。

上の表をご覧ください。未訪問リンクは言葉通り訪問したことがないリンク先の

文字色を指定する場合にセレクタで指定した後付けでlinkと記述します。訪問済リンク

もリンク先を訪問した後に文字色をつけたい時にvisitedを記述して訪問後の文字色を指定します。

ダイナミック擬似クラス

またユーザーがパソコンを操作した際に特定のアクションを指定できリンクの

文字色を指定できるダイナミック擬似クラスがあります。リンクにカーソルが

乗った際に文字色を指定できるhover擬似クラス、クリック中の文字色を指定

できるactive、linkにフォーカスが当たった際に文字色を指定できるfocusがあります。

擬似要素

beforeの場合：contentプロパティを使って見出しや段落などの前に指定した　　　　値を挿入する事ができます。

afterの場合：contentプロパティを使って見出しや段落などの後に指定した値を挿入する事ができます。

先程紹介した擬似クラス・擬似要素を加えたセレクタの詳細度になります。

それぞれのポイントをご確認ください。また一番上にはHTMLのstyle属性が1000

ポイントとなっています。これはHTMLのファイルの中にstyleタグで囲んでCSSを

記述した際のポイントとなります。画像をご覧いただくと１番ポイントが高く反映

されやすいので強い力を持っているということになります。

まとめ

CSSをシンプルに記述して装飾・レイアウトを完結できることが1番良いですが

レベルが上がっていくと複雑なコーディングになってきます。複雑なコーディング

を理解してセレクタを指定するには、詳細度を理解して置く必要があります。

レベルが高いCSSをコーディングしていくためにセレクタの詳細度を理解

しましょう！

The post セレクタの詳細度がわかればCSSは誰でも簡単 first appeared on ネット書店Blog.

Copyright © 2026 ネット書店Blog All Rights Reserved.

Webページを制作したもののアクセスされないWebページを作っても意味がなく

なってしまいます。たくさんの人が等しくWebページにアクセスできるようにする

ためのアクセシビリティを意識するべきです。アクセス数を増やすことで検索エン

ジンの上位に表示されるようなるのでWebページを作る際には、意識しましょう！

障害者差別解消法

日本で制定されている障害者の有無によって差別を解消を推進するものになります。

この詳細を見るとWebページについて障害者に対するような記載を書かれていませ

んが日本の現代の流れとして障害持った方にも分け隔てがなくなるような物の実現を

するために今後にWeb業界にとっては、大切なことになります。

実際にどんなことに気を付けるべきなのか

・JIS規格

みなさんもご存知かと思いますが工業製品につくJIS規格になります。上記の

画像を読んで頂けると設けられている規格があります。その規格を達成すると

規格が与えらえるという事がJIS規格の流れです。これがWebサイトのアクセス

のしやすさも設けられていて達成すると規格が与えられるということになります。

規格番号である『X 8341ー3』を検索欄に入力していただきますとチェックポイント

がいくつか出てきますのでチェックポイントに配慮したWebページを作成でき

るようにしましょう。

ガイドライン（W3C）

このJIS規格の元になっているもの『W3C』というものになり、HTMLやCSSを

定義しているものになります。『W3C』を検索して頂くとアクセシビリティに

ついてのガイドラインが制定されていますので1度目を通してみて下さい。

このW3Cのなかにどんな事が書かれているのかチェックしていきます。

色に関する便利なチェックツールをを利用したい人は上のボタンからチェックして下さい！

tabindex属性についてですがリストの項目が3項目あります。それぞれtabindexという属性を用いて順番を振っています。なのでフォーカス時にtabindexで順番が振られている通りにフォーカスが動くのです。

ガイドラインの最後の特徴になります。エラー箇所の特定です。

何かの会員登録をする際に名前、居住地、銀行口座などの登録をします。

その際に入力漏れ、入力ミスを防ぐために入力エラーが発見された場合は

エラー箇所を特定するアクセシビリティが要求されます。

アクセシビリティとは

多くのユーザーがより多くの場面でより多くのデバイスから利用できるようにすること

です。さまざまなデバイスを利用して閲覧環境があります。特にスマートフォンが出て

からは、持ち歩く事が基本なので日光の中画面を閲覧したり、寝る前の暗い中で画面を

閲覧することは日常です。他人事ではなく、アクセシビリティを見直していく必要があります。

The post 誰もがアクセスできるようなアクセシビリティ意識 first appeared on ネット書店Blog.

Copyright © 2026 ネット書店Blog All Rights Reserved.

今回の記事は、CSSのカラーコードについて解説していきます。CSSはWebページを

装飾するものなので色の指定や文字の大きさレイアウトの大きさは必須になってきます。

HTMLだけだとただ文字が並べられているだけであり、なんだか寂しいWebページに

なってしまいます。そこで今回は、CSSの主軸といえるレイアウトや色のついてやって

いきましょう。素敵なデザインを作れるようになり、CSSの主軸を理解してもらえます。

16進数の色の指定方法

CSSで色を指定する際に色の名前を使ってシンプルに装飾をする事ができますが、色の

名前だけだと限られた色でしか表すことができません。実際にWebの世界で色が表現で

きる数は1,600万色以上あります。その数の色の指定をする場合は名前だけの色では

不可能なのでカラーコードを使って指定していきます。

＃の後に続けてR（Red)、G（Green)、B（Blue）の順番に16進数を使っていきます。

私たちの生活の中で馴染みがない数え方になりますが、仕組みを理解していきましょう。

下記の画像をご覧ください。

16進数の特徴は、色の指定をする際に00から始まり、09までいくと0aに切り替わります。

16進数の場合は、16個目で位が上がるので16個目である0fから10に切り替わる順番になっ

ています。1番小さいのが00であり、1番大きいのがffになります。これを全部数えると256

通りあることになります。256段階の数があるということになります。書き方としましては、

＃の後にまずは赤色の分量で次に緑色でその後に青色で指定します。微妙に違う色を指定

したい時は、16真数を使うと良いでしょう！

10真数の色の指定方法

別のやり方のカラーコードの指定ですが、RGBaカラーコードというやり方がやります。

これは馴染みのある10進数のやり方になります。こちらの方がどちらかというとわかり

やすいと思います。

10進数の場合は、0〜255の数字の指定となります。画像記載を見ていただくと0が1番小さ

な数字であり、255が大きい数字になります。16進数と違うところは最後に0.5と記述されて

いるところになります。最後の部分は透明度の指定になります。0.5と記述されている場合は、

その指定した透明度を表すので0,5と記述した場合は、半透明という形になります。透明度まで

カラーコードに加えることができるのが10進数の特徴となります。

大きさを表す単位

大きさを表す数値について見ていきます。大きさを表す単位は文字の大きさであったり

ボックスの大きさの指定などがあり色々な場面で単位は使われます。

px（ピクセル）

まずよく使われている数値pxという値になります。見ているデバイスによって幅を指定する

事ができます。ピクセルというのは、場面の中の最小の点を1つ1つピクセルと言います。

10pxといったら画面を構成している10個分、100pxといったら100個分といったことになります。

これは文字の大きさも使われますし、ボックスの大きさにも使われます。注意点としては、見て

いるデバイスによって点々の大きさによってでサイズも変わってきます。なので決して決まって

いるものではありません。

％（パーセント）

パーセントですが文字の大きさであったりボックスの大きさの値に使われます。文字の場合だと

現状の文字サイズの何％かという割合になります。ボックスに対しては、指定した要素の親要素に

対して何パーセントなのかという計算がされることになります。

em（イーエム）

記述している文字サイズを1とした時にその何倍かを相対的に表すための単位です。1emと記述した

場合には1文字分といった意味です。よく使われているケースとしては、文と文の間を少し空けて表現

したい時に使われる事が多いです。指定された文字サイズの基準となります。

rem（アールイーエム）

remはルートに指定された文字サイズが基準となります。通常Webブラウザ（Internet Explorer、

Google Chome）は16pxで文字サイズが設定されています。16px＝1remだとしたら32px＝2remと

いったことになります。

前に記載した『私が教わってマスターしたCSSの基本【無料公開】』と合わせて読んでいただくと

より実践しやすく学習できます！

CSSでよく使われる色の指定と数値についてみていきました。このカラーコードを

全て覚えろというのは非常に困難です。全て覚えるように効率の悪いやり方はしないで

ネット上で調べればがすぐに出てきますので色の指定したい時は調べるのが早いです。

大きさの単位は、Webページをデザインしていくうえでチェックしながら試していきま

しょう！記述しながら実感していくことが大切です。ぜひ実践していき感覚を掴んでください！

The post カラーコードと大きさを表す単位 first appeared on ネット書店Blog.

Copyright © 2026 ネット書店Blog All Rights Reserved.

前回のCSSの基本に引き続き今回はCSSのセレクタの使い方について解説していきます。

前回は基本中の基本であるCSSのコーディングの仕方についてやっていきましたが、今回は

前回に比べて少しだけ難易度が上がるセレクタの組み合わせ方についてやっていきます。

結論CSSをコーディングしていくうえで必須になっていきますのでしっかりと理解して

スキルに変えていきましょう！

セレクタの種類

子孫セレクタ（組み合わせ方）

セレクタの組み合わせについてですが前回ご紹介したセレクタは、単体での扱いになります。

全ての要素に名前をつけてコーディングしていくと膨大な数になってしまいます。多くてなにが

なんだかわからなくなってしまいますのでセレクタの組み合わせ方を覚えてください。最もよく

使われる組み合わせとなるのが子孫セレクタです。下のCSSの欄にご注目下さい。赤色で四角位

のがはさまれています。これは半角スペースだと思って下さい。CSSを解説しますとp要素に含ま

れるimg要素という意味になります。HTML欄をみてみると2つ目の文章はaタグが挟まれていますが、

どちらとも結果的にはp要素の中に含まれるimg要素という形なので変わりないので両方適用されます。

複数セレクタ

次に複数セレクタという組み合わせ方になります。CSSを見て頂くと、h1,pと

記述されています。複数のセレクタに対して記述したものが適用されます。h1,pと

記述した場合にその両方を一気に文字色を黒にスタイル変更することができます。

セレクタはh1とpなのでどちらにも適用されるということになります。なのでカンマを

つけることによって複数のセレクタを指定して適用させることができます。こちらは

CSSをたくさんコーディングしていくうちに同じ内容を適用させたい場合が出てきます

のでわかりやすくするために使用します。

子供セレクタ（組み合わせ方）

次に子供セレクタです。CSSのコードを見ていただくとp>imgと記述されています。最初に

紹介した子孫セレクタに少し似ているのですが、スペースではなく、大なり記号となります。

大なり記号を使った場合には、p要素の直接の子要素であるimgということになります。

HTMLを見ていただくとp要素の中にあるimg要素が2つ存在するのですが、1つ目はp要素の

直下にあるimg要素になり、2つ目はaタグが挟まっているimg要素になりますので適用され

るのは、1つ目のp要素の直下にあるimg要素という意味になります。

兄弟セレクタ（組み合わせ方）

最後に兄弟セレクタになります。CSSを見ていただくとh1+pと記述されています。h1+pの

意味合いは、h1と隣合わせであるp要素という意味になります。左のHTMLのコードを見て

頂いた時にp要素が2つ存在しますがh1と隣合わせになっているのは、『営業時間は10:00~

19:00です。』といった文言になります。なのでCSSが適用されるのは、隣合わせとなって

いる1つ目のp要素のみとなります。

まとめ

前回に引き続きCSSのセレクタについてご紹介してきました。CSSは単体で記述させたり

属性を使って適用させるのはもちろんのことです。しかし、そればかりでは、膨大な数に

なりコーディングしていくうちに整理がつかずわからなくなってきてしまいます。なので

この記事でご紹介したセレクタの組み合わせ方を利用することによって整理できてコード

が見えやすくなります。前回の記事で基本中のセレクタについて解説しているので合わせて

読んで頂くとよりわかりやすいので下記から読んでみて下さい。このような内容は、私が

独学で学習した内容とプログラミングスクールで培った発信内容になります。もっとWeb

デザインにおいて必要なCSSとHTMLを徹底的に知りたい方は教えてくれる人がいる環境に

身を置くことをおすすめします。ぜひチャレンジしてみて下さい！

The post CSSのコードぐちゃぐちゃにしない書き方【無料公開】 first appeared on ネット書店Blog.

Copyright © 2026 ネット書店Blog All Rights Reserved.