【HTML講座】第1回「レスポンシブ対応のレイアウト」最短HTML＋CSS
2022-09-04 716 1843 この記事はYoutubeにて同じ内容のものが公開されております
＜テンプレートファイル＞
ダウンロードしてお使い下さい。
▼初期テンプレート
html_01.zip
▼完成ファイル
html_01_comp.zip
＜index.html＞
<!DOCTYPE html>
<html lang="jp">
<head>
<title>サイト名</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/import.css">
</head>
<body>
</body>
</html>
＜import.css＞
@charset "UTF-8";
@import url(pc.css) screen and (min-width: 769px);
@import url(smart.css) screen and (max-width: 768px);
＜pc.css＞
@charset "UTF-8";
/********************************************
* reset
********************************************/
html,body,h1,h2,h3,h4,ul,ol,dl,li,dt,dd,p,div,span,img,a,table,tr,th,td ,
article,header,footer,aside,figure,figcaption,nav,section{
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
font-size:16px;
vertical-align:baseline;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
font-family: "游ゴシック Medium","游ゴシック体","Yu Gothic Medium",YuGothic,"ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
line-height: 1;
color:#111;
background: #fff;
}
table{ border-collapse:collapse;}
a{ color:#111;}
p{ line-height:1.6;}
ol,ul{ list-style:none; list-style-type:none;}
.sp-only{ display:none;}
/********************************************
* clearfix
********************************************/
.cf::after{
content: "";
display: table;
clear: both;
}
/********************************************
* design
********************************************/
＜smart.css＞
@charset "UTF-8";
/********************************************
* reset
********************************************/
html,body,h1,h2,h3,h4,ul,ol,dl,li,dt,dd,p,div,span,img,a,table,tr,th,td ,
article,header,footer,aside,figure,figcaption,nav,section{
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
font-size:16px;
vertical-align:baseline;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
font-family: "游ゴシック Medium","游ゴシック体","Yu Gothic Medium",YuGothic,"ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
line-height: 1;
color:#111;
background: #fff;
}
table{ border-collapse:collapse;}
a{ color:#111;}
p{ line-height:1.6;}
ol,ul{ list-style:none; list-style-type:none;}
.pc-only{ display:none;}
/********************************************
* clearfix
********************************************/
.cf::after{
content: "";
display: table;
clear: both;
}
/********************************************
* design
********************************************/
- 関連タグ:
