半歩ずつでも前に進めば変わっていく

Kozue Blog

プログラミング 学習 記録

プログラミングで月収5万円になるまでの記録12日目

更新日:

こんばんは、こずえです。
プログラミング学習記録12日目です。
疑似要素について学習しました。

所感:学習していたらいつの間にか就寝時間を過ぎていました…(;・∀・)
今回はいつもより画像多めにしてみました(時間掛かった)。

合計学習時間

前回までの時間:18.00[h]
今回の時間:2.00[h]
合計時間:20.00[h]

学習内容

はじめてのレスポンシブWebデザイン入門講座

疑似要素

構造的な疑似要素の応用

n個目を示す疑似要素

  • nth-child:最初からn番目のもの
  • nth-last-child:最後からn番目のもの
nth-child、nth-last-childの確認

構造的で特殊な疑似要素

  • nth-of-type:特定の親要素の中の特定の子要素が対象となる
  • nth-child:特定の親要素の中の隣接する子要素が対象となる
  • only-of-type:特定の親要素の中の唯一の子要素が対象となる
nth-of-type、only-of-typeの確認

UIに関する疑似要素

  • enabled:通常の状態(選択/入力可)のinput系要素
  • disabled:disabledオプションの指定されたinput系要素(選択/入力不可)
  • checked:radioやcheckboxなどで選択されたものを対象とする
enabled、disabled、checkedの確認

1つ目を示す疑似要素

  • first-letter:最初の1文字
  • first-line:最初の1行
first-letter、first-lineの確認

直前 / 直後の疑似要素

  • before:要素の直前を示す
  • after:要素の直後を示す
before、afterの確認
before、afterの位置
afterで画像のサイズ指定が効かなかった

以下の記事で解決しました。

【CSS】疑似要素の画像サイズを変更する方法

便利だと思ったもの

折り畳みメニュー

クリックすると展開表示する「折りたたみメニュー」をホームページに簡単に作る方法 | ふかふか交易所

メモ

input placeholder

要素のplaceholder属性で指定した値が、入力欄に初期値として表示されます。

HTMLクイックリファレンス

text-decoration

text-decorationプロパティは、テキスト傍線のつけ方・色・スタイルをまとめて指定する際に使用します。

HTMLクイックリファレンス

vertical-align

vertical-alignプロパティは、行のなかでのテキストや画像などの縦方向の揃え位置を指定する際に使用します。

HTMLクイックリファレンス

-プログラミング, 学習, 記録
-, , ,

Copyright© Kozue Blog , 2019 All Rights Reserved Powered by STINGER.