CSS 【CSS】display:block(ブロック) と display:inlne-block(インラインブロック )の違いとは? 2021年1月28日 displayプロパティにおいて「block」と「inline」については大きな違いがあるから区分けがしやすかった。 それに対して、display:blockとdisplay:inline-blockについては 「block とinline-blockは何が違うの??」 という疑問があったので、この機会に整理してみた。...
CSS 【CSS】変化させる時間を調整するtransition-duration プロパティとは!?使い方は? 2021年1月25日 会社のHPのCSSのコードを見ていて transition-duration: 6s; って表記があったのだが、 「transition-duration、、、いったいこれは何なんだ?」 と単語の意味から理解できていなかったので調べてみた。 transition-durationは変化させる時間を指定する transi...
CSS 【CSS】枠線の種類や太さ、色を設定するborderの指定方法をわかりやすく解説! 2021年1月16日 「どんなサイトでも必ず使われている!」 と言っても過言ではない枠線を設定するborder! このborderだけど、初心者の頃は指定の仕方が曖昧で 「あれ?どうやって色を指定すればいいんだっけ?」 「まとめて設定する時ってカンマで区切るんだっけ?」 とつい混乱しがちだ(少なくとも僕の場合はそうだった(笑)) そこで今回...
HTML 【HTML】dl・dt・dd要素の違いと使い方とは!?初心者にもわかりやすく解説! 2021年1月13日 自分の会社のHPコードを修正していて <dl> <dt>料金</dt> <dd>3,000円</dd> </dl> というコードを見た。 リストのようにも表のようにも使われている dt要素 dl要素 dd要素 とはいったいなんだ? 「どういう意味で...
CSS 【CSS】外側の余白を作る margin を上下左右まとめて指定する方法をわかりやすく解説! 2021年1月13日 今回はmarginを上下左右まとめて指定する方法について! 枠線(border)の外側の余白を作る margin は内側の余白を作る padding と合わせてめちゃくちゃよく使う。 僕にとってはmarginとpaddingの違いを理解し、Google Chromeの検証ツールでmarginとpaddingが実際のサイ...
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」に...