CSS

CSSでlist-style-typeを使って箇条書きを連番にする方法を現役デザイナーが解説【初心者向け】

初心者向けにCSSでlist-style-typeを使って箇条書きを連番にする方法について解説しています。連番の基本の書き方、list-style-typeの値による連番の種類の変更方法を説明します。色々な表記方法を試してみましょう。

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

CSSでlist-style-typeを使って箇条書きを連番にする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

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

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

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

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

list-style-typeを使って箇条書きを連番にする方法について詳しく説明していくね！

お願いします！

CSSでlist-style-typeを使って箇条書きを連番にする方法

CSSでlist-style-typeを使って箇条書きを連番にする方法を紹介します。箇条書きを連番にすることで、順序を持った情報としてGoogleのクリーラーが認識することができSEO効果を高められます。なので、CSSで記載する際にはその情報が順番を持っているのか、それともただの情報のまとまりかによって使い分けるようにしましょう。

htmlでマークアップしよう

まずは、連番にしたい要素をHTML内に記述します。
連番なので、ulではなく、olで記述しましょう。

<ol>
<li>ねずみ</li>
<li>うし</li>
<li>とら</li>
<li>うさぎ</li>
<li>たつ</li>
<li>へび</li>
<li>うま</li>
<li>ひつじ</li>
<li>さる</li>
<li>とり</li>
<li>いぬ</li>
<li>いのしし</li>
</ol>

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

CSSで連番を変えてみよう

基本値は、1.からはじまります。主に以下のバリエーションがあります。

変更できる値

lower-roman／小文字のローマ数字
upper-roman／大文字のローマ数字
lower-greek／小文字のギリシャ文字
decimal／算用数字
decimal-leading-zero／先頭に0をつけた算用数字
lower-latin／小文字のアルファベット
lower-alpha／小文字のアルファベット
upper-latin／大文字のアルファベット
upper-alpha／大文字のアルファベット
cjk-ideographic／漢数字
hiragana／ひらがなのあいうえお順
katakana／カタカナのアイウエオ順
hiragana-iroha／ひらがなのいろはにほへと順
katakana-iroha／カタカナのイロハニホヘト順
lower-greek／ギリシャ文字

（実はまだいくつかありますが割愛しています）

実際に書いてみよう！

See the Pen
連番リストの表示例 by Yuka Sato (@yuka-sato)
on CodePen.

書体と色はどうなるの？

連番リストにしてみた場合の、その連番の書体と文字色はフォントに準じます。ちょっと変わった場合にしてみたい！という場合はぜひ使い分けしてみてくださいね！

監修してくれたメンター

ゆかちん先生

フリーランスのクリエイティブディレクター。
制作会社、インハウス、スタートアップ企業などで、グラフィックデザイン・ウェブデザイン・アプリデザイン、ウェブディレクションなどに携わってきました。TechAcademyではWeb Designコース・ウェブディレクションコース・WordPressコースを担当しています。

内容分かりやすくて良かったです！

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

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

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

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

CSSスタイルでfloatされる範囲を現役エンジニアが解説【初心者向け】

CSSスタイルのfloatプロパティが適用される範囲について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

CSS

CSSのスタイルの優先順位とは【初心者向け】

CSSの記述場所は、次の3つの記述場所があります。 HTML上のstyleタグに記述する HTML上のタグのインラインに直接記述する CS...

CSS

CSSでiframe内の要素を上書きする方法を現役エンジニアが解説【初心者向け】

CSSでiframe内の要素を上書きする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

CSS

CSSの設計指針FLOCSSの導入方法を現役エンジニアが解説【初心者向け】

CSSの設計指針FLOCSSの導入方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそ...

CSS

CSSだけでマウスクリック時に画像が変わる方法を現役エンジニアが解説【初心者向け】

CSSだけでマウスクリック時に画像が変わる方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

CSS

CSSでposition: fixedを使うと文字が重なる原因と対処法を現役エンジニアが解説【初心者向け】

CSSでposition: fixedを使うと文字が重なる原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者...

CSS

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

strstr関数の使い方！PHPで文字列を検索する方法【初心者向け】

