見出し画像
Photo by cheap_sens

第一話へっぽコーダーの日記htmlとcss

Naoki

どうも皆さんはじめましてへっぽコーダーのNaokiです！

今日は誰にでも分かるhtmlとcssを皆さんに共有したいと思います！

まずはじめにhtmlとcssとはこのインターネットに存在するページを構築する部品のようなものです！具体的にはhtmlが基本的な文章や写真等の要素を書きcssで装飾するような感じです！

html レベル01 htmlの基本ルール

htmlには基本的なルールがあります。このルールは今後コードを打っていく上で非常に重要になってくるので気をつけてください！

一番はじめはひな形を使うべし

ひな形とは、htmlのはじめに書くコードの初期設定のような物だと思いますこれを書かないとcssとリンクが出来なかったりするので必ず書くようにしましょう！おそらくほとんどの方がコードエディター(コードを書くアプリ）で書かれていると思うのでググればひな形の出し方が分かるとは思いますが下にも一応書いておくのでこちらをコピペして頂いてもOKです！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

htmlは<body>の中に書くべし

htmlは必ず<body>の中に書いてください！この中で自分が書きたいコードを書けばhtmlのルールとしては大正解です！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>こんにちは</h1>
</body>
</html>

htmlはタグで囲むべし

htmlにはタグと呼ばれる物がありそれぞれのタグがそれぞれに役割があります。その数は非常にたくさんの種類がありますが全てを覚える必要は無く必要なときに必要なタグを適切に調べれるようになれば完璧です！また、このタグには内部SEOという役割がありgoogle等での検索順位を上げてもらう上で非常に重要な役割を果たします！コードがきれいであればあるほどSEO順位は上がっていき検索結果の上位になり人に見てもらいやすくなります！

<h1>これは見出しタグ１〜６まであります</h1>
<p>これは文章等を書くときに使われる段落タグ</p>
<img>　←これは画像などで閉じタグがない！

classを指定してcssを使いやすくするべし

classとはhtmlのタグに対して名前をつけるような感じだと思います。classを指定することによってそのhtml要素に対しcssで個別に装飾をつける事が出来ます！これによりデザインの幅が大きく広がるので覚えて置いて下さいまたクラス名には特に決まりは無く自分がわかりやすい名前で良いと思いますが一つだけしては行けない事があり「数字から初めてはいけない」これは絶対にしてはいけません、なので数字からは始めないようにしましょう！

<h1> class="h1_01"</h1>

css レベル01 cssの基本ルール

cssはhtmlで作ったものに対して位置を指定したり色を変えたり大きさを変えたり出来るコードのことです。htmlだけでは無機質で寂しいページもこれがあることによりおしゃれなページヘと大変身します！

cssにも非常に多くの種類がある

html同様非常に多くの種類がありますが全てを始めから覚える必要はありません。必要な時に適切なコードを探せるように出来るようにしましょう！わからない事があればググれば大抵の事は出てきます例えば「css 文章の中央揃え」などで調べると直ぐに出てきます！

クラス名の前には「　．」から始める

cssを効かせるにはhtml上で指定したclass名の前に「　．」をつけます。cssが効かない等で行き詰まった場合は「　．」がついているかを一度確かめて見ましょう！下は一例で文字サイズが10pxで文字色が黒になります

.h1_01{
    font-size: 20px;
    color: black;
}

まとめ

今日は超絶基本的で簡単なhtmlのご説明でした！htmlもcssもいっけん複雑そうですがある程度覚えていしまえば後は応用なので案外簡単だと思います自分もまだまだ初心者ですが皆さんと一緒にがんばります！以上へっぽコーダーNaokiでした！