職業訓練覚え書き

20日目(HTML5・CSS2)

昨日の振り返り
文字に関するプロパティ
背景に関するプロパティ
境界線

内容領域(Content Area)

文字や画像を表示できる領域
特に幅や高さの指定をしない場合、親要素いっぱいに広がる。
幅のデフォルト値:100%

高さはとくに指定しない場合コンテンツ(内容物)の量に応じて可変
デフォルト:height: auto;が適用

幅や高さの設定ができないもの
・strong,em
・small
・span
・a

 

内側の余白:padding

 

ボックスの間隔:margin

 

マージンの相殺
上下のマージンが重なると、大きい方の値が優先される

 

ボックスのサイズ

レイアウトを行う上で非常に重要

  1. ボックスサイズを計算する
  2. box-sizingを使う

 

最大値・最小値:max-/min-

 

overflowプロパティ

 

displayプロパティ

 

レイアウト

  • 中央に配置
  • 横に並べる

これが根幹
コーポレートサイトなど特に


★ボックスを中央配置する

  1.  width(幅)を決めてから
  2.  margin: 0 auto;
文字、画像を中央配置に配置する
 
  • text-aline: center;

ボックスを横に並べる:floatプロパティ

★横に並べる方法

  1. 横に並べたいボックス「すべて」の幅を決める
  2. 横に並べたいボックス「すべて」にfloatを設定する


★floatとセットで覚えてね

回り込みの解除

clear: both;

 

今日はここまで。

HTMLタグの記述はほとんどEmmetに頼りきりです(笑)

レイアウトのお話が出たことで、サイトのデザイン的なところがちょっとだけ見えてきたかな?

 

CSSの学習ももう少しで終わって、次はJavaScript

Javaを詰め込んで、それを落っことさないようにしつつJavaScriptが混じったりしないかが不安。

 

今日も行き帰りの電車、訓練の休み時間に黒本。

正規表現とか知らない子が出てきたな、と思ったそばから、ラムダ式とかいうさらに知らない子が現れた。

9章で難易度上がり過ぎじゃないか?

FGOの6章かよ…

とにかくラムダ式の構文を無心で6回くらい読んでたら、形はぼんやりつかめてはきた。

アプリの開発とかで使われるみたいだから、ぜひ覚えたい。