urei blog

個人的に関心のある事柄について、発信していきます。

HTML&CSSを一か月学習する #2

二日目

 

昨日学習したHTMLの範囲を復習しながら、CSSの学習に入る。

復讐には86pの『よく使うhtmlタグ一覧』を使用。

 

cascading style seets の頭文字をとってCSS

拡張子は「.css」

適用方法

・htmlファイルの<head>内に<link>タグで指定。

<link rel = "stylesheet" href = "style.css">

 

・<head>内に<style>タグで指定

<style>

  h1{color: red;}

</style>

 

・HTMLタグの中にstyle属性を指定

<h1 style="color: red;"></h1>

 

基本はcssファイルを読み込んで適用させる。

 

・見出しとジャンプ率

見出しと本文の文字サイズの比率のこと。

ジャンプ率が高いと躍動的、低いと上品で落ち着いた印象。

 

フォントの変更:font-familyプロパティ

文字の太さ:font-weightプロパティ

行の高さ:line-heightプロパティ

文章をそろえる:text-aliginプロパティ

 

・カラーコードの指定

0~9、a~fの16進数で表す。

 

・rgbで指定

rgba(255,255,255,.5)

Alpha値の指定も可能

 

・色の名前で指定

red pink orange等

 

文字色 colorプロパティ

背景色 background-colorプロパティ

 

ページ全体に色を付ける場合<body>タグに対して指定

 

cssコメントアウト

/*   この部分は表示されない。    */

 

 

背景に画像 background-imageプロパティ

背景画像の繰り返し表示 bakcground-repeatプロパティ

画像の大きさ background-sizeプロパティ

画像の位置 background-positionプロパティ

 

背景関連のプロパティをまとめて指定 backgroundプロパティ

sizeの値はpositionの直後に/で区切る。

<div>

    background: #fff url() no-repeat center bottom/cover

</div>

 

 

幅と高さheight widthプロパティ

px rem % の単位を付ける。

auto 自動設定

 

cssに関しては明日も続いて学習予定。

 

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

  • 作者:Mana
  • 発売日: 2019/03/16
  • メディア: Kindle版