◉< figure >〜</figure > figure要素は、写真、挿絵、図表、コードなどのまとまりを表す。 figure要素によるまとまりは、単体で独立したものでならない。 つまり、その部分を文書から切り出したとしても元の文書に影響がないとともに、 切り出した内容自体で意味が通る…

<img src="images/img_01_01.jpg" alt="" width="720" height="390"> <img src="images/img_01_02.jpg" alt="確認写真。" width="720" height="390"> 上記の例で考える。 ◉ src 属性 <img> タグでは、src 属性をつけて、 埋め込み画像ファイル（フォルダ／ファイル名）があることを示す。 ◉ alt 属性 alt 属性には画像の代替テキストを入力する。 これは、主に、 スクリーンリーダー（目が不自由な方のための音…

ウェブページでは主に３つの画像形式が用いられる。 ◉「GIF（ジフ）」 単位：「 .gif 」 GIFは、256色までの色を扱うことのできる圧縮画像形式。 主にイラストやアイコン、ロゴなど、 色のはっきりした画像を保存するのに用いられる。 GIFでは、使用する色数…

コンピュータでは、領域をマス目で区切り、ひとつひとつの色を変えることで 様々な画像を表現している。 マス目が塗り分けられて表現されるので、 マス目が細ければ細いほど、 多彩な画像と言える。 このマス目１つを「１ピクセル（画素）」という。 ◉ 解像…

ブラウザによっては、 文字のサイズが同じでも、文字の高さが異なり、 行間が詰まって見えることがある。 これを解消するのが 「 line-height 」で、 上下にどれくらいの余裕を持たせるのかを指定できるプロパティ。 上下の余白も含めたサイズである。 ◉ lin…

世間には、 Google Chrome, Internet Exploer, Safari, Firefox, Operaなど 様々なブラウザがあり、 ブラウザによって少しずつ見た目に差異が出てきてしまう。 若干見た目が違ってくるのは、 各HTMLタグに対して設定されているCSSの標準値がブラウザによって…

「 font-weight 」で文字の太さを指定する。 値は、 「 normal 」 細字（標準の太さ） 「 bold 」 太字 「 lighter 」相対的に、一段階細字にする 「 bolder 」相対的に、一段階太字にする また、 100, 200, 300, 400, 500, 600, 700, 800, 900 と 直接数字…

文字の行揃えを指定するプロパティ「text-align」。 表だけでなく、段落や見出しなどの行揃えも指定することができる。 主に４つ種類ある。 ● left 左揃え。 ● center 中央揃え。 ● right 右揃え。 ● justify 均等割付け。

◉ 「border-collapse」 のプロパティ 表の隣接するセルの罫線を重ねて表示するか？（collapse） 離して表示するか？(separate) を指定する。 なお、ブラウザの標準プロパティでは「separate」が指定されている。 ●「collapase」結合ボーダーモデル CSSにおい…

◉関連プロパティ ●リスト記号 list-style-type ●リスト記号の画像 URL list-style-image ●リスト記号の位置 list-style-position ●まとめて指定 list-style ◉ list-style-type の種類 ● none 項目１ 項目２ 項目３ ● disc ⚫︎項目１ ⚫︎項目２ ⚫︎項目３ ● circ…

◉ padding と margin を複数指定した場合 余白の調整１で記述した通り、 border を基準にして考えるとどちらに余白が広がるのかがわかる。 ボックスモデル コンテンツ領域（要素、タグ）、margin、border、paddingの4つで領域部分から生成される矩形領域のこ…

余白の概念を学ぶときに混乱してしまうのが、 padding と margin である。 border-style で文字を囲ったことを考えてみると、 ◉padding boderの内側の余白を調整 ◉margin borderの外側の余白を調整 また、borderの内側には背景（background）をつけることが…

◉「border-width」で上下左右を囲った際に、線の太さを適用する際の書き方 値はスペースで区切って複数で指定し、書き方によって指定箇所が変わる。 ● 上下左右 border-width: 10px; ● 上下 左右 border-width: 10px 5px; ● 上 左右 下 border-width: 10px 5…

罫線はborderで指定し、 ２０パターン用意されている。 ◉線種類 ● 上下左右 ： border-style ● 上 ： border-top-style ● 下 ： border-bottom-style ● 左 ： border-left-style ● 右 ： border-right-style ◉線の太さ ● 上下左右 ： border-width ● 上 ： b…

