連休中の課題 - webサイトデザインAI入門科授業用ブログ

cssは外部参照で記述すること
cssに適切なリセットをかける事
767px以下はモバイルレイアウトになるようにメディアクエリーを設定する
flexプロパティを使ってコンテンツを横に並べる
画像を自身で用意しトリミングしフルードイメージに設定する
h1にGoogle Fontsを使用すること
Google Mapを埋め込みレスポンシブ対応させること
transformとtranstionを使ってホバーアクションを設定する
適切な余白を設定すること。
作例通りのレイアウトにする。

使用テキスト

Net Smart
よりスマートなインターネットライフを


HOME
CONCEPT
SERVICE
ACCESS


必要なものは、
ビジネスの価値を届けるデザインの力。
Net Smartは、ビジネスとユーザーを理解し、
関係性を構築するためのストーリーの設計とUXデザインをご提供し、
よりスマートなインターネットライフを送るお手伝いを致します。


CONCEPT
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

SERVICE
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

ACCESS
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

会社情報
会社名
株式会社Net Smart
住所
東京都豊島区南池袋
電話番号
03-0000-0000
従業員
1000名
Map

© Net Smart all rights reserved

作例
PCレイアウト
f:id:yachin29:20210709145712j:plain

SPレイアウト
f:id:yachin29:20210709145944p:plain

作例

felica29.starfree.jp

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"
<meta name="viewport" content="width=device-width">
<title>Net Smart</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="inner">
<h1>Net Smart</h1>
<p class="tagline">よりスマートなインターネットライフを</p>
</div>
<nav class="g-nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">CONCEPT</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">ACCESS</a></li>
</ul>
</nav>
</header>

<div class="main">
<div class="keyVisual">
<img src="img/01.jpg" alt="">
</div>

<div class="main-txt">
<h2>必要なものは、<br>
ビジネスの価値を届ける<br class="sp">デザインの力。</h2>
<p class="lead">Net Smartは、ビジネスとユーザーを理解し、<br>関係性を構築するためのストーリーの設計とUXデザインをご提供し、<br>よりスマートなインターネットライフを送るお手伝いを致します。</p>
</div>

<div class="wrapper">
<div class="box">
<h3>CONCEPT</h3>
<p class="photo"><img src="img/01.jpg" alt=""></p>
<p class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
</div><!-- /.box -->
<div class="box">
<h3>SERVICE</h3>
<p class="photo"><img src="img/02.jpg" alt=""></p>
<p class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
</div><!-- /.box -->
<div class="box">
<h3>ACCESS</h3>
<p class="photo"><img src="img/03.jpg" alt=""></p>
<p class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
</div><!-- /.box -->
</div><!-- /.wrapper -->

<div class="access">
<div class="info">
<h3>会社情報</h3>
<dl>
<dt>会社名</dt>
<dd>株式会社Net Smart</dd>
<dt>住所</dt>
<dd>東京都豊島区南池袋</dd>
<dt>電話番号</dt>
<dd>03-0000-0000</dd>
<dt>従業員</dt>
<dd>1000名</dd>
</dl>
</div><!-- /.info -->

<div class="map">
<h3>Map</h3>
<div class="map-inner">
<iframe class="g-map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3238.929646365801!2d139.71221001460668!3d35.7279487350171!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d68f6cfe057%3A0xddd17dcd7ecaf745!2z6LGK5bO25Yy656uL5Y2X5rGg6KKL5YWs5ZyS!5e0!3m2!1sja!2sjp!4v1626160320637!5m2!1sja!2sjp"  style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div><!-- /.map-inner -->
</div><!-- /.map -->

</div><!-- /.access -->
</div><!-- /.main -->
<footer>
<p><small>2010-2021 &copy; Net Smart all rights reserved.</small></p>
</footer>
</body>
</html>

style.css

@charset "UTF-8";
html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0;box-sizing:border-box;}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}.wrapper{overflow:hidden;}body{overflow-y:scroll;}img{max-width: 100%;}

