HTML、CSSで個人的によく使う基本的なタグ一覧｜Web制作初心者

という事で、

こんにちは、ヨロと申します。

今回は、もしデータが消えてしまった時用のバックアップも兼ねてという事で、

自分がよく使用する機会の多いHTML, CSSのタグを軽くまとめてみました。

ただ、完全に自分が使う用にまとめていますので、人によっては使いづらい部分もあるかも。

僕のこのページの使い方としては、例えば、

画像を載せるタグを忘れちゃったとか、リンクの下線を消すのってどんな方法があったっけ？といった時などに、

「Ctrl + F」で「画像」とか「下線」などとキーワードを入力し、ページ内で検索して出てきたタグを見て使っています。

結構前に書いたものも多いので、今自分で見ても意味が分からなかったり、

間違っている情報があったりするかもしれませんけど、今のところ便利に使えています。

とはいえ、古い情報などもあると思うので、ここのページは、今後も修正や追加をしながら使っていきます。

HTML, CSSで個人的によく使う基本的なタグ一覧：文字系、文字の調節など

行間：文字の高さ

line-height: ; px em %などで指定。

文字間：文字と文字の間の空白

letter-spacing: 2px;

inline-blockで要素を並べた時の横の隙間

親要素のfont-size: 0; にして、子要素で、font-sizeを新たに指定する。

もしくは、親要素のletter-spacingを、-6pxよりも少なくして、

子要素で、letter-spacing: normal; に戻す。

(-6pxよりも少なければ、-100pxだろうが何だろうがOK)

文字装飾系

aリンクの下線を消す

text-decoration: none;

aリンクや文字に下線を付け加える

text-decoration: underline;

リストの黒丸(点)を消す

list-style: none;

文字にマーカー

background: linear-gradient(transparent 60%, 色 0%);

文字の回り込みを防ぐ

overflow: auto;

文字が要素からはみ出してしまう

word-break: break-all;

CSS：文字の折り返し

word-wrap: break-word;

ボタンを作る時

「aタグ」に直接クラスやURLなどを指定するといいかも

全体的なサイズはpaddingで決めるか、

width横幅だけ決めて、上下はpaddingで調節した方が楽かも。

カーソルを矢印から指に

cursor: pointer;

ボタンを作る時に、親要素に「border-radius」を指定した場合、子要素がはみ出る(はみ出す)

親要素に「overflow: hidden;」でOK

要素、ボックスの角を丸くする

border-radius: 10px;

文章を入れ替え、変更する(置換)

.textchange-1 { /* ここで一度ゼロにしておいて */
	font-size: 0px;
}

.textchange-1:before or after { /* ここは beforeでもafterでもどっちでもOK(beforeは文章を手前に追加。afterは後) */
	font-size: 16px; /* ここで再度文字を表示するようにサイズ指定 */
	content: "ここに新しい内容を書く";
}

アイコンの使い方

ヘッダーに「Font Awesome」を読み込むタグをコピーし、
「Font Awesome」のアイコンタグをコピーしてHTMLに貼り付けるだけ。

読み込み速度が気になる場合は、ここでアイコンをダウンロードして使うのもOK
「http://icooon-mono.com/」

アイコンと文字のスペースを空けるには

半角スペースでOK

改行

<br class=””> など

文字だけでなくボタン全部をクリック出来るようにする方法

中の「aタグ」をブロック要素に：display: block;

その際には「width: 100%; height: 100%;」という風にサイズを指定してあげないと適用にならない。

Googleフォントを使う時

例えばこんな感じ

