- 投稿日：2021-10-16T16:50:31+09:00
HTML&CSS_02 【RESTART】
HTML＆CSS_02 今回のテーマは「progate」の「HTML＆CSS中級編」を使って作れたものについて ※前回の記事 お役立ちメモ メモ Google Drive からの画像参照方法 https://drive.google.com/file/d/画像ID/view?usp=sharing ⇒ https://drive.google.com/uc?export=view&id=画像ID フェーズ１_学習 「progate」「HTML＆CSS中級編」を学習 フェーズ２_記録 テキストファイル化し以下のコードに手記入でメモ書き HTML <!DOICTYPE html> <html> <head> <meta charset="utf-8"> <title>サンプルページ２</title> /*アイコンを参照出来る外部サイトのリンクを読み込む*/ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="stylesheet.css"> </head> <body> <header> <div class="container"> <div class="header-left"> <img class="logo" src="https://drive.google.com/uc?export=view&id=1NectTNTeasZrUQKYTBoyUP1iJiuUUpVa"> <span class="page-title">サンプルページ２</span> </div> <div class="header-right"> <a href="#" class="login">ログイン</a> </div> </div> </header> <div class="top-wrapper"> <div class="container"> <h1>サンプルトップ</h1> <h1>サンプル内容</h1> <p>サンプルトップページです</p> <p>がんばって作成してゆきます</p> <div class="btn-wrapper"> <a href="#" class="btn signup">新規登録はこちら</a> <p>SNSでも登録できます</p> /*fa fa-~ でアイコンを表示出来る*/ <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="middle-wrapper"> <div class="container"> <div class="heading"> <h2>サンプルキャラクター集</h2> </div> <div class="characters"> <div class="character"> <div class="cha-icon"> <img src="https://drive.google.com/uc?export=view&id=1NectTNTeasZrUQKYTBoyUP1iJiuUUpVa"> <p>モコ</p> </div> <p class="txt-contents">定期的にトリミングされる猫</p> </div> <div class="character"> <div class="cha-icon"> <img src="https://drive.google.com/uc?export=view&id=1hN832R-ykLCA1qIwKHhtqmrr5WK_QqHZ"> <p>ちび</p> </div> <p class="txt-contents">枝豆が好物らしい</p> </div> <div class="character"> <div class="cha-icon"> <img src=https://drive.google.com/uc?export=view&id=1VPQ7F6JnlLt2Q76G55IopA-IpJ43lCar> <p>ヨシ猫</p> </div> <p class="txt-contents">好きなもの：ストロングゼロ Alc.9%</p> </div> </div> </div> </div> <div class="lower-wrapper"> <div class="container"> <div class="heading"> <h2>このページに関するお問い合わせはこちらから</h2> </div> <span class="btn message">お問い合わせ</span> </div> </div> <footer> <div class="container"> <img src="https://drive.google.com/uc?export=view&id=1hN832R-ykLCA1qIwKHhtqmrr5WK_QqHZ"> <p>サンプルページ２</p> </footer> </body> </html> CSS body { margin: 0; font-family: "Meiryo UI"; } a { text-decoration: none; /*テキストの装飾を消す*/ } .container { width: 1170px; padding: 0 15px; margin: 0 auto; } header { height: 70px; width: 100%; background-color: rgba(34,49,52,0.9); /*色のRGB指定と透過度*/ position: fixed; /*表示の固定*/ top: 0; /*ポジションの位置指定*/ z-index: 10; /*要素の重なりの設定*/ } .logo { width: 68px; } .header-left { float: left; } .header-right { float: right; background-color: rgba(255,255,255,0.3); transtion: all 0.5s; /*変化後の状態から指定秒数で変化させる*/ } .header-right:hover { /*カーソルを合わせた際に適用*/ background-color: rgba(255,255,255,0.5); } .header-right a { line-height: 70px; /*インラインブロックの高さ*/ padding: 0 25px; color: white; display: block; } .page-title { color: white; font-weight: bold; font-size: 40px; display: inline-block; height: 65px; padding: 20px; } .top-wrapper { padding: 180px 0 100px 0; /*背景画像の設定*/ background-image: url(https://drive.google.com/uc?export=view&id=1rHHnCRJBd5AzWO68m710F3eg05jZkQ_0); background-size: cover; text-align: center; color: rgb(255,204,0); } .top-wrapper h1 { font-size: 45px; letter-spacing: 5px; text-shadow: 2px 2px 2px black; /*テキストに影を付けて強調*/ } .top-wrapper p { text-shadow: 2px 2px 2px black; } .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; } .middle-wrapper { height: 500px; padding-bottom: 80px; background-color: #e6ffe9; text-align: center; } .heading { padding-top: 60px; padding-bottom: 30px; color: #5f5d60; } .heading h2 { font-weight: normal; } .character { float: left; width: 25%; } .cha-icon { position: relative; /*重ね表示する際の起点とする設定*/ } .cha-icon p { position: absolute; /*起点から以下のプロパティ分をオフセット*/ top: 190px; width: 160%; font-weight: bold; } .txt-contents { display: inline-block; margin-top: 20px; font-size: 15px; } .lower-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: 50px; } footer p { color: white; font-size: 12px; float: right; } footer { background-color: rgba(34,49,52,0.9); } フェーズ３_実践 「codepen」を使って実際にページ作成 メモ書きを行ったテキストファイルを使用する ※「0.25x」推奨 See the Pen サンプルページ２ by yuta-proto-biz (@yuta-proto-biz) on CodePen. フェーズ４_発信 縮尺が変更された場合に、背景が見切れたり まだまだ必要な技術は多い とは言えそれっぽいページが出来てきたと思う （コードのコメントアウト内の注釈は間違っている可能性あり） 過去記事へのリンク
