ウェブページでは主に３つの画像形式が用いられる。 ◉「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つで領域部分から生成される矩形領域のこ…

いい加減、休職して１ヶ月が経とうとしている。 その間にやったこと、 ひたすら断捨離と部屋の模様替え、 掃除、など。 あと、マスク探しにドンキー３軒回った。 おかげさまでたんまり。 洗えるのもGEtしたので、 5月末まではもつだろう。 これも化粧しない…

余白の概念を学ぶときに混乱してしまうのが、 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 内容が単体で完結する…