カテゴリー: 学科 HTML/CSS基礎

学科 HTML/CSS基礎③【オンライン】

-本日のアジェンダ-

1限目
学科 HTML/CSS基礎③
HTMLとCSSを記述するための基本事項

2限目
学科 HTML/CSS基礎③
CSSの基本構造について

3限目
学科 HTML/CSS基礎③
CSSの基本構造について

4限目
学科 HTML/CSS基礎③
Chrome検証ツールについて

5限目
学科 HTML/CSS基礎③
本日の講義のまとめ

【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：とにかくグラフィックソフトを使うHTMLとCSSの理解
内容1：HTMLとCSSについて
内容2：HTMLとCSSについて
内容3：
課題：なし
【注記】
・CSSの基本的な知識を説明します。
・情報過多にならないように、単なWebページ作成に必要な最低限の説明だけにしてください。

本日のテーマ

HTMLとCSSを結び付けていきましょう

HTMLとCSSの基礎について

【まとめサイト】

【動画】

CSSの基本構造について

  • HTML ファイルとは別に記述する場合
  • HTML ファイル内に記述する場合
  • HTML タグにインラインで記述する場合

セレクタ {
　　プロパティ: 値;
　　プロパティ: 値;
　　　・
}

（例）
【HTML】
<p class=”abc”>文字列１</p>
<p class=”def”>文字列２</p>

【CSS】
p.abc {
　　color: white;
　　background: red;
}
p.def {
　　color: yellow;
　　background: blue;
}

参考サイト

CSS：セレクタの記載方法

  • 全称セレクタ
  • 型セレクタ
  •  id セレクタ（#）
  • class セレクタ（.）
  • 子孫結合子セレクタ

参考サイト

CSS：幅・高さの単位

  • px（ピクセル値）
  • %（要素の割合（百分率））
  • em（要素の割合）
  • rem（ルート要素の割合）
  • calc 関数（値の計算）

参考サイト

CSS：色の指定方法

  • カラーネーム
  • #rgb（ハッシュ（#）で始まる 16 進数 3 桁）
  • #rrggbb（ハッシュ（#）で始まる 16 進数 6 桁）
  • #rrggbbaa（ハッシュ（#）で始まる 16 進数 8 桁）
  • rgb(r,g,b)（rgb 関数）
  • rgba(r,g,b,a)（rgba 関数）

参考サイト

リセットCSS

ブラウザは初期状態でタグ単位のデフォルトのスタイルシートを持っています。このデフォルトのスタイルシートの内容はブラウザによって異なるためブラウザ環境を変更すると意図しない表示になることがあります。このような現象を防ぐために使用するのがリセット CSS です。

参考サイト

セレクタの得点

セレクタには優先順位があり点数計算をして高得点のものが採用されます。同じ得点の場合は後ろに書いてあるものが採用されます。点数計算の結果によっては前に書いてあるセレクタが採用されてしまうことがありますので意図したスタイルにならない時は点数を確認してください。

参考サイト

Chrome 検証ツール

ブラウザに表示されるWebページの設定情報を参照したり、想定通りに表示されない場合の調査には、Chrome の検証ツールの使用が有効です。また、スマートフォンやタブレットでの表示型式を確認することもできます。

参考サイト

CSS：バックグランド系プロパティ

  • background-color プロパティ（背景色）
  • background-attachment プロパティ（背景画像の位置）
  • background-image プロパティ（背景画像のファイル）
  • background-repeat プロパティ（背景画像の繰り返し）
  • background プロパティ（背景の一括指定）
  • background-size プロパティ（背景画像のサイズ）
  • background-position プロパティ（背景画像の表示開始位置）

参考サイト

CSS：テキスト系プロパティ

  • color プロパティ（文字の色）
  • opacityプロパティ（透明度）
  • text-align プロパティ（文字の配置）
  • text-decoration-color プロパティ（文字飾りの色）
  • text-decoration-style プロパティ（文字飾りの線種）
  • text-decoration-thickness プロパティ（文字飾りの線の太さ）
  • text-decoration プロパティ（文字の飾りの一括指定）
  • text-shadow プロパティ（文字の影）

参考サイト

CSS：フォント系プロパティ

  • font-family プロパティ（フォントの種類）
  • font-size プロパティ（フォントのサイズ）
  • font-weight プロパティ（フォントの太さ）
  • font-style プロパティ（フォントのスタイル）
  • line-height プロパティ（行の高さ）
  • font プロパティ（フォント一括指定）

参考サイト

CSS：リスト系プロパティ

  • list-style-type プロパティ（リストマーカーの種類）
  • list-style-image プロパティ（リストマーカーの画像）
  • list-style-position プロパティ（リストマーカーの位置）
  • list-style プロパティ（リストマーカーの一括指定）

参考サイト

CSS：レイアウト系プロパティ

  • width プロパティ（内容の幅）
  • max-width プロパティ（幅の最大値）
  • min-width プロパティ（幅の最小値）
  • height プロパティ（内容の高さ）
  • max-height プロパティ（高さの最大値）
  • min-heightプロパティ（高さの最小値）
  • float プロパティ（回り込み）
  • clear プロパティ（回り込みを解除）
  • position/top/left/bottom/right プロパティ（要素の配置方法）
  • z-index プロパティ（重なりの順序方法）
  • display プロパティ（要素の表示方法）
  • overflow プロパティ（ボックスからあふれた内容の処理方法）

参考サイト

