プログラミング

【プログラミング独学】HTML&CSS 15日目、ヘッダーの余白

プログラミング学習(HTML&CSS)をProgateで学習した内容を記録したものです

 

Progateでの学習と自分でリサーチしてわかったことをメモしています

 

今回はProgate演習15をやりました

 

 

余白の調整

余白を調整することで適切な位置に調整できる

 

調整には padding を使う

 

padding: 〇px; と書く

 

この記述だと上下左右すべての方向に余白が適用される

 

一方向のみ適用したい場合は?

padding-方向: 〇px; と記述する

方向

上方向・・・top

下方向・・・bottom

右方向・・・right

左方向・・・left

 

記述例 stylesheet.css

.logo-1 {

padding-top: 20px

}

上方向に20px余白をとる

 

paddingはまとめて指示できる

padding-top

padding-bottom

padding-right

padding-left

↑のように一方向ずつ指定もできるが、まとめて指示することもできる

 

まとめて指示①

stylesheet.css

.logo-1 {

padding: 20px 10px 20px 10px;

}

スペースで区切って数値を4つ指定すると

 

上、右、下、左の順に指定できる

 

 

まとめて指示②

stylesheet.css

.logo-1 {

padding: 20px 10px;

}

スペースで区切って数値を2つ指定すると

 

上下、右左で指定できる

 

例の記述だと上下は20px、右左は10pxの余白となる

 

 

ふぱ

プロパティの名前は英単語の書き取り練習みたいに繰り返し書いて、見なくても打てるようになった方が良いかも

 

 

学習終わり

ブログランキングに参加中です。

応援よろしくお願いします。

ブログランキング・にほんブログ村へにほんブログ村

人気ブログランキング

書いた人
 
33歳2児のパパ
長野の会社員です

趣味はテニス、ゲーム、漫画
アニメ、カラオケ、ネットなど

ブログ内容は育児、趣味、雑学、雑記

ブログネタなどを発信中


詳しいプロフィールはこちら


話が合いそうと思ったら
気軽にフォローお願いします



COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA