ITスキル

【Webデザイン】Progateの学習だけでどのレベルのwebサイトが作れるのか？

この記事ではプログラミング学習サービス「Progate（プロゲート）」で学習した知識だけで制作したホームページを紹介します。

ProgateでHTML＆CSSを学習し、Webサイトを制作してみました。

ワカバ

制作したホームページのデザインやコード、制作方法まで詳しく紹介します。

webデザイン学習の参考にしてください！

Contents
  1. Progate（プロゲート）とは？
  2. HTML＆CSSの講座を受講
  3. 完成したwebサイト
  4. ソースコード
  5. きれいなwebサイトが作れました！

Progate（プロゲート）とは？

「Progate」は初心者向けのプログラミングのオンライン学習サービスです。 このサービス1つで様々なプログラミング言語を学習することができます。

世界で200万人以上が利用しているサービスで、企業の研修や学校の授業にも導入実績があります。

【就職やスキルアップに】プログラミングを練習するならProgateがおススメ！ この記事では、オンラインプログラミング学習サービス「Progate」を紹介します。 プログラミングのスキルを身に付けたいな… ...

Progateの登録はこちら

HTML＆CSSの講座を受講

webサイトを制作するにあたり、ProgateでHTML&CSSを学習しました。

ワカバ

Webサイトの見た目は、基本的にHTMLとCSSの２つの言語によって作られています。

ProgateにはHTML&CSSの講座として以下の4つがあります

  • HTML&CSS　初級編（webサイト作成の基本知識を学ぶ）
  • HTML＆CSS　中級編（webサイト作成の応用知識を学ぶ）
  • HTML&CSS　上級編（レスポンシブデザインを学ぶ）
  • HTML&CSS　Flexbox編（cssを使ったレイアウト方法を学ぶ）

これら4つの講座の内容を20時間ほどかけて全て学習しました。

完成したwebサイト

テーマ：観光地検索サイトのトップページ

今回は「観光地検索サイト」をテーマにそのトップページのみを制作しました。

  • webブラウザ
  • タブレット
  • スマートフォン

これらの3つの端末に向けて異なる見た目にしたので、3種類すべてを紹介します。

webブラウザ用のデザイン

タブレット用

スマートフォン用

ソースコード

sightseeing.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>sightseeing</title>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
        <link rel="stylesheet" href="stylesheet.css">
        <link rel="stylesheet" href="responsive.css">
    </head>
    <body>
        <header>
            <div class="inner">
                <div class="header-left">
                    <a href="#"><img src="ヘッダー画像.png"></a>
                </div>
                <div class="header-right">
                    <a href="#">観光地</a>
                    <a href="#">サイト情報</a>
                    <a href="#">お問い合わせ</a>
                </div>
                <div class="menu">
                    <a><span class="fas fa-bars menu-icon"></span></a>
                </div>
            </div>
            <div class="clear"></div>
        </header>
        <div class="main">
            <div class="background">
                <div class="inner">
                    <h1>あなたが行きたい観光地が<br>
                    きっと見つかる</h1>
                    <div class="btn-list">
                        <a href="#" class="btn login">ログイン</a>
                        <a href="#" class="btn register">会員登録はこちら</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="contents">
            <div class="inner">
                <div class="inner-level2">
                    <h3>おススメ観光地ベスト3</h3>
                    <p class="rank-label">第1位</p>
                    <div class="rank-contents">
                        <div class="contents-left">
                            <img src="沖縄写真.jpg">
                        </div>
                        <div class="contents-right">
                            <p class="spot-name">沖縄県</p>
                            <p class="text">沖縄県は日本有数の観光地です。綺麗な海では様々なアクティビティを楽しむことができます。</p>
                            <a href="#">詳しくはこちら</a>
                        </div>
                    </div>
                    <p class="rank-label">第2位</p>
                    <div class="rank-contents">
                        <div class="contents-left">
                            <img src="京都写真.jpg">
                        </div>
                        <div class="contents-right">
                            <p class="spot-name">京都府</p>
                            <p class="text">京都は外国人から非常に人気の観光地です。清水寺や金閣寺をはじめとした多くの世界遺産を巡ることができます。</p>
                            <a href="#">詳しくはこちら</a>
                        </div>
                    </div>
                    <p class="rank-label">第3位</p>
                    <div class="rank-contents">
                        <div class="contents-left">
                            <img src="北海道写真.jpg">
                        </div>
                        <div class="contents-right">
                            <p class="spot-name">北海道</p>
                            <p class="text">北海道はグルメの宝庫として非常に人気です。市場で新鮮な海の幸を楽しむことができます。</p>
                            <a href="#">詳しくはこちら</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="message">
            <div class="inner">
                <div class="inner-lebel2">
                    <div class="message-contents">
                        <h3>さあ、新たな旅を始めよう</h3>
                        <a>観光地を探す</a>
                    </div>
                </div>
            </div>
        </div>
        <footer>
            <div class="inner">
                <a href="#"><img src="ヘッダー画像_黒.png"></a>
                <p>©2021 sightseeing</p>
            </div>
        </footer>
    </body>
</html>

stylesheet.css

*{
    box-sizing:border-box;
}
body{
    margin:0;
    font-family:"Hiragino kaku Gothic ProN";
}
.inner{
    max-width:1170px;
    width:100%;
    margin:0 auto;
    padding:0 15px;
}
.inner-level2{
    width:60%;
    margin:0 auto;
    text-align:center;
}
.clear{
    clear:left;
}

