この記事ではプログラミング学習サービス：Progate（プロゲート）で学習した知識だけで制作したホームページを紹介します。
ワカバ
制作したホームページのデザインやコード、制作方法まで詳しく紹介します！
webデザインの学習の参考にしてください！
Progate（プロゲート）とは？
「Progate」は初心者向けのプログラミングのオンライン学習サービスです。 このサービス1つで様々なプログラミング言語を学習することができます。
Progateについて詳しく書いた記事があるのでぜひこちらをご覧ください⇩
Progateの登録はこちら
HTML＆CSSの講座を学習
webサイトを制作するにあたり、ProgateでHTML&CSSを学習しました。
webサイトの見た目は、HTMLとCSSという2つのプログラミング言語によって作られているのです。
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サイトが作れた！
いかがでしたか？私の感想としてかなりクオリティの高いwebサイトを作ることができました。
Progateの講座で学習した内容だけでこれだけの完成度になるとは驚きました。
他のページへの遷移やアニメーションの組み込みなどを実装することはできませんでしたが、初心者の私には大満足です。
みなさんもProgateでウェブデザインを学んでみてはいかがでしょうか？
Progateの登録はこちら
ワカバ
コメント