/* ### レイアウト ### */

header {
margin-bottom: 30px;
}
.inner {
max-width: 1200px;
margin:0 auto;
}
h1 {
font-family: 'Josefin Sans', sans-serif;
font-size: 48px;
padding: 16px 0;
}
.tagline{
margin-bottom: 20px;
}
/* ナビゲーションメニュー */
.g-nav {
background:#185A68;
}
.g-nav>ul {
max-width: 1200px;
margin: 0 auto;
display: flex;
}
.g-nav li {
width: 25%;
}
.g-nav a {
display: block;
border-right: solid 1px #fff;
color: #ffffff;
text-align: center;
line-height: 50px;
}
.g-nav li:first-of-type>a{
border-left: solid 1px #fff;
}
.g-nav a:hover {
background: #089198;
}
.main{
max-width: 1200px;
margin:0 auto 100px;
}
.keyVisual {
max-width: 1200px;
margin-bottom: 60px;
}
.main-txt{
text-align: center;
margin-bottom: 80px;
}
.main-txt>h2{
font-size: 30px;
margin-bottom: 30px;
}
.lead{
font-size: 18px;
}
.wrapper{
max-width: 1200px;
margin: 0 auto 100px;
display: flex;
justify-content: space-between;
padding: 20px;
}
.box{
width: 32%;
padding: 10px;
}
h3 {
font-size: 22px;
color:#185A68;
border-left: solid 16px #089198;
margin:20px 0;
padding: 0 0 0 10px;
}
.box>p {
margin-bottom: 20px;
}
.photo{
height: 200px;
overflow: hidden;
}
.photo>img{
object-fit: cover;
width: 100%;
height: 100%;
}
.box:hover{
box-shadow: 0 0 10px #999;
transition: 0.2s;
}
.box:hover img{
transform: scale(1.2);
transition: 0.2s;
}

.access{
max-width: 1200px;
margin: 0 auto 100px;
display: flex;
justify-content: space-between;
}
.info{
width: 46%;
}
.info>dl{
display: flex;
flex-wrap: wrap;
}
.info dt{
width: 30%;
font-weight: bold;
}
.info dd{
width: 70%;
}
.info dt,.info dd{
border-bottom: 1px solid #185A68;
margin-bottom: 20px;
padding: 10px;
}
.map{
width: 46%;
}
.map-inner{
width: 100%;
height: 400px;
}
.g-map{
width: 100%;
height: 100%;
}

footer {
color: #ffffff;
background-color: #185A68;
padding: 10px 10px 20px;
}
footer>p {
font-size: 18px;
text-align: center;
padding: 20px 0;
}
.sp{
display: none;/* brを無効にする */
}

@media (max-width:1199px){
.g-nav li:last-of-type>a{
border-right:0;
}
.g-nav li:first-of-type>a{
border-left:0;
}
.inner,.wrapper,.access,.sns{
padding: 0 10px;
}
}
@media (max-width:767px){
header {
text-align: center;
margin-bottom: 0;
}
h1 {
font-size: 32px;
padding: 6px;
margin: 15px auto;
}
.g-nav a{
font-size: 14px;
}
.keyVisual {
height: 240px;
margin-bottom: 20px;
}
.main{
margin: 0 auto 50px;
}
.main>h2{
font-size: 22px;
margin-bottom: 20px;
padding: 0 10px;
}
.lead{
margin: 0 auto 50px;
font-size: 14px;
padding: 0 10px;
text-align: left;
}
.lead>br{
display: none;
}
.wrapper{
display:block;
}
.box{
width: 100%;
padding: 0;
margin-bottom: 50px;
}
.box:hover{
box-shadow: none;
transition: none;
}
.box:hover img{
transform: none;
transition:none;
}
.access{
display: block;
}
.info{
width: 100%;
margin-bottom: 40px;
}
.map{
width: 100%;
}
.map-inner{
height: 300px;
}
.sp{
display: block;/* brを有効にする */
}
}