CSS：ボーダー系プロパティ

  • border-style プロパティ（ボーダースタイル）
  • border-color プロパティ（ボーダー色）
  • border-width プロパティ（ボーダー幅）
  • border プロパティ（ボーダー一括指定）
  • border-top/-bottom/-left/-right プロパティ（ボーダー上下左右一括指定）

参考サイト

CSS：パディング系プロパティ

  • padding-top/-bottom/-left/-right プロパティ（パディング上下左右）
  • padding プロパティ（パディング一括指定）

参考サイト

CSS：マージン系プロパティ

  • margin-top/-bottom/-left/-right プロパティ（マージン上下左右）
  • margin プロパティ（マージン一括措定）
  • マージンの相殺
  • マイナスマージン
  • ボックスの中央配置
  • ボックスの右端配置

参考サイト

CSS：その他のプロパティ

  • border-radius プロパティ（ボーダーの丸み）
  • box-shadow プロパティ（ボックスの影）
  • box-sizing プロパティ（ボックスサイズ計算）
  • content プロパティ（挿入コンテンツ）
  • object-fit プロパティ（画像トリミング）
  • object-position プロパティ（画像の配置位置指定）

参考サイト

本日の課題

本日学んだ内容を復習して整理しておきましょう。
WordPressの投稿ページに学んだことをまとめておくと良いです。

学科 HTML/CSS基礎②

-本日のアジェンダ-

1限目
学科 HTML/CSS基礎②
ファイル管理について

2限目
学科 HTML/CSS基礎②
Webページ制作実践

3限目
学科 HTML/CSS基礎②
Webページ制作実践

4限目
学科 HTML/CSS基礎②
Webページ制作実践

5限目
学科 HTML/CSS基礎②
本日の講義のまとめ

【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：とにかくグラフィックソフトを使うHTMLとCSSの理解
内容1：HTMLとCSSについて
内容2：HTMLとCSSについて
内容3：
課題：練習問題提出
【注記】
・HTML/CSS基礎①で学んだ内容を実践します。
・「本日の課題」のためにWebページのフルスクリーンキャプチャの取得方法（検証ツール）を説明してください。

本日のテーマ

HTML記述してみましょう

ファイル管理について【復習】

Webサイト開発時には、HTMLファイル、CSSファイル、JavaScriptファイル、画像ファイルなど多くのファイルを使用します。また、各ファイルは随時変更されるので適切なバックアップも必要です。

フォルダ名やファイル名の命名規則やフォルダ構成などを決めて管理しておかないと、どのファイルが、どこにあるのかわからないという状況になってしまいます。また、作業時には理解していても後日に確認すると「わからない！」というのは良くある話です。

本サイトの右側にある「ファイル管理について」などを確認して適切なファイル管理ができるようになりましょう。

ファイルのパス指定について【復習】

ファイルを指定するためには、絶対パスでの指定方法と相対パスでの指定方法があります。それぞれの特徴を理解して使い分けましょう。

参考サイト

ブロックレベル要素とインライン要素について【復習】

要素の多くは、ブロックレベル要素とインライン要素に分類されます。
ただし、HTML5ではブロックレベル要素とインライン要素という考え方はなくなっていますので、あくまでも性質を持っていると考えておきましょう。

よく使うブロックレベル要素の例

用途要素名
見出しh1〜h6要素
段落p要素
箇条書きul, li要素
汎用タグdiv要素

よく使うインラインレベル要素の例

用途要素名
リンクa要素
画像img要素
汎用タグspan要素

Webページ制作実践①

実際にhtmlファイルを作成して、Webページ制作の手順を確認していきましょう。

①HTMLの基本構造について

ファイルを新規で作成し、HTMLの基本構造を記述してみましょう。

<!doctype html>
<html>
    <head>
        文書のヘッダ情報（メタデータ）を記述する場所
    </head>
    <body>
        文書の本体情報を記述する場所
    </body>
</html>

ここまでできたら、htmlファイルを保存しましょう。
保存の際、文字コードと、htmlの拡張子（.html）指定を忘れずに！

②文書のヘッダ情報について

参考元を確認し、文章のヘッダ情報を記述していきましょう。
htmlファイルを一冊の本に例えると、ヘッダ情報は本のタイトルや、出版社情報、著者情報などにあたります。本体情報は本の中身にあたります。

③本体情報について

文章の本体情報を、タグを使って記述していきましょう。
htmlファイルを一冊の本に例えると、文書の本体情報は本の中身にあたります。

④構造化タグにグループ化タグについて

それぞれのタグを使って、文章のまとまりを作ってみましょう。

構造化タグ　<header>、<main>、<footer>

グループ化タグ　<div>

ここまでできたら、htmlファイルを保存し、該当のファイルをChromeで開いてみましょう。

⑤htmlで画像を表示させる

imgタグを使って該当画像のパスを指定し、htmlで画像を表示させてみましょう。

⑥htmlで特殊文字を表示させる

htmlで特殊文字を表示させてみましょう。

トレーニング-１

実際のWebページを作成しましょう。

トレーニング用ファイルのダウンロードおよび解凍を行ってトレーニングを実施してください。トレーニングの実施方法は、解凍したフォルダに格納されている「readme.pdf」を参照してください。

カリキュラム資料 ダウンロード用サイト
https://samplesdl-web.com/doc/

下記のファイルをダウンロードしましょう。
「training-1.zip」　

本日の課題

Webページ制作実践で作成したページのキャプチャを取得してWordPressの投稿ページに貼り付けを行いましょう。（出来たところまでで大丈夫です）