TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS HTML+CSSでul、ol、liタグを使った箇条書きの装飾の仕方を現役デザイナーが解説【初心者向け】
icon
icon
CSS

HTML+CSSでul、ol、liタグを使った箇条書きの装飾の仕方を現役デザイナーが解説【初心者向け】

初心者向けにHTML+CSSでul、ol、liタグを使った箇条書きの装飾の仕方について解説しています。箇条書きにはliタグとulタグ(順番なし)、olタグ(順番あり)を使用します。それぞれの箇条書きの種類と書き方、活用例について見ていきましょう。

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

HTML+CSSでul、ol、liタグを使った箇条書きの装飾の仕方について解説します。

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

ul、ol、liタグを使った箇条書きの装飾の仕方について詳しく説明していくね！

大石ゆかり

お願いします！

 

ul、ol、liタグを使った箇条書き

HTMLで箇条書きを行うには ul、ol、liタグを使用します。

 

ulタグ

ulタグは順番を定めない箇条書きの場合に使用します。ulは「unordered list」の略です。箇条書きの要素にはliタグを使用します。

<ul>
  <li>まぐろ</li>
  <li>はまち</li>
  <li>あなご</li>
</ul>

実行結果は以下のようになります。

 

olタグ

olタグは順番がある箇条書きの場合に使用します。olは「ordered list」の略です。こちらも箇条書きの要素にはliタグを使用します。

<ol>
  <li>たまご</li>
  <li>いくら</li>
  <li>サラダ</li>
</ol>

実行結果は以下のようになります。

ul 、 ol について、詳しくは以下も参考にしてください。

<ul>:順序なしリスト

<ol>:順序付きリスト

 

ul、ol、liタグが必要な理由

ulやolは箇条書き（・）や番号振りでもいいのではと考える人もいるでしょう。ではなぜul、ol、liタグを利用しているのでしょうか。それはサイト構造をGoogleのクローラーに正しく伝え、サイト評価を上げSEO効果をあげるためです。

ul、ol、liタグを使うことで、それらを1つのまとまりとして評価することができますので、メニューやサービス作成時に使うと、クローラーが正しく理解することができます。

 

[PR] Webデザインで副業する学習方法を動画で公開中

ul、olを好みの画像に置き換える方法

ul、olのマーカーを好みの画像に置き換えるには line-style プロパティを使用します。

ul {
  list-style: url(icon.png);
}

urlには画像ファイル名を指定します。line-style について、詳しくは以下も参考にしてください。

MDN line-style

 

CSSで装飾を変えてみよう

