HTML 【HTML】表の構造を明確化するthead/ tbody / tfoot要素 とは?わかりやすく解説! 2021年1月11日 表やHTMLメール(画像を組み込んだページ)でよく使われている thead要素 tbody要素 tfoot要素 について 「それぞれどういう意味があるのか?」 「利用するメリットは何か?」 を整理したいと思う。 thead要素とは? thead要素は「table head」の略で、表の見出しをグループ化する機能がある。...
CSS 【CSS】内側の余白を作る padding を上下左右まとめて指定したい場合の書き方は!? 2021年1月9日 今回はpaddingを上下左右まとめて指定する方法について整理する! 内側の余白を作るpaddingはCSSでもうめちゃくちゃたくさん使う。 paddingをpadding-topなど個別で指定するのはわかりやすい。 でも、上下左右をまとめて指定したい場合の書き方は順番を覚えていないと混乱しがちだ。 【CSS】 pad...
CSS 【CSS】セレクタ・プロパティ・バリューとは!?意味や違いについてわかりやすく解説 2021年1月7日 CSSの基本である セレクタ プロパティ バリュー の意味とそれぞれの違いについては早めに整理しておいた方が勉強効率が上がる。 なぜなら、ほとんどのCSS本やネット記事でも 「セレクタを~」 「プロパティが~」 「バリューに~」 というように3つの用語がバリバリ出てくるからだ。 だから、3つの用語の意味がわかっていない...
CSS 【CSS】疑似クラスfirst-childとは? 2021年1月5日 理解して使えるようになれば、非常に便利な疑似クラス。 前回【CSS】疑似クラス last-child とは?初心者でもわかりやすく解説!の記事で、 「該当要素の最後にCSSを適用させる last-child」 について整理したが、今回は 「first-child」 についてプログラミング小僧が理解したことを整理しようと...
CSS 【CSS】疑似クラス last-child とは?初心者でもわかりやすく解説! 2021年1月4日 リストや表などのデザインで威力を発揮する「last-child」という疑似クラス。 CSSをしばらく勉強していても、この疑似クラスというのが理解しにくかった。 「疑似って何??」 といつも思っていたものだ(笑) しかし、ちゃんと理解してしまえばそんな難しくなかった。 今回は疑似クラスの中の「last-child」につい...
HTML 【HTML】親要素と子要素とは!?祖先要素・子孫要素との違いは何? 2021年1月2日 今回はHTMLの子孫要素について。 HTMLの要素同士の関係性が整理しきれていなかったので、今回は親要素と子要素について整理したいと思う。 親要素とは? HTMLのコード(HTML文書)は要素同士が階層構造になっている。 そもそも要素というのは<p>~</p>などのセットのことを呼び、「~」の部...
JavaScript 【JavaScript】変数を定義する「var」「 let」「 const」 の違いとは? 2021年1月1日 JavaScriptで変数を定義する方法は現状3つある。 var let const この3つの違いが正直あやふやだったので、整理していきたいと思う。 変数を定義する「var」「let」「const」とは? JavaScriptでは変数を使いたい場合、「var」「let」「const」のどれかを使って変数名を宣言するこ...
JavaScript 【JavaScript】配列の全要素をHTMLに箇条書きで表示する方法は?ステップごとに解説する! 2020年12月29日 配列の全要素をHTMLに箇条書きで表示する方法について、私が 「なるほど!こういう構造だったのか!」 と理解したことを整理してまとめたいと思う。 若干長くなるが、JavaScriptでの配列とHTMLへの書き込み方法が整理できるはずだ。 完成像の確認 まずは配列の全要素をHTMLに箇条書きで表示した場合の 完成後のプラ...
JavaScript 【JavaScript】「i++」ってどういう意味?インクリメント演算子を理解する! 2020年12月28日 繰り返しに使うfor文やwhile文でよく使われる 「i ++」 はどういう意味なのか? JavaScriptを勉強し始めた時は 「なんじゃこれは??意味わからん!」 と思っていて、for文やwhile文の理解がなかなか進まなかったので、備忘録として記録しておく。 「i ++」とは? まず「i++」を分解すると 「i」...
HTML 【HTML】表を作る時に活用する「tr」「th」「td」 の違いは? 2020年12月26日 表づくりに欠かせないのが「table」要素。 この「table」要素に「tr」「th」「td」の3つの要素を組み合わせて表を作るのだが、この3つが本当に紛らわしい。 この3つの要素(<th>~</th>までのひとかたまりを指す)は会社のサイト管理を任されてからずっと整理できず、使い方が怪しかった...