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

転がる先の杖

サラリーマンの傍、自力で食っていけるよう奮闘し、己を磨く日々を綴ります。 スノボの大会出場を目指し、オフトレに精を出してます!

HTML , CSSの復習

スポンサーリンク

過去に行った課題から、備忘録がてら復習事項を記載する

 

 

background-sizeについて

 

参照はこちら

www.htmq.com

 

■値

auto

自動的に算出される(初期値)

contain

縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する

cover

縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する

長さ

背景画像の幅・高さを指定する

パーセンテージ

背景領域に対する背景画像の幅・高さのパーセンテージを指定する

 

 

f:id:ktg6:20160904154643p:plain 

 

font-weight : bold 太字にする

 

span : 囲んだ範囲をひとかたまりとして、スタイルシートを適用する

※DIVとの使い分け

DIV = ブロック要素。見出し、段落、リストなどのまとまった単位

SPAN = インライン要素。文章の一部

 

www.htmq.com

 

■使用例

HTMLソース

絵の具の 

<span style="background-color: #0099FF">青色</span>と 

<span style="background-color: #FFFF00">黄色</span>を混ぜると 

<span style="background-color: #33CC33">緑色</span>になります。

↓↓↓

ブラウザ上の表示

絵の具の 青色黄色を混ぜると 緑色になります。

 

article :  内容が単体で完結するセクションである事を示す

 例:フォーラムでの投稿、雑誌や新聞の記事、ブログのエントリ、コメントなど

 

定義リスト<DL> <DT> <DD>

http://html.eweb-design.com/0409_dl.html

 

DL:定義型のリストを作成()

DT:リストの項目を作成

DD:英ストの内容を作成

 

サンプル

リスト

項目をここに書きます

ここに項目の説明などを書きます

項目2

サンプルサンプルサンプル

項目3

サンプルサンプルサンプルサンプル

項目4

サンプルサンプルサンプルサンプルサンプル

サンプルソース

<H2>リスト</H2>

<DL>

<DT>項目をここに書きます</DT><DD>ここに項目の説明などを書きます</DD>

<DT>項目2</DT><DD>サンプルサンプルサンプル</DD>

<DT>項目3</DT><DD>サンプルサンプルサンプルサンプル</DD>

<DT>項目4</DT><DD>サンプルサンプルサンプルサンプルサンプル</DD>

</DL>

 

alt属性とtitle属性の使い分け

 

<alt属性>

代替テキストと呼ばれ、画像を閲覧できない環境でも、情報を

テキストや音声で得る事ができるようにするための属性。

 

主にimg要素で活用するが、area , applet , input に対してもつく模様。

 

<title属性>

つけたものに対する説明を書く。

 

<必要性>

alt属性:必須(画像が表示できない時に内容を伝えるため)

title属性:必須ではない

 

iframeについて

HTML文章の中に、もうひとつ別のHTMLファイルを組み込む。

(インラインフレームと呼ぶ)

HTML内に別のHTMLを入れ子にするタグ

 

G`sで最初に作った課題から、分からなくて調べた項目をあげてみた。html,cssに関しては、とにかく手を動かして覚えるのが手っ取り早いですね。