Search Bloguru posts

こんにちは。紫のバラの人です。

https://en.bloguru.com/love

🌹マニュアル🌹WEB🌎HTML🌎フッター

Jan
1
thread




  • 永尾まりやちゃん

  • 高石ひかりちゃん

  • 後藤恭子さま

    •



    ---------

    < div class="header" > フッター部を入力するよ
    < div class="header-logo" >Progate< /div > フッターのロゴはProgate
    < div class="header-list" > フッターのリストは、
    < ui > 箇条書きで、
    < li >永尾まりやちゃん< /li >
    < li >高石光ちゃん< /li >
    < li >後藤恭子さま< /li >
    < /ui > 箇条書き終わり
    < /div > フッターリストの部分終わり
    < /div > フッターの部分終わり

    -------------------

    横並びにする→cssで「float:left;」
    ・liにかければli要素のみ
    ・header-logoにかければロゴとli要素が並ぶ

    ただし、そのままだとフッターにもかかってしまう。
    ヘッダーだけでよい場合は、「.float-list□ li｛

    ----------------------------------

    < !DOCTYPE html>
    < html>
    < head>
    < meta charset="utf-8">
    < title>Progate
    < link rel="stylesheet" href="stylesheet.css">
    < /head>
    < body>
    < div class="header">
    < div class="header-logo">Progate

    < div class="header-list">
    < ul>
    < li>プログラミングとは
    < li>学べるレッスン
    < li>お問い合わせ
    < /ul>
    < /div>
    < /div>

    < div class="main">

    < /div>

    < div class="footer">

    < div class="footer-logo">Progate






    • 会社概要

    • 採用

    • お問い合わせ





    --------

    body {
    font-family: "Avenir Next";
    }

    li {
    list-style: none;
    /* 以下の2行を削除してください */
    }

    .header {
    background-color: #26d0c9;
    color: #fff;
    height: 90px;
    }

    .header-logo {
    float: left;
    font-size: 36px;
    padding: 20px 40px;
    }

    /* header-listの中のli要素にのみ適用したいCSSを記述してください */
    .header-list li{
    float: left;
    padding: 33px 20px;
    }
    .main {
    background-color: #bdf7f1;
    height: 600px;
    }

    .footer {
    background-color: #ceccf3;
    height: 270px;
    }



    Share
    Email

    People Who Wowed This Post

    * indicates required fields

    🙂 Using emojis in your blog:
    • Keyboard shortcuts: For Mac, press [Ctrl + Cmd + Space]; for Windows, press [ Windows Key + . ]
    • Copy and paste: Find a list of emojis and paste them into the text field.
    • none
    • center
    • left
    • right
    If checked, your avatar will be displayed
    Captcha
    Happy
    Sad
    Surprise