おはようございます。優灯です。
個人的に毎日暑くて暑くて限界を迎えております。
皆様お元気でしょうか?
プログラミングの課題を毎日少しずつ進めながらも、
何故思うように構築出来ないのか、自分は何がわかっていないのかが
わからず苦しんでおりました。
divという箱を作ってブロックのように並べる。
というのはわかっていたのですが、そこの理解が浅く詰まっていただけでした。
暑さのバテと、頑張りのバテで文章を書く元気が無いので、
将来の自分用に現在の全力で書いたものを残しておきます。
汚かろうが、これが今の自分です!きっと将来宝物になります。
(共通CSS記述・メイン以降レスポンシブ化)
それでは申し訳ありませんが今回はこの辺で。
<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><title>sample</title><link rel="stylesheet" href="style2res.css"></head><body><header class="header"><div class="left-icon"><a href="#"><img src="images/logo_white.png" alt="" class="left_inner_image"></a></div><div class="right-menu"><ul class="nav"><li><a class="sign" href="#">新規登録</a></li><li><a href="#">ログイン</a></li><li><a href="#">Q&A</a></li></ul></div></header><main><img src="images/mac-image.png" alt=""></main><div class="conteiner"><div class="row"><div class="comoly"><h2><strong>COMOLYとは?</strong></h2><h3>-What is COMOLY?-</h3></div><div class="intro"><div class="intro-right"><img src="images/Man talking in Living Room.png" alt=""></div><div class="left-box"><div class="intro-left"><h1>COMOLYはひきこもり当事者向けに<strong>ワーク・コミュニティ</strong>を提供し安心して繋がれるプラットフォームです</h1></div><div class="intro-regi"><a href="#">登録してみる ></a></div></div></div></div></div><div class="conteiner"><div class="middle"><div class="comoly"><h2><strong>ワーク</strong></h2><h3>- Work -</h3></div><div class="work-text"><h2>まずは弊社スタッフが簡単なヒアリングをして、あなたに合った仕事とマッチング。<br>スキルや得意なことをベースに自宅で出来る簡単な入力作業からデザインまで、あなたをサポートしたい企業からの仕事を請け負います。<br>ご自身のペースや希望を尊重しますので、気軽にご相談ください。</h2></div><div class="work-img"><img src="images/Girl-Work-f63fce72dffd190c4d954c994c1fb5d955e75c3de861b0b9c3b55c92fbf7f853.png" alt=""></div></div></div><div class="conteiner"><div class="flexbox"><div class="item"><img src="images/work01-1f0b52c72c1ebc2b064f317fbf5a30a334d9b60f407d12ca1bd9f3f40961dba5.png" alt=""></div><div class="item"><img src="images/work02-e8db769f63fafc61753ff74d1237d0a25a8a3da3bb1cc89cb7a322407888deb1.png" alt=""></div><div class="item"><img src="images/work03-232c923003263d834accedbbf049da0f9ada1c28b0739ac8a920e6c165db865a.png" alt=""></div><div class="item"><img src="images/work04-f2004421c7032add1305a52b099f20a18ae747cc300ccccd77d2ec9a92e37707.png" alt=""></div><div class="item"><img src="images/work05-e7a46ab0ffd77dd97763a59ebbdab45e51a54c77637fd5389c9e8dda56ce627e.png" alt=""></div><div class="item"><img src="images/work06-c6c58e1ea7abcffaa0c70bcabebdf90fdc875b48c5719f8bbcda6a102bc5f1b3.png" alt=""></div><div class="item"><img src="images/work07-017191d341314456a6547c9849d4d739c7eec8248a02d1f8abb838449ed8c03c.png" alt=""></div><div class="item"><img src="images/work08-baca21c9903068829e9ac419b472b0d72a2b97503f838f44417144680fa63286.png" alt=""></div><div class="item"><img src="images/work09-ab4ceb3ff2a7996f8bc74eb1aa393fa980d01ffe50d17a83b06db8b497040f5f.png" alt=""></div></div></div><div class="conteiner"><div class="bottom"><div class="comoly"><h2><strong>コミュニティ</strong></h2><h3>- Community -</h3></div><div class="com-text"><h2>COMOLYに登録している方がイラストや写真、漫画を投稿したり閲覧したりできます。あなたの感性を生かした作品・成果物をぜひシェアしてみてください。<br>ユーザーが参加できるイベントをオンラインとオフラインで開催します。ユーザーとサポーターを繋ぐ有意義な場所・空間を造ります。</h2></div><div class="com-img"><img src="images/1592690299-5919670ddd6b9f90866d8e1055c37b728005365ff4e12c8bf94089ccb68c77bf.png" alt=""></div><div class="bottom-regi"><a href="">新規登録 ></a></div></div></div><div class="conteiner"><div class="info"><div class="comoly"><h2><strong>お知らせ</strong></h2><h3>- Infomation -</h3></div><div class="content"><!-- 多分データベースから投稿を表示する --></div></div></div><div class="staff"><a href=""><img src="images/staff_blog-a07922319b2d8361e3958067e3e89b5cb3fe10dcdd289f03dad09326f111b936.png" alt=""></a></div><footer class="fotter"><div class="fotter-menu"><ul><li><a href="">利用規約</a></li><li><a href="">プライバシーポリシー</a></li><li><a href="">運営会社</a></li></ul></div><div class="sns"><ul><li><a href=""><img src="images/TW_icon-c74f7a71d7ce6db008d3c55ae0d683f09709cdecf54234b6a3e5d1f0a5cfc8f8.png" alt=""></a></li><li><a href=""><img src="images/FB_icon-7231d0eb438517a3797af02c59c7d5397b73a0370984d0c8badbdc0acc9738e4.png" alt=""></a></li><li><a href=""><img src="images/line_icon-69708962d5aa7331fa85da344e8567212f37bf18fc7828743365ccad1490c287.png" alt=""></a></li></ul></div><div class="copyright"><p>Copyright © Meta Anchor Inc. All Rights Reserved.</p></div></footer></body></html>
* {margin: auto;box-sizing:border-box;}.header {background-color: #2cccd4;height: 130px;}.left-icon {float: left;width: 30%;}.left-icon img {width: 60%;margin: 2% 0 3% 30%;}.right-menu {float: right;width: 60%;margin: 0.5% 1%;}.right-menu li {float: right;list-style: none;margin: 2% 1.5% 0 1%;}.right-menu a {color: #ffffff;text-decoration: none;font-size: 1.1rem;font-weight: bold;display: block;padding: 10px;}.sign {background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);;}.sign:hover {background: #ffa500;}.right-menu a:hover {background-color: #ffa500;}main {text-align: center;clear: both;background-color: #2cccd4;}main img {width: 50%;}.conteiner {height: 600px;width: 100%;background-color: white;}.row {width: 80%;}.comoly {text-align: center;}.comoly h2 {font-size: 2.5rem;font-weight: bold;margin-top: 50px;color: #0cd4ec;}.comoly strong {background: linear-gradient(transparent 50%, #c0eff1 30%);}.comoly h3 {font-size: 1.75rem;font-family: inherit;font-weight: 500;margin-bottom: 5%;}.intro {text-align: center;}.left-box {width: 50%;float: left;}.intro-left h1 {letter-spacing: 0.5rem;font-size: 2em;line-height: 3.5rem;font-weight: 500;font-family: inherit;}.intro-left strong {color: #0cd4ec;background: linear-gradient(transparent 50%, #c0eff1 30%);}.intro-regi {text-align: center;width: 75%;margin-top: 15%;border-radius: 45px;background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);}.intro-regi a {font-size: 25px;font-weight: bold;color:white;text-decoration: none;padding: 20px;display: block;}.intro-right img {width: 50%;float: right;}.middle {width: 80%;margin-top: 50px;text-align: center;}.work-text {width: 50%;float: right;}.work-text h2 {font-weight: 400;}.work-img img {width: 45%;}.flexbox {display: flex;flex-direction: row;width: 70%;flex-wrap: wrap;}.item {padding: 0 3%;}.bottom {width: 80%;text-align: center;}.com-text {width: 45%;float: left;}.com-text h2 {font-weight: 400;}.com-img img {width: 45%;}.bottom-regi {text-align: center;width: 50%;margin-top: 15%;margin-bottom: 5%;border-radius: 45px;background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);}.bottom-regi a {font-size: 25px;font-weight: bold;color:white;text-decoration: none;padding: 20px;display: block;}.info {width: 80%;text-align: center;margin-top: 30%;}.staff{text-align: center;margin-bottom: 10%;}.staff img {width: 60%;}footer {background-color: #2cccd4;height: 350px;}.fotter-menu {margin-left: 100px;padding-top: 50px;}.fotter-menu li {margin-bottom: 10px;}.fotter-menu a {color: white;text-decoration: none;}.sns ul {list-style: none;width: 15%;float: left;margin-left: 5%;}.sns img {width: 30%;float: left;padding-right: 5%;}.copyright {text-align: center;margin-top: 12%;}.copyright p {font-weight: 300;color: white;font-size: small;}.intro-regi a:hover,.bottom-regi a:hover{color: #007bff;}/* スマホ用? */@media (max-width:670px) {.left-icon {width: 100%;text-align: center;}.left-icon img {width: 40%;margin: auto;}.right-menu {width: 100%;}.right-menu li {width: 30%;margin: 0 3% 0 0;text-align: center;}main img {width: 80%;vertical-align: middle;margin-top: 10%;}}/* タブレット用 中央画像のみ調整 */@media (max-width:1000px) {main img{width: 60%;}}