◉色の構成 コンピュータの世界における、出力される色はRGBで表現している。 RGB ＝ Red、Green、Blue の３原色 この３原色の輝度（明るさ）によって、値を変化させ、 ３色を掛け合わせるとこで、フルカラーを表現している。 各原色はそれぞれ0〜２５５の２…

style.css というファイルを新規に作成し、 HTML 側で外部のファイル（style.css）を読み込むことで デザインは適用していた。 このように、HTML ファイルとは別にCSSファイルを作成することを、 「CSSの外部ファイル化」と呼ぶ。 実は、この記述方法以外に…

タグで指定したところをすべて変更してしまうと、 タグがいっぱい増えて大変なので、タグにclass を付けて分類する。 ⭐️html ファイルにおいて ◉クラス名をつける <h1 class= " 分かり易い名前をつける "> 〜 </h1> ※閉じタグはそのままで良い。 ◉class 名の付け方 ・半角英数字 ※１文字目は特に絶対小文…

基本的なルールを覚える。 ◉html ファイルに style.css で読み込むということを指定する。 <link rel="stylesheet" href="../ファイルの場所/css/style.css" > ◉文字サイズの変更 pタグの部分はブラウザの標準では16px。 多くのサイトでは、13〜16pxで程度で作成されている。 ◉CSSサイトでのコメント /* コメント */ で挟む。</link>…

◉タグは入れ子にする ◉開始タグと終了タグは一致させる ◉入れ子にできるタグが決まっているタグがある trタグの中には、th か td のどちらかでなければならない 他のタグは入れられない！！ NG ex1) <table> <tr> <h1>見出し項目</h1> <p>データ項目</p> </tr> </table> OK ex1) <table> <tr> <th>見出し項目</th> <td>データ</td></tr></table>…

構造を表す内容のものは、明示的にマークアップすることで、 さらに文書構造が見やすくなる。 ◉header セクションの見出しや導入部分、ページのロゴやタイトル、目次、検索フォームなど。 ◉footer 記事を書いた人の名前や関連リンク、コピーライトなど。

セクションとは、 文章のひとまとまりのこと。 ページ内の文章で章・節・項など、 まとめられるところを明確に分類することで、読みやすく区切りを付けるもの。 セクションを表すタグ４種類 ◉ariticle ◉aside ◉nav ◉section ◉ariticle 内容が単体で完結する…

◉表をさらに細かく分ける場合 ●表ヘッダー <thead> 〜 </thead> ●表ボディー <tbody> 〜 </tbody> ●表フッター <tfoot> 〜 </tfoot> と分けたタグで囲むことができる。 ◉エクセルでいうセルの結合を行う ※<th>, <td>タグの中で行える属性であることに注意！ ●colspan属性 横のセルの結合 セルの結合の数によって数</td></th>…

あとで、枠を作成するとして、 表の枠の中身についての記述の仕方。 ◉表を作る ●表 <table> 〜 </table> で囲む ●キャプション <caption> 〜 </caption> で囲む ※キャプションはなくても可 ●行全体 <tr> 〜 </tr> で囲む ●見出し項目 <th> 〜 </th> で囲む ●データ項目 <td> 〜 </td> で囲む 【コーディング】 <table> ・・・・表</table>…

◉箇条書きリスト 箇条書きをしたいときにリストを作成する リスト全体を<ul> 〜 </ul> で囲み、 各箇条書き項目は <li> 〜 </li> で囲む。 <ul> ・・・・・・リスト開始 <li> </li> ・・・・箇条書き１ <li> </li> ・・・・箇条書き２ <li> </li> ・・・・箇条書き３ <li> </li> ・・・・箇条書き４ </ul> ・・・・・・リスト…

◉見出し(heading) <h1> </h1> <h2> </h2> : : <h6> </h6> と６段階まで文字サイズを指定することができる。 ◉段落(paragraph) <p> </p> pで括った部分のp要素は、標準的な文字サイズで表示されるが、 次のp要素との間に段落として、わかりやすい適度な隙間を作ってくれる。 ◉改行(break) <br> 段落…

◉要素 HTMLは、基本的に開始タグ〜終了タグで囲まれている。 囲まれている全体を「要素」と呼部。 <html> ・・・開始タグ ← ｜ ・・・内容 ｜ ・・・要素 ｜ </html >・・・終了タグ ← ◉属性 HTMLタグは、直後に属性を指定して、 どのような特性を持っているのかを指定する…