【Webデザイン】HTMLとCSSの基本

  • URLをコピーしました!

HTMLとCSSを使ったWebデザイン手法をまとめた記事です。

僕の専門はどちらかというとバックエンド寄りなので、記述の誤りがあるかもしれません。間違いのご指摘は大歓迎ですので、コメント欄よりお願いいたします。

よく使うテクニックの逆引き辞典のように使うことを想定しました。

かろちょあ

書きかけの部分がありますので、随時記事修正していきますm(__)m

HTMLの基本タグ

HTMLはタグの集合体です。

ここではHTMLでよく使われるタグを解説していきます。

!DOCTYPEタグ

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
	<title>Sample Page</title>
</head>
<body>
</body>
</html>

<!DOCTYPE html>はHTML5という規格で書かれたことを表すタグです。

meta charsetは文字コードを表し、これをShift JISなどとしてしまうと文字化けの原因に。標準的に使われているUTF-8を選択しましょう。

viewportはレスポンシブWebデザインをするときに必要なので入れておきます。

Visual Studio Codeでは!を入力した後にTabキーを押すと上記が勝手に入力されて便利。

inputタグ

ユーザーがWebページ上に投稿する時の窓口になってくれるのがinputタグです。

ひと口にinputタグと言っても、type属性を変えることでテキストボックスになったり、チェックボックスやボタンにすることも可能。

<!-- テキストボックス -->
<input type="email" name="mymail">

<!-- チェックボックス -->
<input type="checkbox" name="mycheck">

<!-- ボタン -->
<input type="button" name="mybutton">

単独タグ(空要素)なので終了タグは不要で、nameは必須属性のため省略不可です。

<input type="text" id="name" name="name" class="form-control" placeholder="例) 山田 太郎">

placeholderで薄い文字で例を入れられます。アクセシビリティの観点から「例)」と入れた方が視認性の点で良いと言われています。

buttonタグ

<!-- ボタンタグ【HTML5】 -->
<button type="submit">送信</button>

<!-- inputタグを使った方法【古いHTMLタグなので非推奨】 -->
<input type="submit" value="送信">

inputタグでも作れますが、ボタンはbuttonタグで作るのが現在のスタンダード。

type属性には次の種類があります。

  • button:汎用的に使えるもの。javascript制御にも使う
  • menu:メニューの表示ボタン
  • reset:リセット用のボタン
  • submit:送信するためのボタン

type属性は省略可能で、書かないとbuttonになります。

labelタグ

ラベルタグとテキストフィールドを結びつける方法

<div>
  <label for="mymail">メールアドレス</label>
  <input id="mymail" type="email" name="mymail">
</div>

labelタグのfor属性とinputのid属性を同じ名前にすることで紐付けができます。

具体的な効果としては、label部分をクリックしてもinput部分が選択されるようになります。

inputタグとlabelタグのペアはdivタグで囲っておくと良いです。(メールアドレスで一つのdivタグ、passwordで一つのdivタグのイメージ)

labelとinputタグを縦並びにしたい場合は、CSSでdisplay: block;します。

チェックボックス

<div class="form-check">
  <input type="checkbox" name="q1" id="q1_1" value="html" class="form-check-input">
  <label for="q1_1" class="form-check-label">HTML</label>
</div>

inputにはfor属性なし。どのlabelにも紐づかないため。

labelがあると、その文字をタップしても選択できる。

labelのforとidタグを一致させて紐づける。

ラジオボタン

<div class="form-group">
	<label>理解度はいかがですか?</label>
	<div class="form-check">
		<input type="radio" class="form-check-input" name="q2" id="q2_1" value="1">
		<label for="q2_1" class="form-check-label">理解できなかった</label>
	</div>
	<div class="form-check">
		<input type="radio" class="form-check-input" name="q2" id="q2_2" value="2">
		<label for="q2_2" class="form-check-label">大体理解できた</label>
	</div>
	<div class="form-check">
		<input type="radio" class="form-check-input" name="q2" id="q2_3" value="3">
		<label for="q2_3" class="form-check-label">回答しない</label>
	</div>
