プログラミングを一度挫折した大学生がHTML、CSSに手を出した話・その5

今回も前回の続きとなります！

まだ読んでない方はそちらからどうぞ〜

昨日は失踪していました、、、管理人です。

ただ決してプログラミングの勉強をサボっていたわけではありません！

ブログを休んでいただけです笑

今回はいよいよランディングページのようなページを一つ作ろうと思います。

これまでHTMLの基礎やCSSについて学んできて、そろそろ成果を見せるときです。

実は以前ネットビジネスをやろうと計画までしていたのですが色々あって頓挫、その時のイメージを今回は形にして見ようと思います

今回作りたいもの
まずはHTMLで素材を作る
CSSで装飾
完成した！
使用コード
1. HTML
今回のまとめ
次回：2カラムWebページ
1. 関連

今回作りたいもの

イメージはこんな感じ

写真を置き下してキャッチコピーを出して右上にメニュー、真ん中にボタンという感じです。

結構よくみるようなサイトデザインですよね。このレベルの物も作れるそうなので頑張っていきます。

まずはHTMLで素材を作る

HTMLは基本的にウェブサイトの外見を作るものなので、まずは必要な要素を打ち込んでいきます。

そしてそれらが打ち込み終わったものがこちら

これでロゴ、メニュー、ボタン（2個欲しかったので増やしてみました）、キャッチコピーなどを入力することができました。

ただしこのままだとただただ文字が羅列しているだけです。

これを今からCSSで装飾していきます。

CSSで装飾

CSSでやることとしてはフォントの変更や文字の大きさ、位置関係、表示のされ方などとにかく大体全部です。

やってることはシンプルで、HTMLの方でそれぞろのブロック？に名前をつけてあげます。

そしてその名前ごとに装飾をしてあげる感じです。

（自分もまだまだはじめたばかりで抽象的なことしかわかりませんのでご愛嬌を、、、）

文字のフォントですが、Googleフォントという物を利用しました。

URL：https://fonts.google.com

これを最初に読み込ませておいて後から呼び出します。

使い方としては、使いたいフォントを検索→その部分をコピペ！→CSSで出すという感じです。

位置関係に関しては margin や padding で配置していきます。

完成した！

これでHTML、CSSのコードを打ち終わりました。

そうして完成したページがこちら！！

背景にイメージ写真を載せて、全体的にまとまりをつけてみました。

いかがでしょうか、管理人的には結構いい感じにできたのではないかなと自画自賛しております

大学生のノート販売のプラットホームのランディングページです。

使用コード

使用したコードは以下に提示（スマートフォンだとみにくいのでPCでの閲覧を推奨します）

HTML

<DOCTYPE HTML>
<HTML lang=“ja”>
   <head>
     <meta charset=“UTF-8”>
     <title>Noteshop for uni</title>
     <meta name=“description” content=“あなたのノートがお小遣いに”>

   <!--css-->
    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
    <link href="style.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap" rel="stylesheet">
    <link rel="icon" type="png" href="NFUロゴ.png">
</head>
<body>
    <div id="home" class="big-bg">
    <header class="page-header wrapper">
        <h1><a href="index.html"><img class="logo" src="NFUロゴ.png" alt="NFUロゴ"></a></h1>
        <nav>
            <ul class="main-nav">
                <li><a href="https://noteshopuniv.buyshop.jp/">利用する</a></li>
                <li><a href="https://docs.google.com/forms/d/e/1FAIpQLSdGf8TFvfokjNKWa5Jg31vanSaEcrgpAoirMsJZKXSRpdYAMw/viewform">出品する</a></li>
                <li><a href="https://noteshopuniv.buyshop.jp/items/41265985">商品例</a></li>
                <li><a href="https://thebase.in/inquiry/noteshopuniv-buyshop-jp">お問い合わせ</a></li>
            </ul>
        </nav>
    </header>

    <div class="home-content wrapper">
        <h2 class="page-title">あなたのノートがお小遣いに</h2>
        <h4 class="sub">学習を加速する新たなプラットフォーム</h4>
        <a class="button" href="https://noteshopuniv.buyshop.jp/">ノートが欲しい</a>
        <a class="button" href="https://docs.google.com/forms/d/e/1FAIpQLSdGf8TFvfokjNKWa5Jg31vanSaEcrgpAoirMsJZKXSRpdYAMw/viewform">出品したい</a>
    </div>
    </div>
</body>


〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜~~~~


CSS

 @charset "UTF-8";
 /*共通部分*/ html{
     font-size: 100%;
 }
 body{
     font-family: "Yu Gothic","優ゴシック Medium",Yugothic,"游ゴシック体","ヒラギノ角ゴ Pro W3",sans-serif;
     line-height: 1.7;
     color: #432;
 }
 a {
     text-decoration:none;
 }
img{
     max-width: 100%;
 } 
/*ロゴ*/ .logo{
     width: 150px;
     margin-top:14px;
 }
 /*ナビ部分*/
 .main-nav{
     display: flex;
     font-size: 1.25rem;
     text-transform: uppercase;
     margin-top: 34px;
     list-style: none;
     font-weight: bold;
 }
 .main-nav li{
     margin-left: 16px;
    }
 .main-nav a{
     color: #432;
 }
 .main-nav a:hover{
     color:#0bd;
 }
 /*ヘッダー*/
 .page-header{
     display: flex;
     justify-content: space-between;
 }
 .wrapper{
     max-width: 1100px;
     margin: auto;
     padding:0.4%;
 }
 /*ホーム*/
 .home-content{
     text-align: center;
     margin-top: 10%;
     text-transform: none;
 }
 .home-content{
     font-size: 1.125rem;
     margin: center;
 }
 /*見出し*/
 .page-title{
     font-size: 5rem;
     font-family: 'Dela Gothic One', cursive;
     text-transform: uppercase;
     font-weight: normal;
    }
 /*見出し2*/
 .sub{
     font-size: 1.5rem;
     font-family: sans-serif, cursive;
     text-transform: uppercase;
     font-weight: bold;
 }
 /*ボタン*/
 .button{
     font-size: 1.375rem;
     background: #0bd;
     color: white;
     border-radius: 20px;
     padding: 10px 32px;
     line-height: 100px;
    }
 .button:hover{
     background: #0099aa;
    }
 .big-bg{
     background-size: cover;
     background-position: center top;
 }
 #home{
     background-image: url(背景②.jpg);
     background-blend-mode: luminosity;
     min-height: 100vh;
 } 
#home .page-title{
     text-transform: none;
 }