第9回(2023/01/18)
補足情報のエリア
HTML の<aside>要素は書のメインコンテンツと間接的な関係しか持っていない文書の部分を表現す。
サイドバーやコールアウトボックスなどを表現するためによく使われる。
<aside> ~ </aside>
【参考資料】
フッターエリア
HTML の<footer>要素は、直近の区分コンテンツまたは区分化ルート要素のフッターを表す。
フッターには通常、そのセクションの著作者に関する情報、関連文書へのリンク、著作権情報等を含める。
<footer> ~ </footer>
【参考資料】
セクションエリア
HTML の<section>要素は、文書の自立した一般的なセクション (区間) を表す。
そのセクションを表現するより意味的に具体的な要素がない場合に使用する。
少数の例外を除いて、セクションには見出しを置く。
<section> ~ </section>
【参考資料】
section：その範囲が一般的な章・節・項などであることを示す要素。
article：その範囲がセクションの中で、独立しており、それだけで完結していることを示す要素。
aside：その範囲がページの中で、メインコンテンツとは関連性が低い補足や広告などを示す要素。
nav：その範囲がナビゲーションであることを示す要素。
記事の投稿日時
HTML の<time>要素は、特定の時の区間を表す。
datetime 属性を使用して、機械可読な形式の日付を記述することができ、検索エンジンの結果を改善したりリマインダーなどの独自機能に使用したりすることができる。
セクションエリア
<section> ~ </section>
文書の自立した一般的なセクション (区間) を表す。セクションには見出しを置く。
【参考資料】
第8回(2023/01/11)
ボックス
ブロック要素
display: block;
インライン要素
display: inline;
文字の色を変更する
color: カラーコードまたはカラー名;
文字の太さを変更
font-weight: 値;
【参考資料】
ヘッダーエリア
HTML の<header>要素は「head」が由来で、導入的なコンテンツ、ふつうは導入部やナビゲーション等のグループを表す。
見出し要素だけでなく、ロゴ、検索フォーム、作者名、その他の要素を含むこともできます。
<header> ~ </header>
【参考資料】
ナビゲーションエリア
HTML の<nav>要素は「navigation」が由来で、現在の文書内の他の部分や他の文書へのナビゲーションリンクを提供するためのセクションを表す。
ナビゲーションセクションの一般的な例としてメニュー、目次、索引などがある。
<nav> ~ </nav>
【参考資料】
メインエリア
HTML の<main>要素は文書の<body> の主要な内容を表す。
主要な内容とは、文書の中心的な主題、またはアプリケーションの中心的な機能に直接関連または拡張した内容の範囲のこと。
<main> ~ </main>
【参考資料】
記事エリア
HTML の<article>要素は文書、ページ、アプリケーション、サイトなどの中で自己完結しており、 (集合したものの中で) 個別に配信や再利用を行うことを意図した構成物を表す。
例えば、フォーラムの投稿、雑誌や新聞の記事、ブログの記事、商品カード、ユーザーが投稿したコメント、対話型のウィジェットやガジェット、その他の独立したコンテンツの項目が含まれる。
<article> ~ </article>
【参考資料】
第7回 (2022/12/21)
余白
内側の余白
上下左右の余白指定
padding: 上下の値 左右の値;
<< 例 >>
padding: 20px 0;
4辺の余白指定
padding: 上の値 右の値 下の値 左の値;
<< 例 >>
padding: 20px 15px 5px 20px;
外側の余白
上下左右の余白指定
margin: 上下の値 左右の値;
<< 例 >>
margin: 20px 0;
4辺の余白指定
margin: 上の値 右の値 下の値 左の値;
<< 例 >>
margin: 20px 15px 5px 20px;
余白の効率的な書き方（marginとpadding）
上下左右が同じ
margin: 10px;
上下と左右が同じ
margin: 10px（上下） 5px（左右）;
左右が同じで上下が違う
margin: 10px（上） 5px（左右）5px（下）;
上下左右すべて違う
margin: 10px（上） 5px（右）5px（下） 15px（左）;
上の余白のみ指定
margin-top: 10px;
右の余白のみ指定
margin-right: 10px;
下の余白のみ指定
margin-bottom: 10px;
左の余白のみ指定
margin-left: 10px;
要素を中央寄せにする
ブロックボックス
margin: 10px auto;
インラインボックス
text-align: center;
横幅の指定
width: 100px;
CSSの複数指定
「,」で区切る。
CSSで使う単位
絶対的なサイズ指定
- px : 1/96インチ
相対的なサイズ指定
- rem : フォントサイズ基準
- % : プロパティによって基準が違う
- em : フォントサイズ基準
- vw : ビューポートの幅に対するパーセント値
- vh : ビューポートの高さに対するパーセント値
第6回（2022/12/14）
参考書：P66 ~ P75
ボックスモデル
HTMLのすべての要素は高さ、幅を持った四角形の中心にコンテンツ（文章、画像等）が入っており、その形状からボックス（箱）と呼ばれている。 そのボックスは独自のルールを持ち、コンテンツ以外の複数の要素で構成されているため、ボックスモデルという概念を用いて説明される。
【参考資料】
ブロックボックスとインラインボックス
ブロックボックス（ブロック要素）
ブロックボックスは幅に関係なく、上から下へ縦方向に配置され、可能な限り横幅いっぱいの領域を取る。
特徴
- 並び方：横いっぱいに広がり縦に積み重なる。（上から下へ）
- 幅と高さの指定：縦幅と横幅の指定ができる。
- 余白の指定：四方に余白を指定できる。
インラインボックス（インライン要素）
インラインボックスは左から右へ横方向に配置され、インラインボックスの前後には改行は伴わず、行内の一部としてレイアウトされる。
特徴
- 並び方：横に並ぶ。
- 幅と高さの指定：要素の中身によって変化する。（指定できない）
- 余白の指定：左右のみ余白を指定できる。
背景色を変更する
<< プロパティ >>
p { background-color : 色; }
CSSで色を変更する
CSSではRGBを数値に置き換えて色を指定する。
カラーコードの指定
#64bdb2
- 16進数で指定する。
- 先頭に「#」をつける。
透明度有りの指定
rgba(100,189,178,0.7)
- 10進数で指定する。
- RGBAの各値を「,」で区切る。
- 透明度は0.7なら70%、1なら100%。
フォント
フォントの種類を指定する
自分のPCでは表示されても、サイトを見ているユーザーのデバイスに存在しないフォントは表示されない。
font-family: フォント名;
- 値にはフォント名が入る。
- 「,」で区切って複数のフォントを指定できる。
<< 具体的な書き方 >>
font-family: 'フォントファミリ名1','フォントファミリ名2',総称ファミリ名;
フォントファミリ名：具体的なフォント名のこと。標準フォントで指定されることが多いがOSのバージョンなどによって変化する。
総称ファミリ名：字形で分類したフォント名のこと。指定されたフォントファミリが存在しなかった場合の代替フォントが表示される。
- フォントファミリ名は「'」または「"」で囲む。
- フォントは先に書いたものが優先される。
フォントのサイズを変更する
font-size: 値;
- 「px」や「rem」などの値やキーワードで指定する。
枠線
border: 太さ 線の種類 色;
ショートハンド
プロパティ
- 太さ：border-width: 3px;
- 種類：border-style: solid;
- 色：border-color: #FFFFFF;
線の種類
- solid（実線）
- double（二重線）
- dotted（点線）
- dashed（破線）
borderの個別指定
border-top: 4px solid #000000; border-left: 2px double #000000; border-right: 3px dotted #000000; border-bottom: 4px solid #000000;
<< 例 >>
border: 3px solid #FFFFFF;
枠線の角を丸くする
border-radius: 値;
<< 例 >>
border-radius: 20px;
第5回 (2022/11/30)
参考書：P66 ~ P75
CSSの基本
CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、ウェブページのスタイルを指定するための言語。 HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定する。
CSSの書き方
・すべて半角で書き、半角スペース・インデント・改行を入れることができる。 ・1つのセレクタに対して「何を」「どうする」は複数個書くことができる。 ・プロパティ名に応じて入れることのできる値が変わる。
<< 使用例 >>
p { color : red; }
【キーワード名一覧】
デベロッパーツール
デベロッパーツールとは、Google Chromeに標準搭載されている開発者用の検証ツール（デバッグツール）で、Webサイトのパフォーマンスを向上させるための多くの機能が搭載されている。
Google Chromeでは「右クリック」→「検証」で起動。 ショートカットは「Ctrl」＋「shift」＋「i」または「F12」（macは「command」＋「option」＋「i」）
【参考資料】
[https://developer.mozilla.org/ja/docs/Web/HTML/Element/p:embed:cite]
CSSの適用方法
文字コードの指定
@charset "utf-8;
@charset：CSSファイルに使用している文字コードを示すための規則。
UTF-8：世界的にも最もポピュラーな文字コードで、Unicode用の符号化方式の1つ。
【参考資料】
CSSファイルをHTMLファイルに読み込む
<link rel="stylesheet" href="css/style.css">
CSSのエラー調査（デベロッパーツール）
①読み込んでいるファイルが存在するか確認する。
②「Styles」に打ち消し線（取り消し線）がないか確認する。
デフォルトCSS
ユーザーエージェントスタイルシート
ユーザーエージェントスタイルシート(user agent stylesheet)とは、ブラウザ毎に定義されているデフォルトのCSS設定のこと。
これによって画像やボタン周りに隙間ができたり、ボーダーカラーが表示されたり、自分の指定したCSSより優先して反映されることがある。
このデフォルトは、自分がどんなブラウザを使っているかによっても異なる。
リセットCSS
余白や文字サイズなどユーザーエージェントスタイルシートに指定されているCSSを全てリセットするCSSのこと。
【参考資料】
第4回 (2022/11/16)
画像の種類
ベクター画像
画像や文字などの2次元情報を数値化して記録している形式のこと。 主に、アイコンや地図、平面的なイラストなどを作成するときにはベクター形式が採用されている。
<< 種類 >>
ai・pdf・svg
SVG
SVG（Scalable Vector Graphics)は画像フォーマットの一種。 画像ファイルであるが、XMLに準拠しており、テキストエディタで編集することも可能。
<< 例 >>
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"> <circle cx="150" cy="200" r="100" fill="#06f"></circle> </svg>
ラスター画像
画像をピクセルという点の集まりで表現する形式のこと。 主に写真などの画像を保存する形式に使われる。
<< 種類 >>
WebP・gif・jpg・png
WebP
画像の圧縮率が高く、表示速度の高速化に有利。
【参考資料】
強調したい文章
em
文字をイタリック体（斜体）にして文章を強調する。
テキストにニュアンスを与えるタグ
strong ・mark・i・b
※strong / b / em / i を検索エンジンは同じように評価するので、基本的にはstrongを使っておけば問題ない。
<< 例 >>
<p>htmlでの<em>見出しタグ</em>の使い方の説明</p>
表
table
1つのテーブル全体を囲う。
thead
表の列の見出しを定義する行のセット。
tbody
表 (
