今回はpaddingを上下左右まとめて指定する方法について整理する！ 内側の余白を作るpaddingはCSSでもうめちゃくちゃたくさん使う。 paddingをpadding-topなど個別で指定するのはわかりやすい。 でも、上下左右をまとめて指定したい場合の書き方は順番を覚えていないと混乱しがちだ。 【CSS】 pad...
Programing Youngster
Programing Youngsterの記事一覧
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」のどれかを使って変数名を宣言するこ...
配列の全要素をHTMLに箇条書きで表示する方法について、私が 「なるほど！こういう構造だったのか！」 と理解したことを整理してまとめたいと思う。 若干長くなるが、JavaScriptでの配列とHTMLへの書き込み方法が整理できるはずだ。 完成像の確認 まずは配列の全要素をHTMLに箇条書きで表示した場合の 完成後のプラ...
繰り返しに使うfor文やwhile文でよく使われる 「i ++」 はどういう意味なのか？ JavaScriptを勉強し始めた時は 「なんじゃこれは？？意味わからん！」 と思っていて、for文やwhile文の理解がなかなか進まなかったので、備忘録として記録しておく。 「i ++」とは？ まず「i++」を分解すると 「i」...
表づくりに欠かせないのが「table」要素。 この「table」要素に「tr」「th」「td」の3つの要素を組み合わせて表を作るのだが、この３つが本当に紛らわしい。 この3つの要素（<th>~</th>までのひとかたまりを指す）は会社のサイト管理を任されてからずっと整理できず、使い方が怪しかった...
CSSのコードを見ていて、 audio:not() { display: none; height: 0 } とか { display: none } というコードを見るのだが 「いったい、という感じでで囲うことで何を意味しているんだ？」 と疑問に思っていた。 「CSSのってどんな意味？」 って調べても、なかなか疑問を...