</div>

name属性を一致させないと一括りのラジオボタンとして認識されないので注意が必要。

displayタグ

.information .type{
	display: inline;
}

inlineとすると、指定した要素だけを適用できる。block要素は行全体に適用されるが、inlineとすれば部分適用が可能になる。

spanタグ

divタグが入れられない場合改行したくない1行に収めたい。divに似てる。改行されずに要素にマークアップ。

imgタグ

<img src="img/profile.png" alt="プロフィール写真">

srcには画像のパスを、altには画像の説明を記入する。

altは視覚障害者の方向けの音声読み上げなどで使われる他、SEO上でも効果があるとされています。

aタグ

<a href="https://www.karochoa.com" target="self_">かろちょあ</a>

target属性は、”self_”ウェブブラウザ自身でリンクするということを示す。blankとすると新しいタブを開く。他のサイトを開く場合にblankにすることがある。self_は省略可能。

selectタグ

<div class="form-group">
	<label for="job">ご職業</label>
	<select name="job" id="job" class="form-control" size="5" multiple>
		<option value="">選択してください</option>
		<option value="会社員">会社員</option>
		<option value="学生">学生</option>
		<option value="その他">その他</option>
	</select>
</div>

value属性はサーバーとのやり取りに使う。数字にすることもある。サーバーの仕様と関連。

sizeをつけるとボックスが縦に伸びる。

multipleで複数選択できるようになる。近年はあまり使われない。ctrlキーなどの併用が必須のため。

テキストエリアタグ

<div class="form-group">
	<label for="message">ご意見</label>
	<textarea name="message" id="message" rows="10" class="form-control"></textarea>
</div>

id とforを一致させる。

rowsは高さを表す。colsはformcontrol(Bootstrap)を使うと無効になる。

float

まずはdivタグでブロックを作ります。

<div class="description">
	<img src="img/jacket.png" alt="イヤフォンジャックの向こう側のジャケット写真">
	<p>COCOA 4枚目のアルバムとなる今作。ジャケットデザインに色鉛筆画家の「カタヒラシュンシ」氏を迎え、音楽と絵のコラボを実現させた一枚。<br>
	<p>HONDA CARS 静岡CM タイアップの「キミのうた」をはじめ、完全書き下ろしの新曲3曲を含む全6曲を収録。
	イヤホンジャックの向こう側に広がる世界を、ぜひご堪能ください。</p>
</div>

続いてCSSにfloatを書いて左側に配置していきます。

.description img{
	float: left;
	margin: 0 10px 10px 0;
}

左に配置するときはfloatをleftとする。

解除するときはclearを使う。

表が浮いてしまった場合は次のコード

.clearfix:after{
	content: " ";
	display: table;
	clear: both;
}

浮きを防止したいタグにclearfixクラスをつける。

olタグ

<ol start="3" type="a">
	<li>C#</li>
	<li>ワンルームファッションショー</li>
</ol>

type=”a”はabcでつく。startで何番目から開始か。

CSSとしては次の設定ができる

.songs ol {
	padding: 0;
	margin: 0;
	list-style: decimal inside;
}

decimal insideとすると数字の部分も内側に入れる

formタグ

<form action="" method="post"></form>

actionは送信先のアドレスを、methodはpostまたはgetを指定します。

labelタグ

<label for="name">お名前</label>
<input type="text" id="name" name="name">

idとtype属性を一致させると紐づきます。

name属性はサーバーとのやり取りで必要になります。

セクショニング

	<header>
		<h1>COCOA</h1>
	</header>
	<section class="info">
		<h1>イヤフォンジャックの向こう側</h1>
	</section>

sectionタグはページ内で何度でも使えるのでclass属性で見分けがつくようにします。

