こんにちはマダラです。
エンジニアとは日々勉強を重ねるもので、私も常に勉強していかなくてはなりません。
そこで基本的な内容ですが、私が忘れがちな勉強内容をブログにアウトプットすることで定着させるプログラミング備忘録第一弾です。
サブテキストをつけるコツ
HTML
テストテキスト
css:
p:after{
content:attr(data-text)'';
display:block;
text-align:center;
}
:beforeや:afterを用いれば、要素の前後に装飾を付与することができるのは知っていましたが、それを応用したテクニックです。
HTMLに適当なdata-textやsub-textといった属性を付与しておき、cssのcontent:attr()で属性を指定します。
すると属性情報が追加できます。ちなみに''の中に文字を入力するのが通常の手法ですが、display:block;を与えることで下の行に移動させることができ、見出しのサブテキストといったレイアウトを簡単に実現できます。
autofocus
フォームを作った際に役に立ちます。input要素のautofocus属性を指定すると、ウェブページが表示された際に指定した入力欄にカーソルが当たって自動的にフォーカスさせることができます。私は知っててもいざ自分でフォームを作るときに忘れがちです。
input type="search" name="q" autofocus
box-sizing:border-box;
widthの長さをpaddingやborderの長さを含めたサイズにします。よって、paddingやborderを変化させても要素自体のwidthが変化しなくなります。
paddingやborderを逐一計算したwidthを指定するのはミスを誘発しますので、こちらを指定しておくとboxのズレを調節できます。
marginの相殺
ブロックの top と bottom のマージンは結合されることがあり、結合されるマージンのうち大きなほうのサイズを持った一つのマージンになるといものです。
レイアウトが微妙に崩れる理由がわからない時はだいたいこれですね。
要素の表示などで調べて、随時対応しましょう。知っておくのと知っていないのではハマる率が違ってきますね！
ホバー効果0.9と1
これは、人それぞれですが私はこれまでホーバーエフェクト時は、同じような薄い色などをカラーコードで探してきては入力していましたが、こっちの手法を使った方が簡単です。
元の色の透明度を0.9,ホバー時を1にするだけです。
逐一同系色を調べる手間が省けるのでこちらの方がいいですね！
p{opacity:0.7; background-color:blue;}
透明度はopacityで指定します。
:nth-of-type()
:afterや:beforeのように要素に付属させるタイプのcssです。
()内がoddで奇数。evenで偶数を指定できます。こちらもよく使うので押さえておきましょう。交互に切り替えるレイアウトで便利ですね。
:not(last-child)
nth-of-type()と似ているcssですね。notでlast-childを指定することで、ページ内の最後の指定要素だけcss内容を変更できます。
下線の区切りといった一番下の要素だけ不要な要素を指定するときに便利です。
:over-flow:hidden;
よく使用されるテクニックでover-flow:hidden;がついた要素はfloatで回りこまなくなります。
テキストに対して使用して、画像の回り込みを防ぐときなどに使えます。
display:flex;と justify-content:space-between;
よく使うのでメモメモ。flexボックスにspace-betweenを指定することで均等配置ができます。flexboxでもっとも使用する指定ではないでしょうか？
relative; とabsolute;
親ブロックにposition:relative;、このブロックにposition:absolute;を指定します。
そしてこの方に、right:0;left:0;margin:0 auto;を指定すると中央配置にすることができます。topやbottomを調節して親ボックス上の枠線に重ねたり、ランキング表示で左角に装飾を加えるなどのテクニックに使用できます。
まとめ
私が知っていることや、忘れがちなことなどこのようにまとめてアウトプットすることで定着できます。このシリーズは2回3回と更新していきそうなの①とさせていただきました！
次は②でお会いしましょう！