HTML・CSSについて情報収集(ビジネス・技術)してみた

Table of Contents

はじめに
HTML・CSS(技術)
Question1
Question2
HTML
meta
title
CSS
HTML・CSS総合
Header
Margin Padding
位置関係(背面含む)
並び
Footer
最後に

はじめに

どうもseiyaです！HTML・CSSはWEBデザインと切っても切れない関係にありますよね。プログラミングをかじっている人なら一度は触れているのではないでしょうか。ここでは以下を実施します。

HTML・CSSの技術面
HTML・CSSのビジネス面

HTML・CSS(技術)

HTML・CSSを勉強・使用している時に役に立つ情報をまとめます。

HTML・CSSのありがちなミス

誤字脱字 : まずはこちらを確認しましょう。CSS適用でやりがち。
パス・位置関係 : 存在しないファイルを参照していませんか？
競合 : 他のCSSなどでスタイルが適用されているかもしれません

もしわかりにくい場合はデベロッパーツールやhttps://validator.w3.org/#validate_by_inputで原因を見つけましょう。

HTML要素

HTML

要素	リファレンス
<! DOCTYPE html>	TAG Index
<a>	TAG Index
<body>	TAG Index
<br>	TAG Index
class	TAG Index
<h1>~<h6>	TAG Index
<head>	TAG Index
<html>	TAG Index
<img>	TAG Index
<link>	TAG Index
<meta>	TAG Index
<p>	TAG Index
<section>	TAG Index
<title>	TAG Index

Word(CSS)

display(mdn)
height(mdn)
justify-content(mdn)
padding(mdn)
width(mdn)

クラス	リファレンス
background-color	TAG Index
background-image	TAG Index
background-position	TAG Index
background-size

Question1

Related HTML words(Reference materials)

<! DOCTYPE html>(mdn)
<html>(mdn)
<head>(mdn)
<meta>(mdn)
<title>(mdn)
<link>(mdn)
<body>(mdn)
<section>(mdn)
class(mdn)
<h1-h6>(mdn)
<img>(mdn)
<p>(mdn)
<a>(mdn)
<br>(mdn)

Related CSS words(Reference materials)

height(mdn)
width(mdn)
background-image(mdn)
background-size(mdn)
background-position(mdn)
padding(mdn)
margin(mdn)

Question2

Related CSS words(Reference materials)

background-color(mdn)
display(mdn)
justify-content(mdn)

HTML

まずはHTMLの基本を説明します。

sample1.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Sample1</title>
</head>
<body>
    
</body>
</html>

こちらがHTMLの基本形になります。

確認すべき要素を列挙します。

! DOCTYPE html

バージョン(型)宣言

HTMLファイルで書かれているHTMLのバージョンを宣言する。
必ず書く必要がある。

html 要素

html文書を囲む要素(HTMLであることを示している)。DOCTYPEの後に書く。

lang=”ja”で日本語を示す。

head 要素

ブラウザなどに情報を渡すところ
headの中に書かれたものはwebページに表示されない。

title

ブラウザなどで表示される名称を指定する。

body要素

実際にWebページで表示される部分。

次にbody要素に書くものを紹介していきます。

sample1.html

<body>
    <p>この文章が表示される</p>
    <a href="https://seiya-world.com">リンクが表示される</a>
    <img src="sample1.jpg" width="400" height="200">
</body>

実際にブラウザで見てみると表示されていると思います。レイアウトはぐちゃぐちゃですが…

p要素

段落などの文章を書くときに使う

a要素

ハイパーリンクを作成する

<a href="URL">リンクのテキスト</a>

hrefにはURLを指定します。

img

画像を表示する。

<img src="画像パス" alt="代替文章">

srcは画像を指定します。altは表示に失敗したときに代わりに表示される文章です。

でも何か物足りないですよね。次にCSSで装飾する方法を紹介していきます。

CSS

CSSの基本形は以下です。

CSS

セレクタ {
  プロパティ: 値;
}

適用方法はhtmlファイルのhead領域に以下を追加します。

HTML

<link rel="stylesheet" href="cssファイル" />

sample1.html

<body>
    <p>この文章が表示される</p>
    <p id="sample-text">この文章の色が青色になる</p>

    <a href="https://seiya-world.com">リンクが表示される</a>
    <img src="sample1.jpg" width="400" height="200">
</body>

#sample-text {
    color: blue;
}

いかがでしょうか。文字の色が変われば成功です。idを指定するとその部分だけCSSを適用することができます。idは1回だけ、classは複数回使用可能です。idは「#」,classは「.」を先頭に着けます。

HTML・CSS総合

こんな感じのものを作ります。main領域はCSS適用を試していくので適宜追加されます。

とりあえず5つの領域を作りましょう。

sample2.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Sample2</title>
    <link rel="stylesheet" href="sample2.css">
</head>
<body>
    <header>
        <h1>My World</h1>
    </header>
    <main>
        <div class="mp-test">

        </div>
        <div class="image-test">

        </div>
        <div class="post-test">

        </div>
    </main>
    <footer>
        <h3>Copyright © seiya</h3>
    </footer>
</body>
</html>

sample2.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
header {
    width: 100%;
    height: 100px;
    background-color: gainsboro;
}

main {
    width: 100%;
    height: 600px;
    background-color: beige;
}

footer {
    width: 100%;
    height: 100px;
    background-color: brown;
}

.mp-test {
    width: 100%;
    height: 200px;
    background-color: blue;
}
.image-test {
    width: 100%;
    height: 200px;
    background-color: red;
}
.post-test {
    width: 100%;
    height: 200px;
    background-color: green;
}