@gyng
Revisions
Report this question
Subscribe question
Help us understand the problem. What is going on with this question?
Q&A
Closed

画像のようなcssを書くにはどうすればいいのか

スクリーンショット 2020-09-16 21.17.06.png
添付画像のようにcssを触りたいのですが調べても出て来なくて困っています。ご教授お願い致します。

1
2
Answer

こんにちは。

Screen Shot 2020-09-16 at 21.59.59.png

いかがでしょうか。

一言

ここは質問フィードであり、開発依頼フィードではありません。
内容として逸脱していると感じました。

ソース

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>タイトル</title>

    <link rel="stylesheet" href="stylesheet.css">
</head>

<body>
    <div class="wrapper">
        <div class="container">
            <h1>架空の株式会社ダミー</h1>
            <h2>サイト内メニュー</h2>

            <nav>
                <ul>
                    <li>
                        <a href="#">ホーム</a>
                        <p>HOME</p>
                    </li>
                    <li>
                        <a href="#">企業情報</a>
                        <p>ABOUT US</p>
                    </li>
                    <li>
                        <a href="#">よくある質問</a>
                        <p>FAQ</p>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</body>

</html>
:root {
    --bg-color: #fff;
    --gray-font-color: #70757a;
    --border-color: #cdcfd1;
}

body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}

.wrapper {
    margin: 0 auto;
    width: 100%;
}

.container {
    width: 70%;
    margin: auto;
    padding: 12px;
}

nav ul {
    list-style: none;
    width: 200px;
    padding: 0;
}

nav ul>li {
    height: 50px;
    text-align: center;
    background-color: #d9d9d9;
    background-image: linear-gradient( #f6f2f2 0%, #d9d9d9 90%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--border-color);
}

nav ul>li p {
    margin: 0;
    color: var(--gray-font-color);
    font-size: 11px;
}

nav ul>li a,
nav ul>li a:visited,
nav ul>li a:hover {
    text-decoration: none;
    color: black;
}
1
Report this answer

たすかりました!
フィードミス申し訳ありません

0
Help us understand the problem. What is going on with this answer?
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした