「どんなサイトでも必ず使われている！」 と言っても過言ではない枠線を設定するborder！ このborderだけど、初心者の頃は指定の仕方が曖昧で 「あれ？どうやって色を指定すればいいんだっけ？」 「まとめて設定する時ってカンマで区切るんだっけ？」 とつい混乱しがちだ（少なくとも私の場合はそうだった(笑)） そこで今回...

HTMLにおける下記3つの要素が混乱しやすいので、備忘録も兼ねて整理しておこうと思う。 dt要素 dl要素 dd要素 dl要素・dt要素・dd要素の意味とは？ dl要素・dt要素・dd要素は何かを説明するためにセットで使われる「説明用のリスト（描写用のリスト）」だ。 単独でdl要素だけを使ったり、dd要素だけを使うこと...

今回はmarginを上下左右まとめて指定する方法について！ 枠線(border）の外側の余白を作る margin は内側の余白を作る padding と合わせてめちゃくちゃよく使う。 私にとってはmarginとpaddingの違いを理解し、Google Chromeの検証ツールでmarginとpaddingが実際のサイ...

表やHTMLメール（画像を組み込んだページ）でよく使われている thead要素 tbody要素 tfoot要素 について 「それぞれどういう意味があるのか？」 「利用するメリットは何か？」 を整理したいと思う。 thead要素とは？ thead要素は「table head」の略で、表の見出しをグループ化する機能がある。...

今回はpaddingを上下左右まとめて指定する方法について整理する！ 内側の余白を作るpaddingはCSSでもうめちゃくちゃたくさん使う。 paddingをpadding-topなど個別で指定するのはわかりやすい。 でも、上下左右をまとめて指定したい場合の書き方は順番を覚えていないと混乱しがちだ。 【CSS】 pad...

CSSの基本である セレクタ プロパティ バリュー の意味とそれぞれの違いについては早めに整理しておいた方が勉強効率が上がる。 なぜなら、ほとんどのCSS本やネット記事でも 「セレクタを～」 「プロパティが～」 「バリューに～」 というように3つの用語がバリバリ出てくるからだ。 だから、3つの用語の意味がわかっていない...

理解して使えるようになれば、非常に便利な疑似クラス。 前回【CSS】疑似クラス last-child とは？初心者でもわかりやすく解説！の記事で、 「該当要素の最後にCSSを適用させる last-child」 について整理したが、今回は 「first-child」 についてプログラミング小僧が理解したことを整理しようと...

リストや表などのデザインで威力を発揮する「last-child」という疑似クラス。 CSSをしばらく勉強していても、この疑似クラスというのが理解しにくかった。 「疑似って何？？」 といつも思っていたものだ(笑) しかし、ちゃんと理解してしまえばそんな難しくなかった。 今回は疑似クラスの中の「last-child」につい...

今回はHTMLの子孫要素について。 HTMLの要素同士の関係性が整理しきれていなかったので、今回は親要素と子要素について整理したいと思う。 親要素とは？ HTMLのコード（HTML文書）は要素同士が階層構造になっている。 そもそも要素というのは<p>~</p>などのセットのことを呼び、「～」の部...

JavaScriptで変数を定義する方法は現状３つある。 var let const この3つの違いが正直あやふやだったので、整理していきたいと思う。 変数を定義する「var」「let」「const」とは？ JavaScriptでは変数を使いたい場合、「var」「let」「const」のどれかを使って変数名を宣言するこ...