【HTML講座】第1回「レスポンシブ対応のレイアウト」最短HTML+CSS

2022-09-04    516   1228 この記事はYoutubeにて同じ内容のものが公開されております

HTML講座


<テンプレートファイル>


ダウンロードしてお使い下さい。
▼初期テンプレート
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 Pゴシック","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 Pゴシック","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
********************************************/

  • 関連タグ:
カテゴリ: HTML

comment 登録なしでご自由にご入力いただけます(^^)ぜひぜひ記事のご感想をお聞かせ下さい。

お名前とコメントは入力必須です。

コメントの文字数が短すぎます。

この内容でコメントを送る
コメントをする

目が疲れている方向けにラジオ系Youtubeを始めました

オススメのHTMLに関する記事

この記事がお役に立てましたら是非シェアのご協力お願いします。