web制作のしおり

日々の学習をアウトプットします。

10.marginについて本当に理解している? ~最低限確保する距離~

marginとは 前回の記事でも書きましたが、 paddingは「領域の確保」 marginは「最低限確保する距離」が妥当な表現かなと思います。 一般には「margin」は「padding」とセットで 「外側の余白・内側の余白」と言われています。 私はこの捉え方は混乱を招くと…

9.marginとpadding ~あなたは大丈夫?意外と間違えるpaddingについて~

marginとpaddingとは 何?と聞かれてすぐに答えられますか。 一言で表すなら、「距離の確保」と「最低限確保する距離」が妥当かなと思います。 どちらも余白という言葉を使って表されることが多く、 外側の余白・内側の余白と表現されていますね。 今回はpad…

8.CSSとHTMLタグの関係 ~切っても切れない関係~

何の為に書くのか HTMLやCSSを何のために書くのか? 考えたことはありますか。 私は現在デイトラで学んでいますが、 大半の時間が「見え方」を変更する為に書いています。 ということは、殆どのコードが「デザイン目的の内容」ということです。 そして、今回…

7.HTMLタグの属性「class」とは~自分でタグをグループ分けできる~

先日、HTMLタグの中身について整理した記事を書きました。 本日はタグの属性の部分、特にclassについて整理します。 属性のおさらい HTMLタグの「属性」にはブラウザに「どんな種類の付加情報があるか」を伝え、 さらに「値」を設定することで、「付加情報の…

6.HTMLタグに込められた「内なる想い」を知る ~HTMLタグの中身~

HTMLタグの中身とは? 製作者の「こういう風にしたい」という思いをブラウザに伝えるテキスト。 ブラウザへ伝えたい情報を「括弧の内側」に書いたもの。 まさに、内なる想い(違) ※ブラウザやHTMLとの関連は以前の2つの記事が参考になると思います。 2.web…

5.昔話と侮るなかれ ~HTMLの要素には「かたさ」が存在した!?~

ブロックレベルとインライン 昔々のお話です。 HTMLの「要素※」には「ブロックレベル」と「インライン」という 2種類の「分け方」が存在しました。 しかし、現在は使われていません。 (※要素が何かについては前回の記事を御覧いただければと思います。) じゃ…

4.HTMLの要素と親子関係について

テキストなのに親子が存在する 親子ってなに!? ハイ、私です。 今回はHTMLの要素と親子関係について整理していきます。 要素って何? まずは、親子関係の前に要素について知りましょう。 要素って言うと難しく感じるかもしれません。 要素 = 1個の「かた…

3.webページ主に2種類のテキストファイルでできている ~その2~ CSS

web界隈のテキストファイル2大巨頭 前回は2種類のテキストファイルの1つHTMLについて学習しました。 今回は残るCSSについて掘り下げていきます。 前回に引き続き、専門用語を避けて、全体感を掴むことを目指します。 CSSって? 例によって書きます。Casca…

2.webページ主に2種類のテキストファイルでできている ~その1~ HTML編

webページはテキストファイル 前回の学習で、webページはあるルールに基づいて書かれたテキストファイルだと書きました。 今回は専門用語をなるべく使わずに、まずは全体感を掴むことを目的とします。 webページに使われるテキストファイルには以下の2種類…

1.まずは道具について知り、備えるべし ~エディタとブラウザ~

必要な道具は? webページを作る為に最低限必要な道具は?と聞かれたら、以下の2つだと答えます。 エディタ ブラウザ この2つを揃えてしまえば、web制作を学ぶには十分です。 (きれいな写真やイラストとかのデザイン部分は除きます) え、本当に?と私も疑…