@import url(‘https://fonts.googleapis.com/css?family=Kosugi|Nunito’);
font-family: ‘Nunito’, ‘Kosugi’;

HTML, CSSで個人的によく使う基本的なタグ一覧：画像系

HTMLで画像を表示するタグ

<img src=”image/.jpg”>

CSSで背景画像を表示するタグ ※同時にサイズも指定しないと表示されない

background-image: url( ../image/@@.jpg);

もし反映されない時は、background-image: url( image/@@.jpg); などで..の数を気にしてみるなど。

CSSで画像を白黒に

filter: grayscale(100%);

画像が枠からはみ出る、はみ出してしまう

max-width: 100%;

画像の縦横比を枠に合わせる(比率を変えない)

max-width: 100%;
height: 100%;

もしくは

CSSで画像を指定した場合は「background-size: cover;」

HTMLで画像をした場合は「object-fit: contain;」もしくは「object-fit: cover;」など

画像サイズを変える度に画像が伸び縮みするのを防ぐ

object-fit: cover;

これに加えて画像の位置を変える場合
object-position: 横の位置 縦の位置;(%で指定)

背景画像を繰り返さないようにする

background-repeat: no-repeat;

CSSで画像の縦横比を揃える、固定する方法

width: 100%; height: auto;といった感じで「auto」を使うのが便利

CSSで背景画像の位置が合わない、画像の表示を枠の中心(中央、真ん中)に

background-position: center; %で指定してもOK

background-position: 0px(左からの位置) -30px(上からの位置);

background-size: cover;

などいろいろ、

もしくは、背景がどうしても合わないという場合は、自分で画像を自分の思った通りのサイズに作り変えちゃう。

画像をabsoluteで右上に表示させる

親要素 → 「position: relative;」

子要素 → position: absolute; top:0%; right:0%;

背景だけを透過させる(透かし、透明度を変える)

opacity: ; → 0.5といったように小数点を使う

背景だけを透過(文字列は透過させない)
opacity は使わずに background: rgba(255, 255, 255, 0.7); など、

※rgba()を用いる場合、16進数から10進数表記に直さなければならない。
RGBAに変換してCSSに記載 → opacity: 1; のまま、background: rgba(**, **, **, 0.5);

画像をぴっちり横並びにする方法

display: flex;

他には、
display: inline-block;
float: left;　など

画像を縦に並べるだけならCSSよりもHTMLだけの方が簡単

<img src=”＊＊.jpg”>

上のHTMLタグを使って、CSS側を max-width: 100%; にするだけ

そうすれば画面のサイズを変えても自動的にサイズも変えてくれる。

HTML, CSSで個人的によく使う基本的なタグ一覧：Flexbox系

flexboxで要素を縦に並べる場合(縦並び)

display: flex;
flex-direction: column;

Flexboxでの中央揃え(中心)

justify-content: center;

justify-contentが効かない場合は、他でmarginとかが指定されている事がある

中の要素を左に寄せる(左寄せ)は → justify-content: flex-start;
中の要素を右に寄せる(右寄せ)は → justify-content: flex-end;

Flexboxで要素同士の幅を均等に

justify-content: space-between;

Flexboxでロゴだけ左

.main-nav {
  display: flex;
}

.main-nav li:first-child {
  margin-right: auto;
}

header div:first-child {
  margin-right: auto;
}

など

Flexboxの子要素のどれか一つを指定して使う場合

div:nth-child(2) /* divの2つ目 */
li:nth-child(5) /* liの5番目 */

横並びの要素の左右を逆に交換する場合

Flexをかけている親要素に、flex-flow: row-reverse;

flexboxを使った時の要素間の間隔(隙間、空白)を作る方法

子要素にmarginなど

ボックスや画像を横並びにし、ブラウザのサイズを変えても自動でサイズが変わるようにする方法

例えば、画像を3つ横に並べたい場合(3カラム)は子要素の1つの画像の「widthを33.3%」にして「float」や「flexbox」
「2カラムなら50%」「4カラムなら25%」 そしてheightだけを指定(出来れば%)
周りの枠はborderで作ってもよし

Flexboxで画像を並べた時に右端(画面端)で折り返し、折り返す方法

この場合はきちんと「flex-flow: wrap;」を入れないと、折り返さずにずっと右に続く

flexboxで縦並び ブラウザサイズに合わせて画像サイズも自動的に変える方法

.親要素 {
	display: flex;
	flex-direction: column;
}

.子要素 {
	background: url( 画像ファイル ) no-repeat;
	width: 100%;
	padding-top: calc(画像高さ / 画像横幅 * 100%);
	background-size: 100%;	
}

または、

.子要素 {
	background-image: url( ../image/＊＊.jpg);
	width: 100%;
	padding-top: calc(620 / 824 * 100%); 
	background-size: cover; 
}

など。

Flexboxで高さを揃えない(高さが揃ってしまう場合)

align-items: baseline;

Flexboxで子要素の割合、比率を決める(何対何)という風に指定する場合

例えば、2:1にしたい場合

.親要素 {
	display: flex;
}

	.子要素1 {
		flex: 2; /* 箱2個分 */
	}

	.子要素2 {
		flex: 1; /* 箱1個分 */
	}

こんな感じ　→　□□ □

幅の計算に関しては、このサイトとか分かりやすいかも。

https://parashuto.com/rriver/development/how-flex-item-width-is-calculated

HTML, CSSで個人的によく使う基本的なタグ一覧：要素の並び替え：位置や配置・順番など

ヘッダーを固定する場合

position: fixed;

要素を横並びにする

float: left;
display: flex; など

子要素がなぜか真ん中、中心にいかない場合
別のDIVで囲って中を「text-align: center;」でもOK

【CSS】flexで中の要素を中央(真ん中)に寄せる方法

親要素に　justify-content: center;

要素を右寄せ

margin-left: auto;
Flexboxを使用している場合、中の要素を右寄せ：justify-content: flex-end;

右寄せで上下中央(中心)

margin-left: auto;
margin-top: auto;
margin-bottom: auto;

もし文字、要素がどうしても上下中央に揃わない場合：文字の入っている箱の親要素にもflexをかける

display: flex; /* 親要素に */
justify-content: center;
margin: 0 auto; /* ここで上下左右真ん中に */

align-items: center; など。

親要素 {
	display: flex;
}

子要素 {
	margin: auto;
	justify-content: center;
	text-align: center;
}

でもOK。

縦に並べる(縦並び)

vertical-align: middle;
display: block;

要素を中心にする方法

text-align: center;
margin: 0 auto;
display: inline-block;

position: absolute; を使って中央に配置するやり方

親要素に「position: relative;」

子要素に、

top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;

横は関係なく上下の真ん中に揃えたいだけならただ、margin: auto 0; でもOK

フッターのコピーライト部分は中央に、SNSボタンは右端にという場合

<div class="footer-wrapper">
	<div class="copyright"></div>
	<div class="sns"></div>
</div>

.footer-wrapper {
	display: flex;
}

	.copyright {
		margin: 0 auto;
	}</strong>

	.sns に関しては何もしなくても勝手に右端に行く

微妙に要素の位置をずらす、要素同士を重ねる場合

position: relative;
top: 40px;
left: 30px;

など

高さを今表示されてる画面に合わせる方法：ブラウザの高さに合わせる

height: 100vh;

jQuery でもいける

$(document).ready(function () {
  hsize = $(window).height();
  $("section").css("height", hsize + "px");
});

$(window).resize(function () {
  hsize = $(window).height();
  $("section").css("height", hsize + "px");
});

position: fixed; で固定したものを無理矢理右寄せにする方法

right: 0;

HTML, CSSで個人的によく使う基本的なタグ一覧：メニューボタン

メニューボタンの間の縦線：li で作る

こんなの↓↓

メニュー | メニュー | メニュー | メニュー | メニュー

li + li { border-left: 1px solid #cccccc;}

li要素(リスト要素)を横並びにする

display: inline;

Flexboxで横並びにしてもOK

HTML, CSSで個人的によく使う基本的なタグ一覧：ホバー、簡単なアニメーション系

hoverで画面を暗くする

単純に背景を暗くするだけならこれだけでOK
filter: brightness(0.3);

画像にカーソルを合わせた時にズームするやり方

まず、適当なクラスでimgを囲む

<div class="zoom"><img src="image/@@.jpg"></div>

.zoom {
	overflow: hidden;	/* hoverでズームした時に、枠からはみ出した部分を隠す */
}

.zoom img:hover {
	transform: scale(1.1);	/* 画像の拡大率 */
	transition-duration: 0.3s;	/* 時間 */
	}

HTML, CSSで個人的にたまに使う基本的なタグ一覧

リンクを押すとトップまで飛んでしまう

a href=”#” の #を、javascript:void(0) に変えればOK

クリックして、指定の位置まで移動(ジャンプさせる、アンカー)

① 飛ばしたい位置のクラスにidをつける – id=”○○”

② リンクの後に#○○とつける　→　クリックすると①まで飛ぶ

http://@@@.html#○○ という風に続けて書く

透明(色なし)のボーダー(線)

border: 1px solid transparent;

Sublime Textで文字の置き換え：置換

「Ctrl + H」もしくは「Ctrl + SHIFT + F」

HTML, CSSで個人的によく使う基本的なタグ一覧：その他

奇妙な隙間

font-size: 0px;にすればなくなる

margin: 0px;
padding: 0px;

なども場合によっては効果的

グラデーション

background: linear-gradient(#05FBFF, #1E00FF); など

CSSでテーブル

ここのサイトが便利「https://tabletag.net/ja/」

table {
	width: 100%;
}

	table , td, th {
		border: 1px solid #595959;
		border-collapse: collapse;
		text-align: center;
	}

こんな感じ。