プログラミング

HTML/CSSの個人的わからないところ

投稿日:

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

COMOLY様のプログラミング学習会の課題で↓のページを作成しました。

ヘッダーのアイコンとメインのテキスト込み画像は用意して頂いてあったので、
背景の変更・文字色・右メニュー・各位置調整の記述になります。

これを作るのに私は2時間以上掛かってしまいます。
時間は素人なので仕方ないと割り切っていますが、
根本的に構造理解出来ていないところが多いです。


headerで囲った後にヘッダー自体に高さを指定して、
なんとかメインがヘッダーにめり込まないようにしているのですがいいのでしょうか?

visual studio codeというエディターを使用しているのですが、
相対パスをコピーすると"/"ではなく、"バックスラッシュ"になってしまうみたいです。
これは毎回打ち直すしかないのでしょうか?めんどくさいし忘れそう。。。。

最後に↓が今回書いたコードです。(2回目)

<!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="style2.css">
</head>
<body>
    <header>
        <div class="left-icon">
            <img src="image\logo_white.png" alt="">
        </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>
    </header>
    <main>
        <img src="image\mac-image.png" alt="">
    </main>
    <footer>
    </footer>
</body>
</html>
* {
    background-color: teal;
    margin: auto;
}
header{
    height: 100px;
    width: auto;
}
.left-icon {
    float: left;
    margin-left: 100px;
}
.left-icon img {
    width: 300px;
}
.right-menu {
    float: right;
    margin-top: 5px;
    margin-right: 15px;
}
.right-menu li {
    float: left;
    list-style: none;
    padding: 10px 20px;
    margin: 10px 10px;
    background-color: orange;
}
.right-menu a {
    background-color: orange;
    color: white;
    text-decoration: none;
}
main img {
    width: 600px;
    text-align: center;
    margin-top: 50px;
}
まだまだ分からないことだらけで、何がわからないかが上手く説明できませんが、
なんとか勉強していきます。
それでは今回はこの辺で。

-プログラミング

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

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