/*ヘッダー部分*/
header{
    background-color: darkblue;
    height:60px;
    width:100%;
    position:fixed;
    z-index:10;
}
.header-left{
    float:left;
}
.header-left img{
    width:200px;
    padding:10px 0;
}
.header-right{
    float:right;
}
.header-right a{
    display:block;
    float:left;
    color:white;
    line-height:60px;
    margin-right:20px;
    text-decoration:none;
}
.header-right a:hover{
    text-decoration: underline;
}
.menu-icon{
    color:white;
    font-size:24px;
    line-height:60px;
}

/*メインビジュアル*/
.menu{
    display:none;
    float:right;
}
.main{
    background-image:url(メイン画像.jpg);
    background-size:cover;
    text-align:center;
}
.btn-list{
    flex-direction: column;
}
.btn{
    padding:8px 10px;
    border-radius:4px;
    display:block;
    text-decoration: none;
    width:160px;
    color:white;
    margin:0 auto;
    opacity:0.8;
}
.btn:hover{
    opacity:1.0;
}
.login{
    background-color:deepskyblue;
    margin-bottom:20px;
}
.register{
    background-color:green;
}
.main h1{
    font-size:42px;
    letter-spacing:5px;
    padding-bottom:30px;
}
.background{
    background:rgba(255,255,255,0.5);
    height:100%;
    padding:160px 0 50px 0;
}

/*おススメ観光地*/
.contents{
    background-color: rgb(250, 250, 250);
    padding:50px 0 50px 0;
}
.contents h3{
    font-size:32px;
}
.rank-label{
    font-size:25px;
}
.rank-contents{
    display:flex;
    padding-bottom:20px;
}
.contents-left{
    width:40%;
}
.contents-left img{
    width:100%;
    border-radius:50%;
    padding-top:10px;
}
.contents-right{
    width:60%;
    padding:0 20px;
}
.spot-name{
    padding-bottom:10px;
    font-weight:bold;
}
.text,.contents-right a{
    padding:10px 0;
}
.contents-right p{
    border-bottom:1px grey solid;
}

/*下のメッセージ部分*/
.message-contents{
    text-align:center;
    padding:50px 0 50px 0;
}
.message-contents a{
    padding:10px 20px;
    border-radius:4px;
    background-color:rgb(245, 127, 127,0.9);
    text-decoration: none;
    color:white;
    display:inline-block;
    margin-top:10px;
    box-shadow:0 5px rgb(204, 90, 107,0.9);
    cursor: pointer;
}
.message-contents a:hover{
    background-color:rgb(245, 127, 127,1.0);
    box-shadow:0 5px rgb(204, 90, 107,1.0);
}
.message-contents a:active{
    position:relative;
    top:5px;
    box-shadow:none
}

/*フッター部分*/
footer{
    padding:20px 0;
    border-top:1px lightgray solid;
}
footer img{
    width:150px;
}
footer a{
    line-height: 1px;
    display: block;
}
footer p{
    color:lightgray;
    font-size:5px;
    padding-left:10px;
}

responsive.css

/*タブレット端末向けレイアウト*/
@media all and (max-width:1000px){
    .btn{
        width:60%;
    }
    .contents-left{
        width:80%;
        margin:0 auto;
    }
    .contents-right{
        width:80%;
        margin:0 auto;
    }
    .rank-contents{
        display:block;
    }
    .message-contents a{
        width:60%;
    }
}

/*モバイル端末向けレイアウト*/
@media all and (max-width:670px){
    .inner-level2{
        width:90%;
    }
    .menu{
        display:block;
    }
    .header-right{
        display:none;
    }
    .main h1{
        font-size:32px;
        text-align:left;
    }
    .btn{
        width:100%;
    }
    .login{
        margin-bottom:20px;
    }
    .contents h3{
        font-size:24px;
    }
    .rank-label{
        font-size:20px;
    }
    .contents-left{
        width:80%;
        margin:0 auto;
    }
    .contents-right{
        width:100%;
    }
    .rank-contents{
        display:block;
    }
    .message-contents{
        text-align:center;
    }
    .message-contents a{
        width:100%;
    }
    footer{
        text-align:center;
    }
}

きれいなwebサイトが作れました！

この記事ではProgateで学習したHTMLとCSSのスキルをもとにWebサイトを制作してみました。

他ページへの遷移やアニメーションの組み込みなどを実装することはできませんでしたが、Progateの講座で学習した内容だけでこれだけの完成度になるとは驚きました。

みなさんもProgateでウェブデザインを学んでみてはいかがでしょうか？

Progateの登録はこちら

【HTML/CSS】1か月勉強したらどんなWebデザインが作れるの?HTML/CSSを１か月勉強したらどんなクオリティのWebサイトが作れるようになるか紹介します。学習時間はおよそ60時間です。ソースコードも公開しています。これからWebデザインを学習しようと考えている方、ぜひ参考にしてください。...
【就職やスキルアップに】プログラミングを練習するならProgateがおススメ！ この記事では、オンラインプログラミング学習サービス「Progate」を紹介します。 プログラミングのスキルを身に付けたいな… ...
【Visual Studio Code】HTML＆CSSの環境構築人気のソースコードエディター「Visual Studio Code」を用いて、HTML・CSSを扱うための環境構築方法を解説します。Visual Studio Codeはマイクロソフトが開発しているWindows、Linux、macOS用のソースコードエディターです。...
あわせて読みたい