HTMLとCSSの基本（初心者用）

Posted at 2024-05-30

（初心者向け）自身の備忘としてアウトプットしています。

HTMLの基本構造

HTMLの基本構造は以下のような構成になっています。

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    </body>
</html>

head要素には以下のようにWEBページの設定を記載します。
WEBページには表示されません。

<head>
    <meta charset="utf-8">
    <title>ページのタイトル名</title>
    <link rel="stylesheet" href="CSSのファイル名">
</head>

リスト作成は以下のようなコードを入力してください。

<ul>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
</ul>

main要素は、「copy-container」、「contents」、「contact-form」の3つの要素で構成されています。

改行される要素がブロック要素：div、h1、p
改行されない要素がインライン要素：span、a

input要素は１行のテキスト入力を受け取るための要素。input要素は終了タグが不要。
textarea要素は複数行のテキスト入力を受け取るための要素。

input要素にはtype属性を指定することができ、type属性にsubmitを指定すると、送信ボタンになります。
なお、value属性に任意の値を指定することで、ボタンに表示されるテキストを変更することができます。

<form>
    <p>名前</P>
    <imput>
    <P>内容</p>
    <textera></textera>
    <input type="submit"　value="保存">
</form>

float: left;

float: right;

以下のように余白が挿入されます。
padding-top、padding-bottom、padding-left、padding-rightのように記載することで、一部分の方向にのみ余白を入れることも可能です。

padding: 20px;
padding:20px 10px 30px 40px;(上右下左の順番）
padding:20px 10px;（上下、左右の順番）

一部のリストのみCSSを変更したいときは、以下のように要素を指定することで可能です。

.header-list li{
    color:#FFF;
}

文中の一部のみCSSの変更をしたい場合は、以下のようにspan要素を利用します。

<h1>
    ようこそ<span>日本</sapn>へ
</h1>

ーーー以下はCSSーーー
.span{
color:#FFF
}

borderプロパティを用います。枠線の太さ、種類、色を順番に指定して使用します。

.logo{
    border:5px solid red;
}