urei blog

個人的に関心のある事柄について、発信していきます。

HTML&CSSを一か月学習する #1

1日目

参考書は『一冊ですべて身につくHTML&CSSとWEBデザイン入門講座』を使用する。

記事の最後にリンクを張っておきます。

 

※勉強した内容の殴り書きなので悪しからず。

 

学習範囲 p1~86

webデザインとhtmlの基礎を学習。

WEBサイト制作の流れの説明と、用語や使用ソフト(サイト)の解説がある。

 

~流れ~

・サイトマップ(構成)→ワイヤーフレーム(レイアウト)の順に作成する。

・ワイヤーフレームができたらデザインへと移る、この工程はデザインカンプと呼ばれる。(画像の配置、配色や書体、余白など)

 

デザインカンプが完成したら、サイト制作に入る。

主にhtmlとcss、画像が必要。ファイル名は全て半角英数字。

 

web上に公開

・サーバーを用意する。(土地みたいなもの)

・ドメインの取得(住所みたいなもの)

 

アップロード

レンタルサーバーからアップロード可能。ファイルの数が多い場合はFTPソフトを用意する。

 

ここまで終わればアクセス可能。

 

 

テキストエディターは本書でも紹介されているAtomを使用。

デザインカンプ作成用にはAdobe XDを用意した。

 

htmlファイルの骨組みに関して

<!doctype html>

ドクタイプ宣言

 

<html></html>

doctype宣言の後に記述。htmlの文書だということを表す。

 

,<head></head>

ページのタイトル、説明文、外部ファイルのリンクを記述。

ブラウザーには表示されない。

 

<meta charset = "UTF-8">

文字コードをUTF-8に指定。これを指定しないと文字化けして上手く表示されない。

メタ要素という。

 

<title></title>

検索したときのページタイトルとして表示される。

 

<meta name ="description" contents="">

検索エンジンでタイトルと一緒に表示される部分。

 

<body></body>

html文書の本体部分。ブラウザーで表示される。

 

<タグ>コンテンツ内容</タグ> →要素

※半角英数字で書く

 

入れ子

<p>これは<strong>サンプル</strong>です。</p>

手前にあるタグから順に終了タグを書く。

 

タグに情報を書き加える。

<a href = "about.html">anoutページ</a>

リンクを指定

 

見出しタグ

<h1>~<h6>

タイトルで使用される。

<h1> 1ページにつき一度の利用が目安。

 

段落

<p>タグ

段落を分けて表示できる。

 

画像の表示

<img>タグ

src属性を使って指定。

<img src = "test.jpg" alt = "">

 

相対パス

よびだし元のファイルからみた、対象のファイル位置を指定する。

 

おなじ階層

フォルダ名/ファイル名

 

別のフォルダ

../フォルダ名/ファイル名

 

 

絶対パス

呼び出したいファイルが他のwebサイトで公開されているときに指定。

https:// などから始まる。

 

リンクをはる

<a>タグ

<a href = "https://google.co.jp"></a>

グーグルのリンク例

 

画像につける

<a href =""><img src = "" alt = ""></a>

imgタグをaタグで挟む。

 

メールアドレスあてのリンク

<a href = "info@example.com"></a>

mailto:メールアドレス

と記述するとクリックしたときメールクライアントが立ち上がる。

 

リスト

<ul>

   <li>あか</li>

   <li>あお</li>

   <li>きいろ</li>

</ul>

 

・あか

・あお

・きいろ

 

先頭に黒丸がつく。

番号を付ける場合は<ol>で<li>を囲む。

 

<tabel>表を示す。 

<tr> 1行を囲む

<th> 見出しセル

<td> データセル

 

セルを横につなげたい場合はセルのth td タグにcolspan属性を追加する。

縦につなげる場合はrowspan属性を加える。あとにつなげたいセルの数を記入する。

<th colspan = "2"></th>

 

フォーム

<form>タグで囲む。属性はaction(送信先のページを指定)method(転送方法の指定postかget)name(フォームの名前を指定)

 

<form action = "example.php" method = "post" name = "contact-form">

フォームの中身

</form>

 

1行テキスト

<input type = "text">

あらかじめ文字を表示させておきたい場合はplaceholder属性を使用。

textのほかにもserch email tel urlなど

 

ラジオボタン

<input type = "radio" name = "" value = "" >

 

チェックボックス

<input type = "checkbox" name = "" value = "">

 

送信ボタン

<input type = "submit" value = "送信">

valueに記述した文字がボタン上に表示される。

 

セレクトボックス

<select name = "">

  <option>

  </option>

<option>

  </option>

<option>

  </option>

</select>

 

selectタグの属性

・name:セレクトボックスの名前

・multiple:複数選択可能

 

optionタグの属性

・value:送信される選択しの値

・selected;最初から選択されている状態にする。

 

<textarea name = "message"><textarea>

複数行入力可能。お問い合わせ内容とかに使用される。

placeholder 属性で指定可能

 

<input type = "checkbox" name = "" value = "" id = "">

<label for = ""></label>

 

ラベルテキストの部分を<label>で囲みfor属性を付ける。

関連させたいパーツにid 属性を付ける。

値を同じにすれば関連づけることができる。

 

グループ分け

<header></header>

ヘッダー部分を作る

 

<nav></nav>

ナビゲーション部分を作る

 

記事部分を作る

<article></article>

 

テーマを持ったグループを作る

<section></section>

 

メイン部分を作る

<main></main>

 

補足情報

<aside></aside>

 

フッター部分を作る

<footer></footer>

 

意味を持たないブロック

<div></div>

 

 

とりあえず初日はここまで

覚えることは多いが内容自体はそこまで複雑ではないので繰り返し使用して記憶したいと思う。

あしたからCSSの勉強に入ります。

 

他にお勧めの参考書があれば是非

 

 

参考書↓

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

  • 作者:Mana
  • 発売日: 2019/03/16
  • メディア: Kindle版