一方でheaderタグはページ内に1度しか使わないことがほとんどです。

環境依存文字を使う場合

	© 2020 COCOA

特殊な文字はブラウザでちゃんと表示させるため、実体参照という文字列を指定します。

上の&copy;はコピーライトマークです。

» 参考:実体参照符号/HTML応用編

CSS

豆知識

  • 0の場合には単位不要
  • classはCSSと、idはjavascriptと組み合わせて使う

他のCSSファイルをインポートする

@import url(sanitize.css);

デフォルトCSSの解除の方法

sanitize.cssのDownloadボタンより、sanitize.cssをダウンロードしてきます。

» 参考:sanitize.css

<h1 style="font-size: 24px; margin: 50px;">見出し</h1>

CSSの適用の仕方

直接書き込む場合はstyle属性をつけてCSSコードを書き込みます。
(インラインスタイルシート)

<h1 style="font-size: 24px; margin: 50px;">見出し</h1>

headタグの中に書く方法(内部参照)

<head>
	<style>
		p{
			font-size: 14px;
		}
	</style>
</head>

スタイルシートを別ファイルとする(外部参照)

<head>
	<link rel="stylesheet" href="style.css">
  <!-- ディレクトリに格納した場合 -->
  <link rel="stylesheet" href="css/sanitize.css">
</head>

同一ディレクトリにstyle.cssを作成。内容は以下のように記入する。

p{
	font-size: 14px;
}
h1{
	font-size: 24px;
	margin: 50px;
}

CSSの外部参照の書き方

// classを指定する場合は"."をつける(以下、contentクラス)
.content{
	background-color: #fcc;
	width: 600px;
}

CSSセレクター

CSSセレクターには次のような種類があります。

  • * {}:全詳セレクター
  • p{}:要素型セレクター
  • .class{}:クラスセレクター
  • #id{}:idセレクター
  • .container p{}:子孫結合子(階層)
  • .container>p{}:階層が直下のものだけ

条件を絞ってCSSを適用する

header h1 {
	margin: 0;
	font-size: 24px;
	font-weight: normal;
	text-align: center;
}

上記はheaderタグのh1のみ適用させるheaderの中のh1という意味。階層構造を表せる。

margin

<!-- 上下左右すべて20pxにする(ショートハンドプロパティ) -->
style=margin: 20px;

<!-- 各別個にmarginを設定する -->
style="margin-top: 20px; margin-bottom: 20px; margin-right: 20px; margin-left: 20px;"

プログラムは上から順に読み込んでいく。複数の方法が書かれた場合には、下にあるものが優先される。

枠の外側にスペースを作って中央に揃える

// classを指定する場合は"."をつける(以下、contentクラス)
.content{
	margin: 0 auto;  //横方向から見て中央揃え
  // margin: auto 0;  横方向から見て中央揃え
}

div(division領域)タグを使います。

枠の内側にスペースを作る

// classを指定する場合は"."をつける(以下、contentクラス)
.content{
	padding: 30px;
}

枠線を入れる

.content{
	border: 1px solid #d1d1d1;
}

1pxのグレー実線を追加します。

inputタグを整える

input{
	border: none; //枠線を無くす
	border-bottom: 1px solid #d1d1d1;
	font-size: 1.2em;
  width: 100%;
  padding: 8px;
}

emは元々の文字サイズの1.2倍にする。自分で打ち込む文字は大きめの方が見やすいので、あえて少し大きめにすることがある。。

100%とすることで右まで全てinputが広がる

paddingを取ることで、入力した文字とテキストボックスの隙間ができる。

buttonタグを整える

button{
	width: 100%; // ボタン幅を左右一杯に
	background-color: #2096f3;  //ボタンの色を変更
	color: #fff; //フォント色を変更
	padding: 15px; //文字と枠の間を調整
	border: 0; //枠の外側の線をなしに
	border-radius: 3px; //ボタンの角に丸みを持たせる
	box-shadow: 0 0 8px rgba(0, 0, 0, .4); //正面から当たったような影を作り、透明度を40%に
}

