勉強サイトのレッスンを見ながら、なかなかカッコいいサイトが出来上がった
背景に透明化をかけて、美しいデザインになったぞ。
ログインボタンがついた黒っぽいバーは画面をスクロールしても追いかけてくる・・・（position:fixed;機能という）
実際読むかどうかは分からないけど、ありがちな説明デザイン。これも綺麗。
文字の大きさを変えたり、4つの画像を均等に配置することに全身全霊かけた。
押したい衝動に駆られる開始ボタンも作ったぞ。ボタンにカーソルを重ねると、
矢印の形がミッキーの手の様な形になったり（active機能）、
クリックするとボタンがペコっと沈んでいかにも押した様な気持ちになるようにも
工夫したんだ（これもactive機能）
さいごについたフッターもありがちでかっこいい。
もう何でも作れそうだ・・・。
HTMLは文章構造を作って、CSSは視覚効果をつくるよ。
HTMLのプログラム中にCSSファイルを読み込む動作を行って、初めて一つになるんだ。
↓作ったサイトをHTMLだけにすると何がなんだか・・・
この前作ったザーピー美味しかったけど生だった。
今回のプログラム
[HTML]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Progate</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="container">
<div class="header-left">
<img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
</div>
<div class="header-right">
<a href="#" class="login">ログイン</a>
</div>
</div>
</header>
<div class="top-wrapper">
<div class="container">
<h1>LEARN TO CODE.</h1>
<h1>LEARN TO BE CREATIVE.</h1>
<p>Progateはオンラインプログラミング学習サービスです。</p>
<p>初心者にもやさしいスライドとレッスンで、Webサービスを作りながらプログラミングを学んでいきましょう。</p>
<div class="btn-wrapper">
<a href="#" class="btn signup">新規登録はこちら</a>
<p>or sign up with</p>
<a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
<a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
</div>
</div>
</div>
<div class="lesson-wrapper">
<div class="container">
<div class="heading">
<h2>Learn Where to Get Started!</h2>
</div>
<div class="lessons">
<div class="lesson">
<div class="lesson-icon">
<img src="https://prog-8.com/images/html/advanced/html.png">
<p>HTML & CSS</p>
</div>
<p class="txt-contents">Webページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
</div>
<div class="lesson">
<div class="lesson-icon">
<img src="https://prog-8.com/images/html/advanced/jQuery.png">
<p>jQuery</p>
</div>
<p class="txt-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
</div>
<div class="lesson">
<div class="lesson-icon">
<img src="https://prog-8.com/images/html/advanced/ruby.png">
<p>Ruby</p>
</div>
<p class="txt-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
</div>
<div class="lesson">
<div class="lesson-icon">
<img src="https://prog-8.com/images/html/advanced/php.png">
<p>PHP</p>
</div>
<p class="txt-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
</div>
</div>
</div>
</div>
<div class="message-wrapper">
<div class="container">
<div class="heading">
<h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2>
<h3>Let's learn to code, learn to be creative!</h3>
</div>
<span class="btn message">さっそく開始する</span>
</div>
</div>
<footer>
<div class="container">
<img src="https://prog-8.com/images/html/advanced/footer_logo.png">
<p>Learn to code, learn to be creative.</p>
</div>
</footer>
</body>
</html>
[CSS]
body {
margin: 0;
font-family: "Hiragino Kaku Gothic ProN";
}
a {
text-decoration: none;
}
.container {
width: 1170px;
padding: 0 15px;
margin: 0 auto;
}
.top-wrapper {
padding: 180px 0 100px 0;
background-image: url(https://prog-8.com/images/html/advanced/top.png);
background-size: cover;
color: white;
text-align: center;
}
.top-wrapper h1 {
opacity: 0.7;
font-size: 45px;
letter-spacing: 5px;
}
.top-wrapper p {
opacity: 0.7;
}
.btn-wrapper {
margin: 20px 0;
}
.btn-wrapper p {
margin: 10px 0;
}
.signup {
background-color: #239b76;
}
.facebook {
background-color: #3b5998;
margin-right: 10px;
}
.twitter {
background-color: #55acee;
}
.btn {
padding: 8px 24px;
color: white;
display: inline-block;
opacity: 0.8;
border-radius: 4px;
}
.btn:hover {
opacity: 1;
}
.fa {
margin-right: 5px;
}
header {
height: 65px;
width: 100%;
background-color: rgba(34, 49, 52, 0.9);
/* position繝励Ο繝代ユ繧｣繧断ixed縺ｫ縲》op繧0縺ｫ謖�ｮ壹＠縺ｦ縺上□縺輔＞ */
position:fixed;
top:0px;
/* z-index繧10縺ｫ謖�ｮ壹＠縺ｦ縺上□縺輔＞ */
z-index:10;
}
.logo {
width: 124px;
margin-top: 20px;
}
.header-left {
float: left;
}
.header-right {
float: right;
background-color: rgba(255, 255, 255, 0.3);
transition: all 0.5s;
}
.header-right:hover {
background-color: rgba(255, 255, 255, 0.5);
}
.header-right a {
line-height: 65px;
padding: 0 25px;
color: white;
display: block;
}
.lesson-wrapper {
height: 500px;
padding-bottom: 80px;
background-color: #f7f7f7;
text-align: center;
}
.heading {
padding-top: 60px;
padding-bottom: 30px;
color: #5f5d60;
}
.heading h2 {
font-weight: normal;
}
.lesson {
float: left;
width: 25%;
}
.lesson-icon {
position: relative;
}
.lesson-icon p {
position: absolute;
top: 90px;
width: 100%;
color: white;
}
.txt-contents {
width: 80%;
display: inline-block;
margin-top: 20px;
font-size: 12px;
color: #b3aeb5;
}
.heading h3 {
font-weight: normal;
}
.message-wrapper {
border-bottom: 1px solid #eee;
padding-bottom: 80px;
text-align: center;
}
.message {
padding: 15px 40px;
background-color: #5dca88;
cursor: pointer;
box-shadow: 0 7px #1a7940;
}
.message:active {
position: relative;
top: 7px;
box-shadow: none;
}
footer img {
width: 125px;
}
footer p {
color: #b3aeb5;
font-size: 12px;
}
footer {
padding-top: 30px;
}
