メインのレイアウト

楽しい生活

mainの構造

メイン部分のレイアウトの作成

f:id:t0919k-1201y:20201106131424p:plain

f:id:t0919k-1201y:20201106131500p:plain

mainの要素は3要素

「copy-container」

「contents」

「sontact-form」

 

文中の一部にCSSを適用させる

f:id:t0919k-1201y:20201106131651p:plain

 

<span>要素

f:id:t0919k-1201y:20201106131745p:plain

文中の一部にCSSを適用させたい場合は、<span>要素で囲む

f:id:t0919k-1201y:20201106131803p:plain

f:id:t0919k-1201y:20201106131814p:plain

 

ブロック要素・インライン要素

HTMLの要素には、改行される要素と改行されない要素がある

 

ブロック要素:前後で改行が入り、親要素の幅一杯に広がる要素

f:id:t0919k-1201y:20201106132118p:plain

例)<div>、<h1>、<p>要素はブロック要素

 

インライン要素:<span>要素や<a>要素のように改行されない要素

f:id:t0919k-1201y:20201106132130p:plain

 例)<span>、<a>要素はインライン要素

 

演習メモ

 

stylesheet.css

上下のpaddingを100px、左右のpaddingを80pxにしてください

padding: 100px 80px;

 

copy-containerの中のh1のfont-sizeを指定してください

.copy-container h1 {

   font-size: 140px;

}

 

copy-containerの中のspanの色を指定してください

.copy-container span {

  color: #       ;

}

 

 

コメント

タイトルとURLをコピーしました