Web Design

# Web Design   ## はじめに     ### 0-1 教材の概要  ・タイトル (例)Webアプリケーションを作ろう・概要 ### 学習内容 ### 受講における必要条件 (例)PHPの基本的な知識(変数、配列、連想配列、if文、each文、メソッド・クラスの存在を理解している) ### この教材の対象者 (例)PHPを学んだことがある方 ### 学ばないこと (例)本教材では、大規模フレームワークの使用方法や、完全なMVCモデルの実装は行いません。 ### 本教材の対応バージョン (例)PHP8.0 ### 目次 (例) * 0章はじめに * 1章 ### 0-2 必要なツール (例)Google Chrome、Codepen、Gyazo(使用する場合)のインストール、アカウント作成方法を説明。本教材では、コーディングの結果をCodePenで確認していきます。手順ごとに画像を表示して説明します。    本レッスンでは、Webデザインの基礎として、HTMLとCSSを学びます。どんなWebサイトを作る上でも基礎となりますので、習得してみてください。コードを実際に入力できるので、実践的に学べます。    ## Webページとは  HTMLとCSSを学ぶ前に、まずはWebページとは何なのかから学んでいきます。Webページが何かを先に学んでおくことで、その後の学習がスムーズになります。 ### Webページとは  Webページとは、インターネット上にある、Webブラウザで閲覧可能なページ単位の文書のことです。皆さんは、普段からパソコンやスマートフォンを使って様々なWebページを見ていることでしょう。GoogleやYahooのような検索サイトを使えば、検索キーワードと関連する様々なWebページへとアクセスすることができます。 ### Webブラウザとは Webページを閲覧するのに必要なのは、Webブラウザです。 Webブラウザとは、Webページを閲覧するためのソフトウェアです。単にブラウザと呼ばれることや、'''ユーザーエージェント(UA)とも呼ばれます。'''Webブラウザというソフトウェアを起動してそのソフトウェア上でWebページを開いて閲覧しています。 Webブラウザの種類はいくつかあり、下記の4つが有名でしょう。 - Internet Explorer - Google Chrome - Safari - Firefox ### Webページの構成 Webブラウザが表示しているWebページは、**どのようにできている**のでしょうか？ Webページを構成しているものは、主に下記の3つに分けられます。 - 文書 - デザイン - リソースファイル（画像や動画など） **文書**は、文章や、目次、アウトラインにあたります。このページでは「1. はじめに」といった本文のことです。文書がWebページのメインであり、伝えたい内容となります。 **デザイン**は、色やフォント、どこに何を配置するかのレイアウトなどを担当しています。このページでは、左側に本文、右側に目次を配置（PCで見た場合の配置）しています。また、内容が乱雑にならないように余白を適切にとったり、見出しの文字は大きく表示したりしています。文書が伝えたい内容であったのに対して、デザインは人間にとって文書が伝わりやすくするために工夫するところです。 **リソースファイル**は、画像や動画などのファイルのことです。このページでは、最初にお伝えしたTechAcademyでの学習の進め方の画像や、説明会動画を載せています。文書だけでなく画像や動画を使うことで、より理解しやすくなります。 #### HTML, CSS, リソースファイル  文書、デザイン、リソースファイルの3種類が、Webページを作っています。 Webブラウザを使ってWebページを表示すると、自動的に全て統合されて1つのページとして表示されますが、実はファイルはいくつかに分かれています。WebページをWebブラウザで開かずに、テキストエディタ（テキストファイルを編集するためのソフトウェア）などで開いてみると、下記のように分類されていることがわかります。 - 文書: **HTMLファイル** - デザイン: **CSSファイル** - リソースファイル: **それぞれ画像や動画ファイル** HTMLはWebページにおける**文書（情報のまとめ役）** を担当します。Webページを表示する場合に、HTMLは起点となります。CSS、リソースファイルもHTMLによって統合されます。HTMLはただのテキストファイルです。テキストエディタでHTMLファイルを開くと下記のような文字が書かれています。 *HTMLファイルをテキストエディタで開いたときのサンプル* ```html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>サンプル</title> <link rel="stylesheet" href="style.css"> </head> <body> <p>本文です。</p> </body> </html> ``` 実際の例も見ておきましょう。[Yahoo! JAPAN](http://www.yahoo.co.jp/){:target="_blank"}のHTMLファイルは下記のようになっています。 ![WebページとHTMLコード](https://techacademy.s3.amazonaws.com/bootcamp/common/html-css/yahoo_source.png) *Yahoo! JAPANの本来の姿(HTML)* これがYahoo! JAPANのHTMLです。なにやら `< >` で囲まれたものがいっぱいありますね。これはHTMLタグと呼ばれるものです。次のチャプター「HTMLの概要」でHTMLタグ（ `< >` ）について学びます。 CSSはWebページにおける**デザイン（見た目）**を担当します。デザインとは、Webページのレイアウトや色や背景、フォントのことです。CSSファイルもHTMLファイル同様に単なるテキストファイルです。テキストエディタでCSSファイルを開くと下記のような文字が書かれています。 ```css /* チャプター：CSSの実習準備 */ body { margin: 0; padding: 0; color: #333; font-size: 14px; } a { color: #333; } a:visited { color: #333; } ``` Webページの基本は、HTMLとCSSです。下記の2つのキャプチャ（Webブラウザで開いたもの）を見比べてみてください。上がHTML（文書）だけのWebページ、下がCSS（デザイン）をHTML文書に適用したWebページです。HTMLだけのほうは文書（画像も含んでいるが）だけです。それに比べて下は見た目がキレイにデザインされています。例えばページ上部のメニューリストでは、HTMLだけだとHOMEや講座案内が箇条書きになっているのに対して、CSSを適用させたWebページだと色がついてボタンのようになっています。 ![](https://techacademy.s3.amazonaws.com/training/htmlcss/html/techacademy-kitchen-html.png) *HTML文書だけのWebページ（ブラウザの自動デザインによって少しだけ色がついたりしている）* ![](https://techacademy.s3.amazonaws.com/training/htmlcss/html/techacademy-kitchen.png) *HTML文書にCSSを適用したWebページ* リソースファイルは主に画像ファイルです。他にも、動画ファイル、フォントファイル、Flashファイルなどがあります。リソースファイルはHTML内に埋め込まれる形でWebページとして表示されます。 ### Webページの表示下記のような順番でWebブラウザが動作することで、HTMLやCSS、リソースファイルが統合され、Webページとして表示されます。 1. 指定のURLへアクセスし、HTMLファイル, CSSファイル, リソースファイル（画像ファイルなど）を取得する 2. 取得したHTML, CSS, リソースを解析する（読み込む） 3. 解析結果を基に、文字や画像を適切に配置し、あるいは文字の大きさを調整したり色を付けるなどしてWebページとして統合し、表示する WebブラウザからWebページを見ることによって、私たちが普段みているWebページとなります。ここまでで、Webページがどのように作られているか理解できましたでしょうか。次のチャプターから、実際にHTMLとCSSをどのように使うのか解説していきます。 ## HTMLの基礎  まずはHTMLの基礎を学びます。 ### HTMLとは  HTMLは、HyperText Markup Language（ハイパーテキストマークアップ言語）の略で、Web上の文書を記述するためのマークアップ言語です。と言っても最初はよくわからないので、まずはイメージをつかむために例を見てみましょう。 ### いつもの文書とHTMLの文書例としてわかりやすいように、普段から目にする「いつもの文書」と「HTMLの文書」を比較してみます。 #### いつもの文書みなさんは普段から文書を書いているはずです。文書といっても、ちょっとしたメモや、日記、SNSへのつぶやき、友達とのチャット、企画書、技術資料など色々あります。例えば、買い物メモを書いたとしましょう。 *買い物メモ* ``` ・飲料水・パン・牛乳・鶏肉 ``` この買い物メモでは、買うべきものリストを箇条書きにしています。この文書がリスト（箇条書き）だと思わせてくれる記号は何でしょうか。ずばり `・` です。行の始めに `・` を並べて書けば、多くの人はリストが書かれているという共通認識を持っています。 #### HTMLで文書を書き直しでは、これをHTMLで書き直してみます。 *HTMLで書き直した買い物メモ* ```html <ul> <li>飲料水</li> <li>パン</li> <li>牛乳</li> <li>鶏肉</li> </ul> ``` これがHTML文書となります。書かれていた情報自体に変更はありません。飲料水、パン、牛乳、鶏肉の情報はそのままです。変わったものは、 `・` です。`・` は無くなり、代わりに `<ul>` や `<li>` などの記号が出てきました。この記号が **`・` の代わりに「これはリストだよ」という意味** を担っているのです。この記号を**HTMLタグ**と呼びます。Webページを作成するとき、最初にHTMLタグを使って文書を書くことから始めます。 ### なぜ文書をHTMLで書くのか  なぜ文書をHTMLで書くのでしょうか？そもそも誰のためでしょうか。 HTMLは**Webブラウザのため**に記述されます。「Webページの表示」で述べたように、Webページを解析するのはGoogle ChromeやInternet ExplorerのようなWebブラウザです。解析された結果が、普段見ているWebページのようにデザインされて表示されます。（デザインはCSSを解析して表示されます）つまり、下記のようにHTMLで文書を書くと、ブラウザが正しく意味を認識してくれます。この場合は、飲料水、パン、牛乳、鶏肉という **リスト** です。 ```html <ul> <li>飲料水</li> <li>パン</li> <li>牛乳</li> <li>鶏肉</li> </ul> ``` 実際に上記のコードをWebブラウザで表示したらどのようになるでしょうか。下記をご覧ください。これはCodePenというもので、本レッスンではたびたび出てきます。左側にHTML文書、右側はHTMLをWebブラウザが解析した表示結果です（スマホやブラウザが小さい人は、下記の「Result」ボタンを押すとブラウザ表示が確認でき、同様に「HTML」ボタンを押すとHTML文書が確認できます）。   - [Google Chromeのインストール方法](tools#chapter-2) <div style="height: 265px;"> <p data-height="259" data-theme-id="0" data-slug-hash="gwPNdG" data-default-tab="html,result" data-user="techacademy" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/techacademy/pen/gwPNdG/">gwPNdG</a> by TechAcademy (<a href="http://codepen.io/techacademy">@techacademy</a>) on <a href="http://codepen.io">CodePen</a>.</p> </div> <script async src="//assets.codepen.io/assets/embed/ei.js"></script> ''' *↑画像ではなく、CodePenがページに埋め込まれています。「EDIT ON CODEPEN」ボタンでお試し編集できます（保存不可）* 右側の表示結果をよくみると、 `・` が表示されています。これは自分で書いた `・` ではなく、Webブラウザによって自動的に表示されているものです。今回の買い物メモでの例で、**Webブラウザの一連のHTML読み込み（解析）動作**を想像してみましょう。以下の主語は全てブラウザです。 1. HTMLで書かれた買い物メモを読み込む 2. 1行目に`<ul>`があるので、ここからリストが始まるとわかる 3. 2行目に`<li>`があるので、リスト内の1つの項目だとわかる 4. 2行目の終わりに、`</li>`で閉じられているので、リスト内の1つの項目がここまでで終わりだとわかる 5. 3,4を繰り返す 6. 最後に`</ul>`で閉じられているので、リストはここまでだとわかる 7. 買い物メモのHTML文書ファイルがここまでなので、人が読みやすいように表示する（ `・` を表示させる）このような手順で動きます。最終的には人が見てリストだとわかるように、ブラウザが `・` を表示します。ここでは、`<ul>`や`<li>`のように`< >`で囲まれたもの（HTMLタグ）で、情報に型（アウトラインなど）を与えるのがHTMLだと言うイメージを持つことができれば、それで問題ありません。 ### 最小のHTML文書  HTMLがなぜ必要かわかったところで、実際のHTMLファイルを見ていきましょう。最小のHTML文書はこのようになります。 *minimum.html（最小のHTML文書）* ```html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>タイトル</title> </head> <body> <p>本文です。</p> </body> </html> ``` このHTML文書は下記のように、「本文です。」としか表示されません。 ![](https://techacademy.s3.amazonaws.com/bootcamp/lessons/html-css/htmlcss_03.png) この最小のHTML文書には、HTMLの大事なものが詰まっています。次のセクションからそれぞれの要素を分解して見ていきましょう。 ### DOCTYPEとhtml  HTML文書の冒頭には、この文書がHTMLで書かれていることを宣言する**DOCTYPE宣言**が必要です。この宣言は必ず1行目に書く必要があります。これは決まりですので深く考える必要はありません。ブラウザが「これはHTML文書だ」と正しく認識するために、`<!DOCTYPE html>`が記述されます。なお、このように書いた場合にはHTMLの中でもバージョン5、HTML5で書かれているという宣言になります。 HTMLは緩やかに進化しており、その過程でいくつものバージョンが存在します。少し古いバージョンの「HTML4」「HTML4.01」などもまだ使われています。同じHTMLでもバージョンにより解釈の違いが存在するため、最初にDOCTYPE宣言をするわけです。以下はHTML5のDOCTYPE宣言です。 ```html <!DOCTYPE html> ``` DOCTYPE宣言の下からHTML文書を記述していきます。 HTML文書全体は`<html>`と`</html>`で囲わなければいけません。それがHTMLの決まり（HTMLの文法）です。 ```html <!DOCTYPE html> <html>  </html> ``` #### HTML内のコメント上記のHTML文書に `` というものが入っていました。これはHTML内で使えるコメントです。 HTMLではコメントの書き方も定められています。コメントは ``で終了し、その間にコメント内容を書きます。 **コメントはブラウザによって無視されるので、表示されません**。コメントがブラウザに無視されて表示されないという特性を活かして、メモ用途としてコメントを残すことができます。ただしHTML内のコメントは、Webページで右クリックして「ページのソースを表示」すると、誰でもコメントも見えてしまいますので、**プライベートなコメントを書くべきではありません**。 ### HTMLタグとは　 最小のHTML文書には、`< >`で囲まれた記号が並んでいました。 *minimum.html* ```html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>タイトル</title> </head> <body> <p>本文です。</p> </body> </html> ``` この`<html>`, `</html>`のように、`< >`で囲まれた記号を**HTMLタグ**と呼びます。 HTMLタグには「開始と終了がある要素」と「終了タグのない要素」があるので、それぞれ説明します。 #### 開始と終了がある要素 HTMLタグは**開始タグ**から始まり、**内容**を挟んで、**終了タグ**までが1つのまとまりとなっています。このまとまりのことを**要素**と呼び、タグ内に書かれた文字を**要素名**と呼びます。 ![](https://techacademy.s3.amazonaws.com/bootcamp/lessons/html-css/htmlcss_06.png) 例えば上図は、**title要素**を表しています。title要素はWebページのタイトルを意味する要素で、`<title>`という開始タグ、タイトル内容、`</title>`という終了タグによって構成されます。 #### 終了タグのない要素 `<meta ... >`のように、終了タグがない要素もあります。最小のHTML文書にある`<meta charset="UTF-8">`は終了タグがありませんが、これで正しい記述です。他にも画像を表示するimg要素も終了タグがありません。今は終了タグのない要素もあることだけを知っておきましょう。 #### なぜタグをつけるのか HTMLがブラウザのために書かれているということは既に述べました。もう一度復習しておきましょう。なぜ、`タイトル`や`本文です。`をtitleタグやpタグで囲っているのでしょうか？それは文書に「意味付け」をしているのです。タグで囲んで意味付けすることで、ブラウザは文書を理解できるようになります。ブラウザは`タイトル`とだけ書かれている文をみても、それが何を意味するのかまではわかりません。 HTML文書は、タイトルは`<title>なんらかのタイトル</title>`で囲むという**絶対的なお約束（文法）**があるので、ブラウザはそれがタイトルだと認識できるのです。買い物リストでもあったように`・`と書かれていても、ブラウザはリストだと判断できません。ul要素とli要素を使うことでリストを表現して初めてブラウザはリストだと認識できます。 *買い物リスト* ```html <ul> <li>飲料水</li> <li>パン</li> <li>牛乳</li> <li>鶏肉</li> </ul> ``` ### head と body  最小のHTML文書には「head」「body」がありました。 **HTML文書の中身を大きく分けるとこのhead要素とbody要素に分かれます**。それぞれ`<head>`タグと`<body>`タグで囲います。 head要素内には文書に関する「メタ情報」を記述し、body要素には「コンテンツ」を記述します。メタ情報(head)には閲覧者に表示されない設定やページ情報などを記述し、コンテンツ(body)には閲覧者に見てもらうための文書を記述します。 headタグ内に記述するメタ情報には、ページタイトル、外部スタイルシートの場所、外部JavaScriptファイルの場所、文字エンコーディング情報、ページの概要、などが含まれます。前述の通り、メタ情報はWebブラウザ上には表示されません。 ```html <!DOCTYPE html> <html> <head>  </head> <body>  </body> </html> ``` ここまで説明したHTML文書を図示するとこのようになります。 ![](https://techacademy.s3.amazonaws.com/bootcamp/first-programming/html-css/5-1.png) #### インデントについてインデントとは、プログラムの構造を見やすくするために、行などを空白文字によって字下げすることを指します。 HTMLやCSSでは、行頭のスペースやタブといった空白文字を無視するので、インデントをつけることができます。HTML文書を作成する際は、開始タグと終了タグの関係を把握しやすいようにインデントをつけることが一般的です。タグごとにインデントをつけることで、開始タグと終了タグが視覚的に把握しやすくなります。インデントはスペースでもタブ文字でも良いですし、文字数も特に決められてはいませんが、2文字または4文字が推奨されていますので、本コースでも2文字または4文字が使用されています。下記の例だと、`<head>`, `</head>`の前にスペース4つあり、同じ階層だと判断できるようになっています。`<body>`, `</body>`でも同様です。更に、`<head> ... </head>`内のように1つ深い階層に入ると、``の文頭のように更にインデントを重ねていきます。階層がひと目でわかりやすくなりますね。 ```html <!DOCTYPE html> <html> <head>  </head> <body>  </body> </html> ``` ### 属性  HTML基礎の最後に「属性」を紹介します。属性とは開始タグの中に書かれた付加情報のことです。多くのタグは属性と合わせて記述されます。 *minimum.htmlの一部* ```html <meta charset="UTF-8"> ``` 例えば、上記のmeta要素を見てみましょう。開始タグ内を半角スペースで区切ったあとに`charset="UTF-8"`という属性を記述してます。 ![](https://techacademy.s3.amazonaws.com/bootcamp/lessons/html-css/htmlcss_08.png) `charset="UTF-8"`のように `属性名="属性値"` という形で、要素に付加情報を加えられます。`<meta charset="UTF-8">`は文字エンコード(`charset`)として`UTF-8`を利用しますという宣言です。文字エンコードについては学びませんが、全てのHTMLファイルのhead要素内には、`<meta charset="UTF-8">`を決まり文句として書いておきましょう。要素によって頻繁に利用する属性は決まっているので、少しずつ慣れていきましょう。 ## CSSの概要  HTMLの基礎がわかったら、続いてCSSについて学びましょう。 ### CSSとは  CSSとは、Cascading Style Sheets（カスケーディングスタイルシート）の略で、スタイル、つまりWebページをデザインするための言語です。 CSSが必要なのは、HTMLだけでは文書を書くことしかできないからです。HTMLでは、ページのレイアウトや文字に色をつけるといったデザインはできません。 ### CSSの文法 CSSは「HTML内の○○要素の△△を□□にする」といったイメージでスタイルを設定します。 ``` セレクタ { プロパティ: 値; } ``` CSSの文法はこれだけで、セレクタ・プロパティ・値の3つで構成されています。この形を上から下へ、いくつも書いていくことになります。 * セレクタは、HTMLのどの部分にスタイルを適用するかを指定します。 * プロパティは、スタイルの種類を指定します。 * 値は、プロパティで指定されたスタイルの値を指定します。 ※値のあとにある`;`を忘れないようにしてください CSSの文法理解していただくため、「文字色を変える」、「表示位置を変える（レイアウト）」を例と紹介します。CodePenを使って実践もできますので、ぜひお試しください。 #### 文字色を変えるまずは、先ほど表示したリストの文字色を`青色(blue)`で表示してみましょう。 *ulで囲んだリストの文字色を青にするCSS* ```css ul { color: blue; } ``` 下記のページに埋め込まれているものはHTMLの基礎でも使ったCodePenです。上部にHTML, CSS, Resultのボタンがあります。HTMLボタンを押すとHTMLの内容が表示され、CSSボタンを押すとCSSの内容が表示されます。Resultボタンを押すとHTMLとCSSを統合した結果が表示されます。この例では右側（Result）の表示が青色になっていますね。 <div style="height: 255px;"> <p data-height="249" data-theme-id="0" data-slug-hash="ALEZqE" data-default-tab="css,result" data-user="techacademy" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/techacademy/pen/ALEZqE/">ALEZqE</a> by TechAcademy (<a href="http://codepen.io/techacademy">@techacademy</a>) on <a href="http://codepen.io">CodePen</a>.</p> <script async src="//assets.codepen.io/assets/embed/ei.js"></script> </div> #### 表示位置を変える（レイアウト）  続いて、表示位置を変えるCSSを見ていきます。 ##### 右寄せの場合リストの表示位置を右寄せにしてみます。 *文字色が青色、かつ、右寄せにするCSS* ```css ul { color: blue; float: right; } ``` <div style="height: 271px;"> <p data-height="265" data-theme-id="0" data-slug-hash="xEkvdq" data-default-tab="css,result" data-user="techacademy" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/techacademy/pen/xEkvdq/">xEkvdq</a> by TechAcademy (<a href="http://codepen.io/techacademy">@techacademy</a>) on <a href="http://codepen.io">CodePen</a>.</p> </div> <script async src="//assets.codepen.io/assets/embed/ei.js"></script> ##### 横並びの場合今度はリストの並びを横並びにして、更にリスト項目間の余白も大きくします。 *文字色が青色、かつ、横並びにするCSS* ```css ul { color: blue; } li { display: inline-block; margin: 20px; } ``` <div style="height: 271px;"> <p data-height="265" data-theme-id="0" data-slug-hash="PGkrjy" data-default-tab="css,result" data-user="techacademy" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/techacademy/pen/PGkrjy/">PGkrjy</a> by TechAcademy (<a href="http://codepen.io/techacademy">@techacademy</a>) on <a href="http://codepen.io">CodePen</a>.</p> <script async src="//assets.codepen.io/assets/embed/ei.js"></script> </div> 横並びにすると、ブラウザが自動的に `・` を消去しています。横並びの場合には、`・` が邪魔になるからです。これらの例でCSSの文法は理解できたはずです。次からは、CSSの「セレクタ」「プロパティ」「値」の詳細を説明します。 ### セレクタ  復習ですが、CSS は下記の文法で書き進めていくものでした。 ``` セレクタ { プロパティ: 値; } ``` CSSは、 `セレクタ` として `h1` や `p` のように、HTMLタグをそのまま入力することもできます。その場合、指定されたHTMLタグの箇所は全てデザインが適用されます。セレクタには - HTMLタグ - id属性 - class属性があります。具体例を見ていきましょう。 #### HTMLタグをセレクタに HTMLタグによって指定すると、その指定されたHTMLタグの箇所は全てデザインが適用されます。 ```css p { color: red; } ``` とすると、 ```html <p>テキスト1</p> <p>テキスト2</p> <p>テキスト3</p> ``` のような場合、全てに対して文字色が `red` になります。 <div style="height: 209px"> <p data-height="203" data-theme-id="0" data-slug-hash="Ppoorz" data-default-tab="css,result" data-user="techacademy" data-embed-version="2" data-pen-title="Ppoorz" class="codepen">See the Pen <a href="http://codepen.io/techacademy/pen/Ppoorz/">Ppoorz</a> by TechAcademy (<a href="http://codepen.io/techacademy">@techacademy</a>) on <a href="http://codepen.io">CodePen</a>.</p> </div> <script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script> HTMLタグによるセレクタはWebサイト全体のデザインを一貫して決めるときに指定します。 #### id属性をセレクタに id属性によるセレクタは、id属性に対して `#` を頭に付けます。 ```css #abc { color: red; } ``` とすると、 ```html <div> こちらは黒 </div> <div id="abc"> こちらは赤 </div> ``` のような場合、 `<div id="abc">...</nav>` 内だけ文字色は `red` になります。 <div style="height: 186px"> <p data-height="180" data-theme-id="0" data-slug-hash="LWYYKK" data-default-tab="css,result" data-user="techacademy" data-embed-version="2" data-pen-title="LWYYKK" class="codepen">See the Pen <a href="http://codepen.io/techacademy/pen/LWYYKK/">LWYYKK</a> by TechAcademy (<a href="http://codepen.io/techacademy">@techacademy</a>) on <a href="http://codepen.io">CodePen</a>.</p> </div> <script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script> #### class属性をセレクタに class属性によるセレクタは、class属性に対して `.` を頭に付けます。 ```css .abc { color: red; } ``` とすると、 ```html <div> こちらは黒 </div> <div class="abc"> こちらも赤 </div> <section class="abc"> こちらも赤 </section> ``` のような場合、 `<div class="abc">...</div>` や `<section class="abc">...</section>` 内の文字色は全て `red` になります。 <div style="height: 236px;"> <p data-height="230" data-theme-id="0" data-slug-hash="zZYxOM" data-default-tab="css,result" data-user="techacademy" data-embed-version="2" data-pen-title="zZYxOM" class="codepen">See the Pen <a href="http://codepen.io/techacademy/pen/zZYxOM/">zZYxOM</a> by TechAcademy (<a href="http://codepen.io/techacademy">@techacademy</a>) on <a href="http://codepen.io">CodePen</a>.</p> </div> <script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script> ### プロパティ  セレクタの次はプロパティです。再度復習ですが、CSS は下記の文法で書き進めていくものでした。 ``` セレクタ { プロパティ: 値; } ``` プロパティは、セレクタに対して**適用するデザインの種類を指定するもの**です。CSSには様々なプロパティがあります。代表的なプロパティとして下記の3つを紹介します。 - 文字色 - 背景 - 幅幅や高さ、境界線、余白 #### 文字色今まで何度か出てきましたが、`color` プロパティは文字色指定のためのプロパティです。 ```css p { color: red; } ``` これで `<p>` の文章の文字色は全て赤色になります。 #### 背景背景に関するプロパティは `background` から始まります。背景色の場合には、 `background-color` プロパティを使用します。 ```css p { background-color: green; } ``` これで `<p>` の文章の背景が全て緑色になります。 #### 幅や高さ、境界線、余白 HTMLの要素の大きさを変更するには、幅 (`width`) や高さ (`height`)、境界線 (`border`)、余白 (`padding`, `margin`) のプロパティを調整します。それぞれ下図のような関係になっています。 ![](https://techacademy.s3.amazonaws.com/bootcamp/lessons/html-css/htmlcss_37.png) 具体例を見てみましょう。 HTMLをこのように用意しました。 ```html <div class="box"> div要素内 </div> ``` このHTMLでサイズを調整するために、下記のようにCSSを書きます。 ```css .box { margin: 50px; border: 5px solid pink; padding: 50px; background-color: skyblue; } ``` 実際の結果はCodePenで確認してみましょう。 <div style="height: 271px"> <p data-height="265" data-theme-id="0" data-slug-hash="VKQrBX" data-default-tab="css,result" data-user="techacademy" data-embed-version="2" data-pen-title="VKQrBX" class="codepen">See the Pen <a href="http://codepen.io/techacademy/pen/VKQrBX/">VKQrBX</a> by TechAcademy (<a href="http://codepen.io/techacademy">@techacademy</a>) on <a href="http://codepen.io">CodePen</a>.</p></div> <script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script> コードの詳細な説明は省きますが、このようにWebページをデザインしていることを知っておきましょう。 ### 値  セレクタ、プロパティと紹介してきましたので、最後に値です。値は、プロパティによって取りうる単位が違います。例えば、色関係の値であれば `red`, `skyblue` のような英単語や `#990000` のように数値で指定することもできます。一方、大きさ関係の値は `px` や `%` を使用することが多いでしょう。このようにプロパティによって取りうる単位が異なることを知っておきましょう。 ### 学習のまとめ HTMLとCSSの実践、お疲れ様でした！前半は、Webページが HTML、CSS、画像などによって構成されていることを学びました。HTML は文書であり、CSS は HTML をデザインするための言語でした。わざわざ文書を HTML で書くのは、Webブラウザが文書を解釈して適切に表示するためです。中盤以降は、HTML、CSSの基礎を学びました。Webデザインの基本はこのHTML,とCSS です。この2つを思い通りに記述できるようになれば、単純なWebサイトや、ランディングページなどを作成することができるようになります。

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.