コメントこんにちは、koheiです。第1回、2回とHTMLの基本を学習してきました。今日からいよいよCSSの説明をしていきます。ダウンロードファイル※以下ファイルをダウンロードしてください。実際に手を動かしながら読み進めることができます。2018年10月27日動画解説を追加しました。Sheetの略で、HTMLを修飾(デザイン)する仕組みのことです。これまでHTMLでh1タグなど色んなタグを使用し、文章に意味を与えてきましたが、CSSは、そのHTMLのタグにスタイルを指定するファイルのことです。CSSの基本書式は、以下のようになります。セレクタは、デザイン適用先のタグ名を書きます。上記だと適用先にh2タグを指定しています。セレクタは、コンマで区切って複数指定することもできます。宣言ブロックの中には具体的にスタイルを指定する為のプロパティとその値を書きます。いろんなプロパティの使い方をマスターすることで、色んなデザインを指定できるようになります。それでは、次章から早速プロパティでデザインを設定してみましょう。文字色を変えてみよう文字色を変えるには、以下のようなcolorプロパティを使用します。colorのコロン(:)の後、色コードを16進数で設定します。(2桁ずつR,G,Bで設定します)カラーコードは、以下のサイトなどを参考に設定しましょう。ダウンロードファイルに「01_文字色」というフォルダがあります。その中のCSSフォルダ→style.cssに以下のコードを追加してみてください。(3行目〜33行目)なお、#ff0000などのカラーコードは、短縮形で記載することもできます。以下のh4〜h6のcolorは短縮形で指定している例です。*/マークは、CSSのコメントです。#f78181;}ちなみに、本練習では、HTMLファイルはすでに以下のように記載しています。<p>文字色設定の練習です。--><h1>見出しタイトル1</h1><h2>見出しタイトル2</h2><h3>見出しタイトル3</h3><h4>見出しタイトル4</h4>ß<h5>見出しタイトル6</h5><h6>見出しタイトル7</h6><p>文字色設定の練習です。</p><p>一部分だけの<span>色</span>を変えます</p></body></html>index.htmlをダブルクリックしてブラウザで開いてみましょう。上の画面のように、cssで設定した文字色が反映されていれば成功です。文字の大きさを変えてみよう次は、文字の大きさを変えてみましょう。文字の大きさを変えるには、font-sizeプロパティを使用します。サイズの指定は、pxやemを使います。pxは、そのまま直接サイズを指定します。emは、基準フォントサイズ(16px)から相対的な大きさを指定します。基準フォントサイズの2倍の32pxの大きさにする場合は、2.0emと記載します。ダウンロードファイルに「02_文字の大きさ」というフォルダがあります。その中のCSSフォルダ→style.cssに以下のコードを追加してみてください。20px;}ちなみに、本練習では、HTMLファイルはすでに以下のように記載しています。<p>文字の大きさ設定の練習です。--><h1>見出しタイトル1</h1><h2>見出しタイトル2</h2><p>文字の大きさ設定の練習です。</p></body></html>index.htmlをダブルクリックしてブラウザで開いてみましょう。上の画面のようにcssで設定した文字サイズが表示されれば成功です。リストスタイルを変えてみようリスト項目の左にあるマークのデザインを変えるには、list-styleプロパティを使います。list-styleプロパティは、以下のような値が設定できます。・square・・・黒い四角など。詳しくは、以下のサイトなどを参考にしてください。ダウンロードファイルに「03_リストスタイル」というフォルダがあります。その中のCSSフォルダ→style.cxxに以下のコードを追加してみてください。none;}ちなみに、本練習では、HTMLファイルは以下のように記載しています。--><h1>リスト</h1><p>リストスタイルの練習</p><h2>メニュー</h2><ul><li>カレーライス</li><li>カツカレー</li><li>日替わり定食</li><li>かつ丼</li><li>牛丼</li><li>まる天うどん</li></ul></body></html>index.htmlをダブルクリックしてブラウザで開いてみましょう。上の画面のようにリスト項目の左マークが非表示になっていれば成功です。他のリストスタイルも指定して表示を確認してみてください。背景色を変えてみよう次は、背景色を変える方法です。背景色は、background-colorプロパティを使用します。先ほどの文字色(clorプロパティ)同様に色コードを16進数で設定します。こちらも以下のサイトを参考に好きなカラーコードを設定しましょう。ダウンロードファイルに「04_背景色」というフォルダがあります。その中のCSSフォルダ→style.cssに以下のコードを追加してみてください。#01dfa5;}ちなみに、本練習では、HTMLファイルは以下のように記載しています。<p>背景色設定の練習です。--><h1>見出しタイトル1</h1><h2>見出しタイトル2</h2><h3>見出しタイトル2</h3><h4>見出しタイトル4</h4><h5>見出しタイトル6</h5><h6>見出しタイトル7</h6><p>背景色設定の練習です。</p></body></html>index.htmlをダブルクリックしてブラウザで開いてみましょう。上の画面のようにcssで設定した背景色が表示されれば成功です。最後に、今日学んだことを復習しましょう。ダウンロードしたフォルダの中に「05_演習問題」とうフォルダがあります。以下のようなホームページが表示されるように、style.cssファイルにコードを追加してみてください。※解答例は、「06_演習問題解答例」に入れています。参考にしてみてくださいね。[補足]・「サンプル食堂」の背景色は、色コード:#008000(緑)を使用しています。・「サンプル食堂」の文字サイズは、50pxです。・「サンプル食堂」の文字色は、色コード:#ffffff(白)です。・「手頃な値段」の文字サイズは、標準サイズの2倍です。・「手頃な値段」の文字色は、色コード:#ff0000(赤)です。・「メニュー」のリストスタイルは、マークなし(none)です。最後に以上、第3回HTML&CSS講座でした。今回は、CSSの基本的なプロパティを紹介しました。次回は、CSSでレイアウトを変える方法などを説明したいと思います。最新記事をお届けします。飲食店用の無料WordPressテーマを作成しました。店のコンセプト、メニュー、アクセスなど飲食店に必要な最低限の機能を搭載しました。これから飲食店のホームページを開設したい方、この無料テーマを是非活用してみてください。詳しくはこちらへブログ用WordPress無料テーマ「chameleon(カメレオン)」WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。士業用の無料WordPressテーマを作成しました。一般的なビジネスサイトに活用できます。自分でWordPressテーマを作ってみたい方、この無料テーマを是非活用してみてください。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。Inomata)こんにちは、サイト運営者のkoheiです。現在エンジニアとして働きながら、当サイトの運営をやっています。このブログでは、「自分で作る」をテーマに、ホームページやデザイン制作、Webマーケティングなど色んなノウハウを公開しています。「自分で何でも作るのが大好き」な人です。InomaCreateプライバシーポリシ。