HTML & CSS 学習レッスン レイアウト編（HTML）

CSS

Progageでの学習まとめ

要素を横並びにする

ブログのタイトルに使われるタグ。１ページに１つが望ましい

<ul>
  <li>東京</li>
  <li>千葉</li>
  <li>埼玉</li> 
<ul>
ul {
  list-style: none;
  float: left;
}
  • 東京
  • 千葉
  • 埼玉

ロゴとメニュー

ロゴとメニュー周りの余白を調整する

<div class="header-logo">関東</div>
  <div class="header-list">
    <ul>
      <li class="li-kanto">東京</li>
      <li class="li-kanto">千葉</li>
      <li class="li-kanto">埼玉</li>
    </ul>
  </div>
</div>

.header-logo {
  float: left;
  font-size: 36px;
  /* 上下のpaddingを20px、左右のpaddingを40px */
  padding: 20px 40px 20px 40px;  
}

.li-kanto {
  list-style: none;
  float: left;
  padding: 33px 20px 33px 20px; 
}

.li-kanto {
  list-style: none;
  float: left;
  padding: 33px 20px 33px 20px; 
}
  • 東京
  • 千葉
  • 埼玉

フッターのレイアウト

ロゴとメニュー周りの余白を調整する

<div class="footer-logo">関東</div>
  <div class="footer-list">
    <ul>
      <li class="li-footer">東京</li>
      <li class="li-footer">千葉</li>
      <li class="li-footer">埼玉</li>
    </ul>
  </div>
</div>

.footer-logo {
  float: left;
  font-size: 36px;
  /* 上下のpaddingを20px、左右のpaddingを40px */
  padding: 20px 40px 20px 40px;  
}

.li-footer {
  list-style: none;
  float: left;
  padding: 33px 20px 33px 20px; 
}
  • 東京
  • 千葉
  • 埼玉

コメント

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