vertical-align

vertical-align: top;

縦方向の位置揃えはvertical-alignを使う。デフォルトはtop

hover

.description img:hover{
	opacity: .5;
}

img:hoverは擬似クラスといって、状態に応じたスタイルを設定できます。hoverはマウスカーソルをingに上にあてた状態です。

opacityは不透明度で、この場合は50%の不透明度ということになります。

.description img{
	transition-property: opacity;
	transition-duration: 1s;
	transition-timing-function: ease;
	transition-delay: 0s;
}

transitionを追加するとジワっと変化する様子を表せます。

propertyはどの要素を対象にするのかを指定。今回は不透明度だけを変化させたいのでopacityを選びます。

durationはどれくらいの時間をかけて変化するかを、timingfunctionはモーフィングのようなもので、加速度的に変化量を変えたい時に使います。

delayは待ち時間を意味します。

フォントをいじる

header h1 {
	font-family: serif;
}

Webフォントを使う

Webフォントを使えば誰でも同じフォントでWebサイトを閲覧できます。

ただし長文にWebフォントを当てると表示速度が遅くなってしまうので、ワンポイント的に使うのがおすすめ。

link属性でhtmlのheaderタグ内に配置し、CSSで指定のfont-familyを指定すればOK。

» 参考:GoogleFonts

headerを固定する

header {
	position: fixed;
  top: 0;
  z-index: 100;
}

topで画面の上側を明確に指定。

z-indexはヘッダーを一番前面に出すための操作。100が最大値。

写真の内部に要素を埋め込む

.photo .inner{
	position: absolute;
	bottom: 0;
}

要素を中に入れ込むにはabsoluteプロパティを使う。bottom0にすることで下の方に配置。

親要素を決めるには、その親要素にposition:relative;する。

レスポンシブ対応

.container {
	max-width: 800px;
}

max-widthを使うことで最大幅を指定できます。

その他の要素は@mediaクエリを使って指定していきます。

@media only screen and (max-width: 600px){
	.description img {
		float: none;
		display: block;
		margin: 0 auto;
	}
	header{
		padding: 5px;
	}
	header h1{
		font-size: 12px;
	}
	.information h1{
		font-size: 14px;
	}
	.songs li {
		float: none;
		width: inherit;
	}
}

フォントサイズについてのメモ

どれくらいのフォントサイズが良いかのメモです。

ちょっとずつ追記していきます。

段落

  • h1タグ:24px
  • h2タグ:
  • h3タグ:

pタグ

  • 14px

Bootstrapを使ってデザインする

https://getbootstrap.jp/

大前提としてBootstrapは余白を調整するためのフレームワークです。

見た目もある程度は調整できるものの、ちゃんとデザインするなら通常通りCSSを書く必要があるので注意が必要。

つまり、Bootstrapの一番のウリは「グリッドシステム」ということになります。

CDN

Bootstrapはダウンロードしないで直接参照するCDNの利用が一般的です。

注意点は自分で書くstyle.cssよりも上にBootstrapのCDNを書くこと。

CSSは上から順番に読み込んでいくので、CDNより上に自分が書いたCSSを書いてしまうとせっかく書いたCSSがBootstrapで上書きされてしまうことになります。

なおBootstrapには標準でCSSリセットが搭載されているので、sanitizecssなどは不要です。便利!

» 参考:Bootstrap

Bootstrapはデータをダウンロードして格納する方法もあるものの、あまり一般的ではありません。

要素を中央揃えにする

<div class="container">
  <h1>中央揃えにしたい見出し</h1>
</div>

まずは中央に揃えたい要素をdivタグで囲います。

.container {
    text-align: center;
}

class要素に対してtext-alignを指定すればOKです。

» 参考:コンテナについて

gridシステム