今回のサンプルプログラムでは、 line-style とCSSを組合せて箇条書きの見た目を設定しています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>sample</title>
  <style>
    ul {
      margin-left: 32px;
      padding: 16px 16px 16px 64px;
      list-style-image: url(icon.png);
      background-color: #669933;
      border-style: solid;
      border-width: 2px;
      border-color: #336600;
    }

    li {
      color: white;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <ul>
    <li>まぐろ</li>
    <li>はまち</li>
    <li>あなご</li>
  </ul>
</body>
</html>

実行結果は以下のようになります。背景画像や枠線などを組み合わせることで多彩な表現が可能です。いろいろと試してみましょう。

 

監修してくれたメンター

太田和樹（おおたかずき）

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント。

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

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

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

記事を検索

関連するキーワード

関連する記事

余白を指定したい！CSSのpaddingの使い方【初心者向け】

CSSで書くpaddingについて解説しています。 そもそもpaddingとは何なのかよく分からないという方でも分かるように細かく説明しています。実際に書...
CSS

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

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

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

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

画像を使わない！CSSだけで矢印を作る方法【初心者向け】現役Webデザイナーが解説

今回はCSSで矢印を作る方法を説明します。 今まで画像を使って矢印をつけていたという方も、自分で書けるようになっておくと見た目の調整がしやすいでしょう。 ...
CSS

CSSでボタンやボックスの角を丸くする方法を現役デザイナーが解説【初心者向け】

今回は、角を丸くするborder-radiusプロパティについて解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説し...
CSS

CSSでobject-fitを使った画像トリミング方法を現役エンジニアが解説【初心者向け】

CSSでobject-fitを使った画像トリミング方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します...
CSS

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

先頭にマーカーを表示させよう！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で色の指定をする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次ul、ol、liタグを使った箇条書きul、ol、liタグが必要な理由ul、olを好みの画像に置き換える方法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の記述場所に関する解説を行います。 そもそも、CSSはどこに書けばいいのか？そんな疑問をお持ちのCSS初心者の方は多いと思います。 実は、CSSを実装する場所はいくつかあります。 この記事を通じて、実務でも利用できるCSSの実装位置を習得して頂き、実践的な知識をつけてみてくださいね。 目次 CSSを書く3つの場所 styleタグに書く インラインに書く 外部ファイルに書く   【動画でも解説しています。クリックで見る！】   田島悠介 ここではCSSをどこに書くかということについて説明するよ。 大石ゆかり 田島メンター！！ CSSを書く場所というのはどのように決まっているんでしょうか～？ 田島悠介 styleタグに書く方法・インラインに書く方法・外部ファイルに書く方法と3通りあるんだ。 それぞれの書き方を見てみよう。 大石ゆかり はい！   CSSを書く3つの場所 CSSを書く場所は、ズバリ、以下の3つです。 それぞれに応じて、書く場所も変わってきます。   styleタグに書く インラインに書く 外部ファイルに書く   それでは、下記のHTMLファイルをもとに、ひとつずつ見ていきましょう。 <!DOCTYPE html> <html lang=“ja”> <head> <meta charset=“UFT-8”> <title>CSS</title> </head> <body> <h1>CSS入門</h1> <p>はじめてのCSS</p> </body> </html>     これをデスクトップに「a.html」の名前で保存し、ブラウザで読み込んだものが次の画面です。 ここにCSSを使ってスタイルを施していきます。   田島悠介 今回はこの例で、それぞれの記述方法を見てみよう。 大石ゆかり h1の見出しと、pの段落がひとつずつある状態ですね。 田島悠介 この文書の文字の色や大きさを指定していくよ。 まずはstyleタグに書く方法からだね。   [PR] Webデザインで副業する学習方法を動画で公開中styleタグに書く まず、<style> を <head> のなかに書きます。 そこで指定していくことで、<body>にスタイルを適応させます。   HTML <!DOCTYPE html> <html lang=“ja”> <head> <meta charset=“UTF-8”> <title>CSS</title> <style>
CSS

HTMLのコードを効率良く整理する方法を現役デザイナーが解説【初心者向け】

HTMLのコードを効率良く整理する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 コードを効率良く整理する方法について詳しく説明していくね！ 大石ゆかり お願いします！   コード整形とは 可読性のための改行やインデントを取り除かれたソースコードは、人が読むためのソースコードにはなっていません。機械的に処理させて、処理速度の向上や難読化を目的に合理化されています。そのコードは、圧縮済みとも呼ばれており、ふたたび、人が読むためには、コードを整形する必要があります。 コードの整形は、インデント（半角スペース）にて構造的にすることです。下記にインデントを取り除いたサンプルコードを用意しました。 See the Pen 2020-01-20-sample14 by YOHEI INAI (@yohei_inai) on CodePen.   なぜコードを整理すべきか 機械的に処理させて、処理速度の向上や難読化を目的に合理化されたコードは、人が読むのには適しておらず、運用やメンテナンスもしづらくなりまして、作業の効率が悪くなってしまいます。そのため、特に理由がなければ、コードにはインデントも記述してから構造的に表現されている状態にて保存されているのが望ましいです。   [PR] Webデザインで副業する学習方法を動画で公開中HTMLのコードを整理してみよう <div><ul><li>箇条書き</li><li>箇条書き</li><li>箇条書き</li><li>箇条書き</li><li>箇条書き</li><li>箇条書き</li></ul></div> 上記のサンプルコードを例に、タグの構造にしたがって、法則性のある改行とインデントを記述していきます。 <div>   <ul> <li>箇条書き</li> <li>箇条書き</li> <li>箇条書き</li> <li>箇条書き</li> <li>箇条書き</li> <li>箇条書き</li> </ul> </div> 構造に合わせて、2個の半角スペースにて積み重ねました。これらのコードの整形は、AWS Cloud9の機能を使用して、自動化が可能です。 AWS Cloud9のメニューの「Edit」から、「Code Formatting」の「Apply Code Formatting」を選択することにて、コードを自動的に整形できます。   監修してくれたメンター 井内洋平 TechAcademyの現役メンター。 元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
HTML

基礎から学ぶ！HTMLにCSSを適用（読み込み）させる方法【初心者向け】

基本的にHTMLだけでは文字を表示するだけで、リッチなデザインが整ったWebデザインを制作することは難しいです。 そんな時に必要になってくるのがCSSです。 HTMLでCSSを読み込むためには、2つの方法があります。 今回は、その方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次ul、ol、liタグを使った箇条書きul、ol、liタグが必要な理由ul、olを好みの画像に置き換える方法CSSで装飾を変えてみよう監修してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 HTMLにCSSを適用（読み込み）させる方法について詳しく説明していくね！ 大石ゆかり お願いします！   CSSの読み込み方（適用方法） HTMLでCSSを読み込むためには、次の2つの方法があります。 外部CSSファイルをHTMLから読み込む方法 HTMLファイル内に直接CSSを記述する方法   1.外部CSSファイルを読み込む方法 外部CSSファイルを読み込む方法は、Webデザインの現場で一般的に使用されている方法です。 事前に拡張子が「.css」のファイルを用意し、HTMLに以下のタグを記述します。 <link rel="stylesheet" href="sample.css"> HTMLファイルに上記のコードを1行追加することで、sample.cssという名称のファイルに記述されたCSS定義をHTMLに適用することができます。   また、この1行をHTMLファイルのどこに記述するかという点についてですが、場所はHTMLファイルの<head>タグ内に記述します。 以下のようにHTMLファイルに記述しましょう。 HTML <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="sample.css"> <title>HelloTechAcademy</title> </head> <body> <p>ここにHTMLの文章などが入ります</p> </body> </html> ここで、CSSファイル読み込み処理のhrefの値は、HTMLファイルとCSSファイルの配置場所によって変化するので気を付けましょう。 上記サンプルの場合は、HTMLファイルとCSSファイルは同じディレクトリに配置する必要があります。   また、HTMLファイルと同じディレクトリにcssというフォルダがあり、その中にsample.cssというファイルが配置されている場合、CSSファイル読み込み処理は以下のように記述します。 <link rel="stylesheet" href="css/sample.css">   2.HTMLファイル内に直接CSSを記述する方法 HTMLファイル内に直接CSSを記述する方法は、一般的にはほとんど使う機会の無い方法ですが、このような適用のさせ方もあります。 まず、以下のようにCSS定義を<style>タグの中に記述します。 <style type="text/css"> p { color : red; } </style>   用意した<style>タグは、HTMLファイルの<head>内に以下のように記述します。 HTML <html> <head> <meta charset="UTF-8"> <style type="text/css">p { color
HTML

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

CSSとは何かについて、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   「CSSが分からないけど今さら聞けないよな…」 「CSSってなんで必要なんだろう…」 「どうやってCSSを書いたらいいんだろう…」   上記のような疑問や悩みを感じている方は、最後まで読んでいただければ「CSSとは何か」を理解できますのでぜひ参考にしてみてください。 目次ul、ol、liタグを使った箇条書きul、ol、liタグが必要な理由ul、olを好みの画像に置き換える方法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

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

副業したい方

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

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

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

スキルアップしたい方

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

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

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

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS HTML+CSSでul、ol、liタグを使った箇条書きの装飾の仕方を現役デザイナーが解説【初心者向け】