プログラミング

プログラミング課題進捗

更新日:

おはようございます。優灯です。

課題進捗です。

正直自分でも何を弄ったか覚えていませんが、

左アイコンと中央画像はwidthを%指定することで
なんとか画面縮小についてくるようになりました。

中央の画像が右端や左端によってしまう問題が発生しましたが、
画像自体にclear: both;を指定したら上手くいきました。

floatで要素が浮いた関係なのか位置がズレていたようです。

残る問題点は、縮小した時、右メニューが回り込みをしてしまい
縦になってしまうことです。

右メニュー自体のサイズが画面に対応して、小さくなって欲しいのですが
解決策がわかりません。

また頑張って悩もうと思います。

それでは今回はこの辺で。

現在のコードは↓です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sample</title>
    <link rel="stylesheet" href="style2res.css">
</head>
<body>
    <header>
        <div class="header">
            <div class="left-icon">
                <img src="images/logo_white.png" alt="" class="left_inner_image">
            </div>
            <div class="right-menu">
                <ul>
                    <li>
                        <a href="">Q&A</a>
                    </li>
                    <li>
                        <a href="">ログイン</a>
                    </li>
                    <li>
                        <a href="">新規登録</a>
                    </li>
                </ul>
            </div>
        </div>
    </header>
    <main>
        <img src="images/mac-image.png" alt="">
    </main>
    <footer>
    </footer>
</body>
</html>
<!--  -->
* {
    background-color: #3bb2b8;
    margin: auto;
}
.left-icon {
    float: left;
    width: 50%;
}
.left-icon img {
    width: 40%;
    padding: 0 0 0 10%;
}
.right-menu {
    float: right;
    width: 30%;
}
.right-menu li {
    float: left;
    list-style: none;
    background-color: orange;
    padding: 3%;
    margin: 5% 2% 0 2%;
}
.right-menu a {
    background-color: orange;
    color: white;
    text-decoration: none;
    font-size: 1.1rem;
}
main  {
    text-align: center;
}
main img {
    width: 40%;
}

-プログラミング

Copyright© ヒキカツ!ひきこもりのブログ , 2021 All Rights Reserved Powered by STINGER.

%d人のブロガーが「いいね」をつけました。