<div class="col-sm-6" style="text-align: left;">
  <a href="/">HOMEへ戻る</a>
</div>

Bootstrapの目玉機能がグリッドシステムです。

Webページを擬似的に12個の列に分けて、それぞれのブロックに要素を配置できるというものです。

ブロックを解除する画面幅に応じてsmやlgなどのclassが用意されているので、これを使うことで自在にデザインを変更できます。

フォームコントロール

<div class="form-group">
	<label for="name">お名前</label>
	<input type="text" id="name" name="name" class="form-control">
</div>

Bootstrapでinputタグを使う場合には、class属性としてform-controlを指定します。

空のカラムを左に入れる

		<div class="col-sm-8 offset-sm-2">
			<div class="container">
				<p>この度は本書をご利用いただきありがとうございます。</p>
				<div class="form-group">
					<label for="name">お名前</label>
					<input type="text" id="name" name="name" class="form-control">
				</div>
			</div>
	</form>
	</div>

単にcol-sm-8とすると左側から8ブロックを使う設定になります。

もし左に空の2ブロックを入れた後に8ブロックを配置したいなら、offsetを使うことで実現可能です。

この場合、残りの2ブロックは何も書かないのが一般的。

Bootstrapのブロックは左から配置されるので、特に書かなくとも空のブロックがあることを表せるからです。

ラジオボタンを横並びにするinline

				<div class="form-group">
					<label class="d-block">理解度はいかがですか?</label>
					<div class="form-check-inline">
						<input type="radio" class="form-check-input" name="q2" id="q2_1" value="1">
						<label for="q2_1" class="form-check-label">理解できなかった</label>
					</div>
					<div class="form-check-inline">
						<input type="radio" class="form-check-input" name="q2" id="q2_2" value="2">
						<label for="q2_2" class="form-check-label">大体理解できた</label>
					</div>
					<div class="form-check-inline">
						<input type="radio" class="form-check-input" name="q2" id="q2_3" value="3">
						<label for="q2_3" class="form-check-label">回答しない</label>
					</div>
				</div>

inlineクラスで可能。ただしinline要素になってしまう。

labelをブロック要素にするためd-blockクラスを使えば良い。

ボタン

<button type="submit" class="btn btn-primary">送信する</button>

Bootstrapで用意されたボタンクラスを使うと、デザインをサクッと変更できます。

最初にbtnクラスを指定した上で、btn-primaryなどの色を指定するクラスを書きます。

.btn {
    width: 100%;
}

もちろんCSSでデザインのレイアウトを調整することもできて、上記のようにwidth: 100% ;とすることで横一杯にボタンを広げることもできます。

バッジ

<span class="badge bg-primary">Primary</span>

バッジもボタンの考え方と同じです。

classにはbadgeと書いた上で色を表すbg-primaryなどを追記します。

» 参考:Bootstrap|Badge

エディターの使い方

Visual Studio Codeにはさまざまな機能が搭載されています。

ここでは僕がよく使う便利な機能を紹介します。

» 参考:Visual Studio Codeのダウンロードはこちら

htmlとCSSをに画面で表示する

Web制作ではHTMLとCSSを見比べて作業することも多いので、2カラムで表示しておくと作業が捗ります。

Visual Studio Codeでは右上にエディタを分割するボタンがあるので、これを使うのがおすすめ。

インデントの自動調整

Visual Studio Codeでは次のショートカットキーでインデントの自動調整ができます。

Shift + Option + F

全自動で整えてくれるので絶対に利用しましょう!

この記事が気に入ったら
フォローしてね!

シェアしてもらえると喜びます!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

Pythonを使ってプログラムを書くお仕事をしています。
業務自動化プログラムの作成が得意で、物販のお仕事をされている方や士業事務所様に業務効率化のツールをご提供させていただいております。
現在自力でWebサービスを作れるようになるべくDjangoを学習中。
お仕事のご相談はお気軽にご連絡ください。

コメント

コメントする