PHPで文字列の中から特定の文字列を探す場面というのは比較的多いかと思います。文字列を検索する方法はいろいろありますが、今回は「strstr関数」「strpos関数」「preg_match関数」について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 strstr・・・区切り文字の前後の文字列を取得します。 strpos・・・文字列が最初に見つかる位置を取得します。 preg_match・・・正規表現で文字列を検索します。すべての関数の使い方を覚える必要はありませんが、1つでも書き方を覚えておくといざという時に便利でしょう。目次CSSでlist-style-typeを使って箇条書きを連番にする方法htmlでマークアップしようCSSで連番を変えてみよう実際に書いてみよう！監修してくれたメンターそもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。大石ゆかり PHPで文字を探すプログラムを作りたいんですけど、どうすればいいんでしょうか。田島悠介どうして文字を探したいのかな？何かの文字で区切っているから？それとも文字の位置を探したい？大石ゆかりええと、文字を探す方法がそんなにいろいろあるんですか？田島悠介そうなんだ。PHPではいろんな文字列の検索方法があるよ。まずは、区切り文字で検索する方法から見てみよう！区切り文字で分けて検索 – strstr関数 strstr関数は対象の文字列から検索文字列を探し、見つかったら検索文字列から対象の文字列の最後までを返します。区切る文字列を境にして文字列を取得したいときに使えます。構文検索対象の一部分の文字列 = strstr(検索対象の文字列, 検索文字列, [検索文字列より前の部分を取得するか]) 第1引数は検索文字を探し出す対象の文字列です。第2引数は検索する文字列です。検索文字列が半角のアルファベットの場合は、大文字小文字を区別して検索されます。第3引数は省略でき、検索文字より前の部分を返したい場合にtrueを指定しますが、標準ではfalseつまり検索文字より後の部分を取得します。戻り値は検索文字列が検索対象の文字列から見つかったときに、検索文字列を含む文字から検索対象の文字列の最後までの文字列を返します。たとえば、「dog&cat」の文字列から「&」を検索した場合、「&cat」が戻り値として返ります。ただし第3引数にtrueが指定されている場合は、検索文字を含まない前の部分を返します。もし検索文字が見つからなかったときはfalseを返します。 ※ある文字列中に別の文字列が存在するかどうかを確認したいだけならstrpos関数またはstr_contains関数（PHPの新しいバージョン8で使用可能)を使います。 ※大文字小文字を区別しないで検索したい場合は「stristr関数」を使うことで実現できます。 strstr関数の使い方 strstr関数を使ってある文字列で区切った文字列の分割をしてみましょう。ソースコードフルネーム「山田太郎」を半角スペースで姓と名に分けて出力するプログラムです。 <?php //検索文字列（半角スペース） $search = ' '; //対象文字列（空白で区切られたフルネーム） $target = '山田太郎'; echo "対象文字列：$target<br>"; //名の取得（検索文字列の空白を含む後ろの文字） $firstName = strstr($target, $search); //空白を削除（「太郎」->「太郎」） $firstName = trim($firstName); //姓の取得（空白より前） $lastName = strstr($target, $search, true); //検索結果はあるか if($firstName != false || $lastName != false){ //姓名の出力 echo "姓：$lastName<br>"; echo "名：$firstName"; } else { echo "文字が見つかりませんでした。"; } ?> ※ダブルクォーテーションで変数を囲うと、“$変数名”で変数の値を展開して出力できます。変数の展開について詳しくは公式ドキュメント「変数のパース」をご覧ください。 ※本来なら出力したいWebページ内で<html>タグなどを含める必要がありますが、今回はPHPのプログラムの解説が目的なので省略しています。基本的なPHPの書き方について詳しくは解説記事「基本的なPHPの書き方」をご覧ください。表示結果解説 //名の取得（検索文字列の空白を含む後ろの文字） $firstName = strstr($target, $search); 検索対象の文字列（$target）から検索文字（$search）が見つかったところより後ろの文字列を取得します。検索対象の文字列

PHP

先頭にマーカーを表示させよう！CSSのlist-styleの使い方【初心者向け】

