プログラミング

【プログラミング独学】HTML&CSS 14日目、ヘッダーの中身を横並びにする

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

 

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

 

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

 

 

ヘッダー中身を横並びにする

HTMLで記述した要素は、縦に並んで記述されていく

 

横並びにしたいときはCSSで指定する必要がある

 

float プロパティを使うことで横並びにできる

 

float: left; と入力することで左側から順に横並びになる

 

実際に記述はこんな感じ

 

index.html

<ul>

<li>HTML</li>

<li>PHP</li>

<li>Ruby</li>

</ul>

stylesheet.css

li {

list-style: none;

float: left;

}

 

HTMLPHPRuby と表示されるようになる

 

 

float 覚えておこう ”\( ̄^ ̄)゙ハイ!

 

 

ヘッダーのロゴとリストを横並びにする

 

stylesheet.css

.header-logo {

float: left;

}

.header-list {

float.left;

}

 

CSSに書くときはドットから始まる

 

タグに指定する場合はドットはいらない

 

違いがまだ理解できていませんが先へ進みますw

 

学習終わり

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

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

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

人気ブログランキング

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

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

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

ブログネタなどを発信中


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


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



COMMENT

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

CAPTCHA