HTML&CSSノートfrom Progate2

はじめに

Progate で勉強した HTML&CSS のメモ

li タグから・を消す

css のlist-styleをnoneに指定することで・を消すことができます

<ul>
  <li>no bullets</li>
  <li>no bullets</li>
</ul>

li {
  list-style: none;
}

HTML の要素を横に並べる

css のfloatをleftに設定ことで右から左端から横にに並べることができます
rightにすることで右端から並べることができます

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
</ul>

li {
  float: left;
}

余白を付ける

paddingを適当な単位で指定することで余白を付けることができます

種類	余白の場所
padding-top	上に余白を追加
padding-right	右に余白を追加
padding-left	左に余白を追加
padding-bottom	下に余白を追加

<div class="logo1"></div>

.logo1 {
  padding: 20px;
}

クラスの中のタグにのみ CSS を適用させる

クラスの中だけのタグに css を適用させるには.クラス名 タグ名のように記述します
listクラスの中のliタグに適用させるときには以下のように書きます

.list li {
  /*cssを記述*/
}

span タグ

改行することなく文字の途中で色を変えたい時などに使います

<h1>Hello <span>world</span></h1>

span {
  color: #ff0000;
}

上記のコードの場合worldのみ赤色になります

境界線を引く

境界線を引くには css のborderを使います
以下のように記述します

.sample {
  /*幅　スタイル　色の順に指定*/
  border: 5px solid red;
}

種類	線の場所
border-bottom	下に引かれる
border-top	上に引かれる
border-left	左に引かれる
border-right	右に引かれる

margin

padding と margin

paddingは境界線の内側marginは外側に余白を追加します

種類	余白の場所
margin-bottom	下に追加
margin-top	上に追加
margin-left	左に追加
margin-right	右に追加

文字の入力

input タグ

inputタグは一行の文字を入力するのに使います

inputタグには様々な属性を付けることができます

属性	意味
text	テキストボックスをつくります
password	パスワードボックスを作ります
checkbox	チェックボックスを作ります
radio	ラジオボタンを作ります
file	送信するファイルの指定をします
hidden	隠しデータをサーバーに送信する時に使います
submit	送信ボタンを作ります
reset	リセットボタンを作ります
button	汎用ボタンを作ります
image	画像ボタンを作ります
こちらを参考にしてます

textarea タグ

textareaタグは複数行の文字を入力するのに使います