今回の記事では、CSSでマーカー（リストの先頭の記号や数字）を設定するlist-styleについて解説します。 HTMLのリストを利用する際に、先頭に●や■などの記号や数字を表示したい場合があるでしょう。そんな時はlist-styleを使って表示するのが最適です。 list-styleが分からない方やCSSを始めたばかりの方は参考になるでしょう。目次 list-styleとは list-styleの書き方実際にlist-styleを書いてみようまとめ【動画の解説はこちら！】田島悠介今回はlist-styleの使い方を練習してみよう。大石ゆかり田島メンター！！list-styleは何をするプロパティなんですか～？田島悠介リストの先頭に、記号やa,b,c～などのマーカーを追加するものだよ。アルファベットや数字は、自動で順番に表示してくれるようになっているんだ。大石ゆかりリスト項目のあるコンテンツの場合、必要になりそうですね。お願いします！ list-styleとは list-styleとは、マーカーを設定するプロパティです。マーカーは、リスト内の各項目の先頭に表示される●や■のような記号です。 ●や■のような記号の他に、数字やアルファベットなども指定できます。また、画像をリストマーカー（リスト項目の先頭記号）に使用することも可能です。 list-styleを指定しておくことで、自動で画像付きリストマーカーを先頭に表示できます。 [PR] Webデザインで副業する方法とはlist-styleの書き方リストマーカーの指定には”list-style-type”と”list-style-image”の2つのプロパティがあります。 list-style-type：記号やアルファベットなどをマーカーに表示する場合に指定します list-style-image：画像をマーカーに表示する場合に指定します list-style-type list-style-typeは以下で指定します。 list-style-type: 指定する記号の値; list-style-typeには●や■などの記号を連続して表示するものと、1,2,3…a,b,c…あ,い,う…のように特定の順番のものを連番で表示するものがあります。記号を使用する場合の例以下のコードを入力すると、■の記号が先頭に表示されます。 list-style-type: square; squareの部分にdiscと入力した場合は●、circleと入力した場合は○が表示されます。連番を使用する場合の例以下を入力した場合リストの最初から1,2,3…と順番に表示されます。 list-style-type: decimal; decimalの部分にlower-alphaと入力した場合はアルファベット小文字、hiraganaと入力した場合はひらがなが順番で表示されます。他にも漢数字やギリシア文字等での表記が可能です。表記の指定方法の詳細は以下のURLを参照してください。 list-style-type：MDN list-style-image list-style-imageは以下で指定します。 list-style-image : url("画像へのパス"); あらかじめマーカー用の画像ファイルをサーバーにアップロードしておき、画像へのパスを入力することでマーカーに指定します。画像のパスは絶対パス・相対パスどちらでも可です list-style-typeとlist-style-imageが同時に設定されていた場合、list-style-imageの方が優先されます田島悠介 list-styleの基本的な書き方になるよ。大石ゆかり list-style-typeは値によって、記号になったり順番になったりするんですね。田島悠介そしてlist-style-imageは画像を使う場合に使用するんだ。次はそれぞれの種類のマーカーを適用した場合の例を実際に見てみよう。実際にlist-styleを書いてみよう以下のリストにlist-styleを使用します。 (cssとhtmlファイルが同じディレクトリ内にあり、cssのファイル名が”list.css”である場合の例です) HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <link rel="stylesheet" href="list.css" type="text/css"> </head> <body> <ul class="list1"> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ul> </body> </html> list-style-type list-style-typeを利用して、リスト項目の先頭にリストマーカーを表示させます。記号の場合の例 list-style-typeでcircle（白い丸）を設定します。 list.css .list1 { list-style-type : circle; } 白い丸が表示されます。連番の場合の例 list-style-typeでlower-alpha（小文字アルファベットの連番）を設定します。 list.css .list1 {

CSS

誰でも簡単にできる！HTMLで文字の色を指定する方法【初心者向け】

文字や背景の色を指定するにはCSSを使用するのが一般的です。しかし、簡単な色設定だと、HTMLのみでも可能です。そこで今回はHTMLで色の指定をする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。目次CSSでlist-style-typeを使って箇条書きを連番にする方法htmlでマークアップしようCSSで連番を変えてみよう実際に書いてみよう！監修してくれたメンターそもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。なお、今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。 HTMLだけで文字の色を変える文字の色を変える方法は複数あります。今回は2通りの方法をご紹介します。 fontタグを使う方法 1つは、fontタグを使用する方法です。色を変えたい文字をfontタグで囲ってから、タグ内にcolor=”xxx”と記述します。 h1タグを使って、大きな文字で色の変更もできます。色はred, blue, green, brown など、好きな色を指定しましょう。 HTML <h1><font color="red">こんにちは！</font></h1> style指定をする方法もう1つは、style指定をする方法です。 CSSの記法で、HTMLタグに直接スタイルを適用できます。色を変えたい文字を囲っているタグに、style=”color : xxx”と記述します。囲うタグが特にない場合は、spanタグで囲いましょう。 HTML <h2 style="color:blue">こんにちは！</h2> <span style="color:brown">こんにちは！</span> <font>タグ利用方式とstyle属性指定方式の違いとメリットおすすめは、style属性を指定する方式です。それぞれの方式の違いを詳しくご説明します。 <font>タグを使う方式の特徴覚えやすくて簡単な方式です。文字フォント専用に、タグを用意する点が特徴です。しかし、これはCSSの利用が一般的になる前の方式で、現在は非推奨となっています。使う場合は、趣味のページや非公開ページに限定したほうが良いでしょう。 style属性を使う方式の特徴 CSSファイルを用意せずにHTMLだけでスタイルを変更する場合に、最良の方法です。 HTML構造に影響を与えずに、既存のタグの中に「style=”xxx”」と追記するだけで良いのも特徴です。また、HTMLを扱う場合はCSSを別途用意するのが本来のあり方なので、style属性を使いながらCSSに慣れることができるのも長所と言えるでしょう。実際に書いてみようそれでは実際にHTMLで色を変更してみましょう。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HelloTechAcademy</title> </head> <body> <p>Hello TechAcademy !</p> <h1><font color="red">こんにちは！</font></h1> <h2 style="color:blue">こんにちは！</h2> <p style="color:green">こんばんは！</p> <span style="color:brown">HTMLファイルだけで、</span>

HTML

スタイルシート（CSS）の基本的な書き方【初心者向け】

本記事ではCSS（カスケーディングスタイルシート）の基本的な書き方について初心者向けに解説します。目次CSSでlist-style-typeを使って箇条書きを連番にする方法htmlでマークアップしようCSSで連番を変えてみよう実際に書いてみよう！監修してくれたメンター【動画の解説はこちら】田島悠介今回はCSSの基本的な書き方について勉強していこう。大石ゆかり田島メンター！！CSSの構文ではどんなものを使うんですか〜？田島悠介まず覚えておきたいのが「セレクタ」「プロパティ」「値」の3つだね。これをおさえておけばだいたいのことはできるようになるよ。一番基本の形を見てみよう。大石ゆかりはい！ CSSでできること CSSは、HTMLで作成された文書に対して主に色や大きさなどの見た目の指定を行います。以下のようなHTML文書があるとします。CSSが適用されていない場合の状態です。 CSSをHTMLで読み込み、スタイルを適用すると画面ではこのようになります。背景色や文字の色が変更されたり、画像やボタン・文字列などが中央寄せになったり、ボタンにマウスカーソルを合わせるとアニメーションによって浮き上がったりします。このようなレイアウト・デザインに関する役割をCSSが行います。スタイルシートが必要な理由以前はHTMLのタグによってスタイルの指定も行われていました。文字の大きさと色をHTMLで変更した場合の例 <font size="20px" color="red">テキスト</font> 現行のHTML5では<font>(文字の大きさや種類、色を指定する)などのスタイルに関するタグは廃止され、CSSで指定するのが基本となっています。 HTMLが文書の内容、CSSが見た目というように役割をはっきり分けてサイトを構成していきます。同じ内容をHTMLとCSSで指定した場合の例 HTML <p>テキスト<p> CSS p{font-size:20px; color:red;} [PR] Webデザインで副業する方法とはCSSでまず最初に覚えておきたい3つの要素 Webページの見栄えを整えるにあたり、CSSでは次の3つの要素を用います。セレクタ – どのHTMLタグに対して見合えを調整するかプロパティ – どういった内容のデザインを施すか値 – プロパティはどの程度か簡単に言えば、「何に、どのように、どのくらい」デザインを施すかということを示します。説明だけではわかりにくいと思うので、実際にスタイルを作ってみましょう。たとえば、「h1タグ」に対して、文字の大きさを20ピクセルにしたいときは次のように設定します。ほかのタグに設定したいときも同様です。例）pタグ p {color: red; } 最初はややこしく感じるかもしれませが、一度覚えてしまえば簡単です。「:」や「;」を書き忘れないようにしましょう。田島悠介セレクタはスタイルの指定を行う範囲、プロパティは実行する内容、値は具体的な指定となるよ。大石ゆかりこの場合段落<p>のcolor、文字色をredの赤にするということですね。田島悠介そうだね。また、ひとつのセレクタに複数のプロパティを指定できるんだ。次の例を見てみよう。プロパティを複数指定したいときひとつのセレクタに対して、プロパティは複数指定することができます。たとえば、フォントサイズを20px・文字の色を青にしたいときには、 h1{font-size: 20px, color: blue;} のように書きます。また、コードには空白部分は無視されるという性質があるので、{ }で囲んだ設定を見やすく並列に並べてもいいでしょう。 h1{ font-size: 20px, color: blue; } プロパティの種類プロパティにはほかにも、文字幅の調整や背景色の指定など目的別にたくさんの種類があります。「CSS リファレンス」などで検索すれば、様々なサイトが出てくるのでいろいろ試してみましょう。下記の表は、CSSを書く上でよく使われるプロパティをまとめています。プロパティ自体は他にも多くありますが、紹介しているものは覚えておくと作業効率も上がるでしょう。プロパティ説明文 color 文字色を指定する background 背景の指定をする background-color 背景の色を指定する font-family フォントの種類を指定する font-weight フォントの太さを指定する line-height 行の高さを指定する text-align 行の揃え位置を指定する width 幅を指定する height 高さを指定する margin マージンの指定をする padding パディングの指定をする border ボーダーの色や太さを指定する position 要素の配置方法を指定する display 要素の表示形式を指定する float 左か右に寄せて配置する z-index 要素の重なりの順序を指定する実践〜スタイルを作ってみよう〜では実際に、プロパティを駆使して、簡単なスタイルを作ってみましょう。今回は、次のHTMLコードをもとに進めます。 <!DOCTYPE html> <html lang=“ja”> <head> <meta charset=“UFT-8”> <title>CSS</title> </head> <body> <h1>CSS入門</h1> <p>はじめてのCSS</p> </body> </html> ブラウザ画面ではこのように表示されます。これを、最終的に次のようなデザインにしたいと思います。スタイルを設定するやり方はいくつかありますが、ここでは、<head>の部分に書き込んでいく方法で進めていきます。まず、<head>のなかに、<style>を追加してください。このタグ内が、CSSとして認識されます。 <head> <meta charset=“UFT-8”>

CSS

スマホ対応！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

今さら聞けない！CSSとは【初心者向け】現役Webデザイナーが解説

CSSとは何かについて、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。「CSSが分からないけど今さら聞けないよな…」「CSSってなんで必要なんだろう…」「どうやってCSSを書いたらいいんだろう…」上記のような疑問や悩みを感じている方は、最後まで読んでいただければ「CSSとは何か」を理解できますのでぜひ参考にしてみてください。目次CSSでlist-style-typeを使って箇条書きを連番にする方法htmlでマークアップしようCSSで連番を変えてみよう実際に書いてみよう！監修してくれたメンターそもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。大石ゆかり田島メンター！！CSSは何を行うものなんですか～？田島悠介 CSSの役割はサイトの「見た目」を作ることだよ。音声による読み上げや印刷時に関する設定もできるけれど、一番多く使われる役割はWebページのデザインやレイアウトなど「見た目」に関する指定だね。大石ゆかり見た目というと文字や画像の大きさ、色などですか？田島悠介そうだね。実際のサイトで、CSSが適用されている場合とそうでない場合の違いを見てみよう。 CSSとは CSSとは「Cascading Style Sheets」の頭文字をとったものであり、スタイルシートとも呼ばれます。 HTMLは見出しやヘッダー情報などWebページの文書構造を形作るための言語です。対してCSS言語は、HTMLで作られた文書構造にデザインを加えて見栄えを整える役割を担っています。 WebページはHTMLとCSSが組み合わさって作られているのです。実際に、ブラウザでWebページを表示してみましょう。（ここでは、例としてテックアカデミーのWebサイトを開いています）上記のページはHTMLとCSSとの両方を使って作られています。画像が入っていたりリンク部分をボタンのように装飾したり、見栄えが良くなるようデザインされていますよね。試しに上記のページからCSSを除き、HTMLの文書構造のみを表示させてみましょう。かなり簡素なページになりましたね。たまにWebページの読み込みがうまくいかない場合など、このような画面が表示されたことがある人もいるのではないでしょうか。キレイに整ったデザインのWebページを表示するためには、HTMLにCSSを加える必要があるのが分かりますね。田島悠介 CSSを適用していない場合のサイトを見るとどうかな？大石ゆかり見出しと文字がただ順番に書かれただけになって、画像の位置や大きさもなんだか変わっちゃいましたね。田島悠介これらのレイアウトやデザインを指定しているのがCSSになるんだ。今見ているのは、HTMLだけで構成された状態の文書だね。大石ゆかり見やすいページを作るのに、CSSはとても大事なんですね。 CSSファイルの作り方 CSSファイルの作り方の手順をご紹介しましょう。ファイル名に拡張子の「.css」をつけることで、CSSファイルとしてコンピュータが認識してくれます。拡張子とは拡張子とは、ファイルの種類を分かりやすく判別するために使われる文字列です。みなさんも普段使うWordやExcelなども以下のような拡張子で表示されます。 Word：.docx Excel：.xlsx 文書：.pdf 画像ファイル：.jpeg CSSファイル作成の手順 CSSファイルの作成は以下の手順で行います。新規フォルダを作成作成したフォルダ名の最後に「.css」と書く練習でCSSファイルを作成する場合は「test.css」や「style.css」など、分かりやすい名前を付けてあげましょう。実際に以下の画像のように「.css」のファイルを作成してみます。上記のように簡単にCSSファイルが作成できますので、実際に手を動かしてみて作成してみましょう。 [PR] Webデザインで副業する方法とはCSSを実際に書く方法先ほど作成した「style.css」ファイルを使って、実際にCSSを書いてみましょう。まずは、HTMLファイルを用意します。 CSSをHTMLファイルに読み込ませるために、<head>と</head>で囲まれた部分に <link rel="stylesheet" href="style.css"> といった一文を以下の画像のように入れます。 <link rel="stylesheet" href="style.css">を書くことで、HTMLに「style.css」ファイルがリンクされ、CSSの指定をHTMLでも読み込んでくれるようになります。では実際に、以下のような緑色の背景に白色で「TechAcademy」という文字を表示させるCSSの指定を書いてみましょう。編集は以下の手順で行います。 HTMLファイルを編集 CSSファイルを編集では、順番に見ていきましょう。 HTMLファイルの編集まずはHTMLファイルの編集です。 <body>と</body>で囲まれた部分に表示させたい文章を書いていきましょう。コードを書く際、CSSを適用させる場所を分かりやすくするため、緑色の背景を表示させるための「main」という枠と、文字を表示させる「text」という枠を用意します。完成されたページで見ると、以下のように分けています。用意した枠にそれぞれ「クラス名」を設定してあげます。クラス名とは「class=”○○”」というように表記されたCSSを適用させるためのタグのことです。今回はbodyタグ内に、「main」と「text」のクラス名をそれぞれ以下のように記述します。（HTMLの記述に自信がない方は「HTMLとは」という記事も合わせてお読みください。）以上でHTMLの編集は終了です。 CSSファイルの編集続いて、CSSファイルの編集です。 HTMLの編集で全体を囲む「main」クラスと、文字を表示させる「text」クラスを用意しましたね。それぞれのクラスに幅や配色などのデザインを「style.css」に指定していきましょう。今回は背景と文字のデザインを以下のように指定しましょう。背景色：緑高さ：200px 幅：100％テキストの位置：センターフォントサイズ：36px テキストの色：白上記の内容を「style.css」に以下のように記述していきます。 CSSファイル内では、クラス名の名前の前に「.」を付けて表現するのが決まりですので覚えておきましょう。上記のようにCSSを指定すると以下のようなページが表示されます。はじめはCSSの記述と完成イメージがうまく結びつかず、思うようにレイアウトやデザインが出来ない場合も多々あるでしょう。しかし、繰り返し練習していくと慣れていきますので何度も試しながら学習していきましょう。執筆してくれたメンターノマリカ印刷会社の校閲部門に半年、DTPオペレータとして4年間経験を積んだ後、Web制作会社にて8年間デザイナーとして従事。現在は住宅メーカーに勤務しながら社内のSE及びWeb担当として従事しています。田島悠介 CSSに関する基本的な構造だよ。大石ゆかり「main」の部分、「text」の部分それぞれに色や大きさの指定をしているんですね。田島悠介この「.main」「.text」のようなスタイルを適用させる範囲の指定を「セレクタ」というんだ。まずはこれを覚えておこう。大石ゆかり頭に入れておきます。ありがとうございました！ CSSを実際に書いてみたい場合は、CSSの書き方の記事も合わせてお読みください。また「HTMLとは」という記事も読んでおくと、よりHTMLの理解も深まりますのでおすすめですよ。 CSSを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたい CSSを学習していて、このように思ったことはありませんか？テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

CSS

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

CSSでlist-style-typeを使って箇条書きを連番にする方法を現役デザイナーが解説【初心者向け】

CSSでlist-style-typeを使って箇条書きを連番にする方法

htmlでマークアップしよう