読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

背景色と枠線

背景色を指定

  • background-color プロパティ
見出しや段落の背景色を指定
  • タグ単位で背景色をつける

背景の画像を指定

  • background-image プロパティ
  • url( 画像の場所・ファイル名 );
  • background-repeat プロパティ
  • 繰り返しの値:repeat-x、repeat-y
  • 繰り返さない:no-repeat
  • 表示位置を指定:background-position プロパティ

テキストの一部に効果をつける

  • span要素に背景色を指定
  • mark要素
表のデータ行の背景色を指定
  • 擬似クラス「:nth-child(n)」
  • 偶数行「:nth-child(even)」
  • 奇数行「:nth-child(odd)」

枠線をつける

  • border:線の太さ 線の種類 線の色
表に重ねた枠線を指定
  • border-collapse: collapse;
行頭のリストマークの位置を内側に指定
  • list-style-position: inside;

見出しの背景色を指定

h1 {
  background-color: #E4FF8D;
  padding: 10px;
}
見出しに下線を指定
h1 {
  border-bottom: 5px solid #E4FF8D;
  padding: 5px;
}
見出しの左端に線を指定
h1 {
  border-left: 10px solid #E4FF8D;
  padding: 5px 5px 5px 15px;
}