【Udemy】実践Webサイトコーディング講座｜ HTML5とCSS3を使って、カフェのサイトやWebメディアサイトを作ってみよう【感想】

お久しぶりです。しめさばです。Udemyでの独学を初めて1ヶ月程経過したでしょうか。

【世界で30万人が受講】フルスタック・Webエンジニア講座（2019最新版）
https://www.udemy.com/share/101XOkBkYbcl9XR3g=/

はじめての SQL ・データ分析入門 -データベースのデータをビジネスパーソンが現場で活用するためのSQL初心者向コース
https://www.udemy.com/share/10261aBkYbcl9XR3g=/

【ゼロから始めるデータ分析】ビジネスケースで学ぶPythonデータサイエンス入門
https://www.udemy.com/share/1020MEBkYbcl9XR3g=/

を順番に行いつつ今は表題の

実践Webサイトコーディング講座　｜ HTML5とCSS3を使って、カフェのサイトやWebメディアサイトを作ってみよう
https://www.udemy.com/share/1021q2BkYbcl9XR3g=/

に取り組んでいるところで、中級編に差し掛かった所です。

色々学びながら、デザインさえ固まればまぁ何か書けそうくらいにはなりました。

で、初級編では
こんなの
を作成するわけなのですが、作成プロセスも動画で説明等あったので、気付きを書いて行こうかと思います。

この記事の目次

最初はhtmlのdivタグでアウトラインを作成する

divタグの最初と最後を分かりやすく

【HTML】
<!– #wrapperここから –>
<div id=”wrapper”>

</div>
<!– #wrapperここまで –>

こんな感じにコメントタグを入れる。

floatを使い終わったらリセットタグを入れる

【HTML】
～floatを使い終わったら～
<div class=”clearfix”></div>

【CSS】
div.clear { clear: both;}

CSSの最初には「リセットcss」を入れる

/* ========================================
    リセットcss
========================================= */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {  margin: 0;  padding: 0;  border: 0;  font-style:normal;  font-weight: normal;  font-size: 100%;  vertical-align: baseline;}article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {  display: block;}html{overflow-y: scroll;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: ”; content: none;}input, textarea,{margin: 0; padding: 0;}ol, ul{list-style:none;}table{border-collapse: collapse; border-spacing:0;}caption, th{text-align: left;}a:focus {outline:none;}
/* micro clearfix */.cf:before,.cf:after {    content: ” “;    display: table;}.cf:after {clear: both;}.cf {*zoom: 1;}

こんなやつを入れて、ブラウザでの自動反映をリセットする。

CSSのそれぞれにどこに反映するCSSかコメントを入れる

/* ========================================
    ヘッダー用
========================================= */

header {
　　width: 960px;  height: 89px;
　   background-color: red;
}

こういうのを入れて兎に角後の可読性を向上させる。