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.

書体と色はどうなるの？

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

コラム

コスパとタイパ、両方結果的に良くなる良くなる学び方とは？

「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

コスパ・タイパ最適化の参考として、テックアカデミー卒業生がスクールを選んだ理由をご紹介します。

・困ったときに、質問や相談できる相手がいるため挫折しなかった
・プロとして必要なスキルのみを深く学べたので無駄がなかった
・副業案件の提供と納品までのサポートがあったので目的を達成できた

安価・短期間で広く浅く学んでも意味がありません。本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に無料相談に参加してみませんか？

カウンセラー・現役のプロへ、何でも気軽に無料相談可能。 30分か60分お好きな時間が選べて、かつ3回まですべて無料でご利用できます。
無理な勧誘は一切ないので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！無料相談はこちら

監修してくれたメンター

ゆかちん先生

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

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

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

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

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

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

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

・調べてもほしい情報が見つからない
・独学のスキルが実際の業務で通用するのか不安
・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるようカウンセラーやエンジニア・デザイナーがあなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありませんので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！無料相談を予約する

CSSでフッターをウィンドウ最下部に固定する方法【初心者向け】

今回は、CSSでフッターをウィンドウ最下部に固定する方法について解説します。なぜCSSでフッターをウィンドウ最下部に固定する必要があるのでしょうか？ ...

CSS

字下げする！CSSでインデントする方法【初心者向け】現役Webデザイナーが解説

今回はCSSでインデントする方法を紹介します。 Webサイトの文章を字下げしたいという時に使えるので、覚えておきましょう。 1文字目をインデントする...

CSS

CSSでfont-familyを使ってフォントを指定する方法【初心者向け】

CSS初心者向けに、font-familyを使ってフォントを指定する方法を解説する記事です。 CSSの基礎がわからない場合は、CSSの書き方の記事を先にお...

CSS

実際に書く！CSSで背景画像を透過させる方法【初心者向け】

CSSで背景画像を透過させる方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも...

CSS

3の倍数などn番目の要素だけCSSをスタイルする方法を現役エンジニアが解説【初心者向け】

3の倍数などn番目の要素だけCSSをスタイルする方法について解説します。これができると規則的にデザインを変更することができるので、個別でCSSを設定するという手...

CSS

文字に影をつけたい！CSSのtext-shadowの使い方【初心者向け】現役Webデザイナーが解説

CSSで書くtext-shadowの使い方について解説しています。テキスト(文字)に影をつけて、より目立たせたりおしゃれに見せたいという方はぜひ使い方を...

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

スマホ対応！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; } } コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。

CSS

スタイルシート（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の赤にするということですね。田島悠介そうだね。また、ひとつのセレクタに複数のプロパティを指定できるんだ。次の例を見てみよう。コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。ただ結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。コスパ・タイパ最適化の参考として、

CSS

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

文字や背景の色を指定するにはCSSを使用するのが一般的です。しかし、簡単な色設定だと、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

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とは【初心者向け】現役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でlist-style-typeを使って箇条書きを連番にする方法を現役デザイナーが解説【初心者向け】

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

htmlでマークアップしよう