学科 レイアウトデザイン基礎⑤

By 学科 レイアウトデザイン基礎

-本日のアジェンダ-

1限目
学科 レイアウトデザイン基礎⑤
リセットCSSについて

2限目
学科 レイアウトデザイン基礎⑤
マークアップについて

3限目
学科 レイアウトデザイン基礎⑤
課題制作 

4限目
学科 レイアウトデザイン基礎⑤
課題制作 

5限目
学科 レイアウトデザイン基礎⑤
課題制作

本日のテーマ

コーディングに向けて手順を確認しましょう

リセットCSS

リセットCSSとは、ブラウザによって異なるデフォルトのCSSを打ち消してブラウザ間の表示を揃えるためのCSSファイルのことを言います。

おすすめCSS（リセットCSS +α）

最低限のリセットCSSと最初に記述した方が良い項目です。自分の使いやすい様に育てて行きましょう。

/*リセットCSS*/
* {
    box-sizing: border-box;
}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dd {
    margin: 0;
}
ul,ol {
    padding: 0;
    list-style: none;
}
img {
    max-width: 100%;
    vertical-align: bottom;
    border: none;
}
/*ここまでは変更しない*/

/*全体の指定*/
body{
    color: #333333;
    font-size: 16px;
    line-height: 1.7;
}
a{
    color: inherit;
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}

【注意】

*（アスタリスク）は全要素に効きます
この場合、全要素にbox-sizing: border-box;（paddingとborderを幅(width)と高さ(height)に含めるの設定になっています。）

おすすめCSSの効果

【デフォルト】
不要な余白がある
不要な装飾がある
画像がはみ出てる（スクロールが出る）

【リセットCSS＋α】
余白が消えて、デザインを加えやすい
リストの装飾がない
リンクの装飾がない
画像が親要素に収まる

①-5.コーディングの設計図

コーディングの前にラフ上でマークアップを書いてみましょう。

１、ラフをJPGで書き出し、そのJPGをPhotoshopで開きます。
２、画像のレイヤーを透明度70%にする。
３、タグを書き込んでいきましょう。
４、別名で保存

どのタグが適切か考えましょう（使わないタグがあってもOKです）

▼レイアウトに関するタグ

<header>
<main>
<aside>
<footer>
<nav>
<section>・・・見出しが入ってる
<article>・・・それ自体で完結
▼意味のある主なタグ

<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<p>
<ul><li>
<ol><li>
<dl><dt><dd>
<table><tr><th><td>
<img>
▼必要になった時に使うタグ

<div>
<span>

意味がわからなくなったら下記のページを参考に！

htmlの記述【body】

【オリジナルサイト】20210219_設計図

コーディング

②-1.マークアップ（HTML）

◆画像をimagesフォルダに書き出しましょう。
JPG・・・色数の多い写真
PNG・・・透過する写真、ピクトグラムやイラスト

【Photoshopでの書き出しかた】
レイヤーを右クリック＞書き出し形式
※複数レイヤーを一緒に書き出す場合は、フォルダにまとめて、右クリック

◆設計図を元にbody内にソースを書いて行きましょう。

最後にHTMLの記述をチェックしましょう
Gateway – Another HTML Lint

②-2.CSS記述

CSSの記述の順
リセットCSS→全体の設定→レイアウトの上から順に

/*リセットCSS*/
* {
    box-sizing: border-box;
}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dd {
    margin: 0;
}
ul,ol {
    padding: 0;
    list-style: none;
}
img {
    max-width: 100%;
    vertical-align: bottom;
    border: none;
}
/*ここまでは変更しない*/

/*全体の指定*/
body{
    color: #333333;
    font-size: 16px;
    line-height: 1.7;
}
a{
    color: inherit;
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}

/*ヘッダー*/
header{}
h1{}

/*ナビとメインを囲む*/
div{}

/*ナビゲーション*/
nav{}
ul{}
li{}
li a{}
li a:hover{}

/*メイン*/
main{}
section{}
h2{}

/*フッター*/
footer{}

同じ要素で違うデザインの場合、idかclassで名前を付けます。
id・・・重要な事項。１ページに１度しか使えない。
class・・・何度でも使える。

横並びは、floatでもflexboxでも可能。

【オリジナルサイト】20210225_PCコーディング途中経過