WEB制作の１段階
Webの基本
2024.01.15 (60)
HTMLとはコンピューターに指示を出すもの。
<と>で挟まれたタグと呼ばれる特殊な文字列で囲んで書きます。コンピューターがページの構造を理解出来る様にする事がHTMLの役目です。
HTMLのファイル名のルール
ファイル名には拡張子を付ける（.HTML,.CSS,.JPGなど）半角英数字のみ可能、日本語は使えない。
記号も ‐（ハイフン）と _（アンダースコアー）のみ使えます。スペースも使えません、区切る時はハイフンを使う、小文字と大文字を混ぜないで小文字のみ使用する。
テキストエディターで.htmlを付けるとWebブラウザー上で表示されます。なるべくファイル名で想像できる名前にする。
HTMLの骨組み
| <!doctype html> | HTMLのバージョンで通常はHTML5を言う。 |
| <html>～</html> | ～の部分をlangこのサイトの言語を設定出来ます。(jp)が来ればjapanese（日本語）の略です。 |
| <head>～</head> | この部分はページのタイトルや説明分、外部ファイルのリンクなどのページ情報を記述して居ます。ブラウザーには表示されません。ヘッドと言います。 |
| <meta charset=”UTF-8″> | 文字コードをUTF-8に指定する意味、これが正しく表記されないと文字化けします。 |
| <title>～</title> | この名前がタブやブックマークしたり、検索時のページタイトルとして表示されます。 |
| <meta name=”description”content=”～”> | このページの説明文を書きます。どのようなサイトなのか分かるようにします。 |
| <body>～</body> | 文章の本体部分、ここの入力がブラウザー上で表示されます。 |
headは表示されない、bodyは表示される。
2024.01.16 （30）
HTMLの書き方
要素（開始タグから終了タグまでの事）
<タグ名（title,head,bodyなど）> コンテンツ内容 </(title,head,bodyなど）>
開始タグ 終了タグ
タグは半角英数字のみ可能（区別は無いが、なるべく小文字を使う方が無難です。）
タグの中にタグを入れる事を入れ子と言う（普通にあります。）
<p><strong>入れ子</strong>の書き方</p> など
タグに情報を書き加える種類を属性という。（タグの後にスペースを空けて書く）
情報内容は値と言い ”(ダブルクォーテーション）で囲みます。
<a href=”about.html”> Aboutページ</a>
href属性 値
2024.01.17 (60)
見出し
<h1>～<h6>まであり、<h1>が一番大きな見出しで有る。１つのページでｈ１は1回が望ましい。
ｈ4ぐらいまでが無難です。
文章
文章を<p>～</p>で囲む（一番使う頻度が有ります。）
画像を入れる
単独で使う、<img>（<img>タグとsrc属性の指定で画像が表示されます。）
HTMLコード内に<img>と書くだけではダメで、
属性はタグの動作を制御する為の名前で属性値は、その属性が取る具体的な値を示します。
例 <p align=”center”>テキスト</p>というHTMLコードでは、alignが属性でcenterがその属性値です。これにより<p>タグで囲まれたテキストが中央寄せになります。
src属性
HTMLのimg要素には、画像を表示するためのタグです。img要素には、src属性が含まれています。src属性は、画像のソース（ファイルの場所やURL）を指定するための属性です。
言い換えると、src属性は、ブラウザに対して画像がどこから読み込まれるかを伝えるものです。これにより、ブラウザは指定された場所から画像を取得し、その画像をページに表示します。
例えば、以下はsrc属性を含むimg要素の簡単な例です。
<img src="path/to/your/image.jpg" alt="Description of the image">
ここで、src属性には画像ファイルの場所（相対パスまたは絶対パス）や画像がホストされているURLが指定されます。alt属性は、画像が表示できない場合やスクリーンリーダーを使用しているユーザーに対して、代替テキストを提供します。
src属性は単に「画像の場所を指定するもの」と理解しておけば十分です。
alt属性
alt属性は、img要素において、画像が表示できない場合や、ユーザーがテキストベースのブラウザを使用している場合、またはスクリーンリーダーを通じてコンテンツを聴いている場合に、画像の代替テキストを提供するための属性です。
代替テキストは、主に以下の目的で利用されます：
- 画像が読み込まれない場合: ブラウザが画像を読み込むことができない場合、代替テキストは代わりに表示されます。これにより、ユーザーは画像がなくてもコンテンツを理解できます。
- テキストベースのブラウザやスクリーンリーダーの利用者向け: 視覚障がいのあるユーザーやテキストベースのブラウザを使用しているユーザーは、画像そのものを見ることができないため、代替テキストを通じて画像に関する情報を得ることができます。
以下はalt属性の例です：
<img src="path/to/your/image.jpg" alt="A beautiful landscape with mountains and a lake">
ここで、alt属性には画像に関する簡潔で適切な説明が含まれています。この説明は画像の内容を伝え、ユーザーにとって画像が表示できない場合でも有益です。
2024.01.20 (120)
ファイルパス
HTMLやCSS、が画像ファイルを呼び出すためにどこに有るかを指定するもの、index.htmlから見て対象のファイルの保存場所を書く。
相対パス(基本）
呼び出し元のファイルから見た、対象ファイルの位置を指定する。同じフォルダー内の時は単にファイル名を入力する。別のフォルダーに有る場合は（フォルダー名／ファイル名） ／を使う。全てが別のフォルダーに有る場合は、（../）を使って１つ上の階層に行く指定をする。注意点として、画像が表示されない時はパスの記述を確認する。
絶対パス
呼び出したいファイルがWebサイトで公開されて居る場合はURL(https～）を書く。
読者が読み易くする為に、5行程度、１行の文字数は40字程度が良い。
2024.01.21 (60)
リンクをはる(<a>)
リンクさせたい部分を<a href=””> ～ </a>で挟む、href 属性で指定する。
違うファイルへリンクする場合はファイルパスを指定する。
別のWebサイトのURLを指定する場合はhttps://を頭に付ける。
| <a href=” | https://google.co.jp | “>****</a> |
| 囲み始め | href属性値 | 囲み終わり |
画像にリンクをはる
<ing>タグを<a>で囲む、画像をクリックすると指定したページにジャンプする。
メールアドレスへのリンク
| <a href=” | mailto: | oosaki2230@au.com | “> |
| ー | 上記の様に入れる | 送り先アドレス | ー |
リンク先のページを別タブで表示するには、target属性の値を(_blank)にする。
リストを表示する（黒丸付きの箇条書きや番号付きリスト）
箇条書きを表示するには（<ul>)タグを使います。タグ内に（<li>)タグを使って項目を追加して行きます。
ul(Unordered List) 順序の決まっていないリストの意味
il(List Item)箇条書きにするリストアイテムの意味
実例
<ul>
<li>りんご1個
<li>みかん２個
</ul>
上記は
●りんご1個
●みかん２個
となります。
番号付きリストを作る（<ol>＋<li>)
ol(Ordered List)順序だてたリストの意味。olタグ内に<li>タグでリスト項目を追加していく
実例
<ol>
<li>犬の柴</li>
<li>猫のタマ</li>
</ol>
上記は
１.犬の柴
2.猫のタマ
となります。
HTMLのソースコードを見る方法はページの上で右クリックをしてソースを開くと現れます。
2024.01.27 (60)
表の作り方
table
| 行 | |||
| <tr> | <th> | <th> | 見出し |
| <tr> | <td> | <td> | セル |
| <tr> | <td> | <td> | セル |
例
<table border=”1″>
<tr>
<th>プラン名</th>
<th>料金</th>
</tr>
<tr>
<tb>わくわくプラン</tb>
<tb>月額2,900円</tb>
</tr>
<tr>
<tb>にこにこプラン</tb>
<tb>月額1,900円</tb>
</tr>
</tr>
</table>
を入力すると下記になります。
下記は失敗作です。訂正したいと思います。
わくわくプラン月額2,900円にこにこプラン月額1,900円
| プラン名 | 料金 |
|---|
下記で訂正してみると
<table border=”1″>
<tr>
<th>プラン名</th>
<th>料金</th>
</tr>
<tr>
<td>わくわくプラン</td>
<td>月額2,900円</td>
</tr>
<tr>
<td>にこにこプラン</td>
<td>月額1,900円</td>
</tr>
</table>
結果は、
| プラン名 | 料金 |
|---|---|
| わくわくプラン | 月額2,900円 |
| にこにこプラン | 月額1,900円 |
間違い個所は、<td>を<tb>と書いたり<tr>の入力の位置の間違いでした。
セルを横方向に繋ぐ方法
つなげたいセルの<th>タグまたは<td>タグにcolspan属性を追加します。colspanにはつなげたいセルの数を書きます。
例
<table border=”1″>
<tr>
<th colspan=”2″>ｾﾙ1+2</th>
</table>
結果は
| ｾﾙ1+2 |
|---|
今回は出来ました。
セルを縦に繋ぐ方法。
縦に繋ぐにはrowspan属性を加えます。横と同様に繋げたいセルの数を書きます。
サンプルでコード打ち込むと
<table border=”1″>
<tr>
<th>ｾﾙ1</th>
<thｾﾙ2</th>
</th>
<tr>
<td rowspan=”2″>ｾﾙ3⁺5</td>
<td>ｾﾙ4</td>
</tr>
<tr>
<td>ｾﾙ6</td>
</tr>
</table>
結果
| ｾﾙ1 | |
|---|---|
| ｾﾙ3⁺5 | ｾﾙ4 |
| ｾﾙ6 |
セル１の右側がなんか変なので、確認して修正します。
<table border=”1″>
<tr>
<th>ｾﾙ1</th>
<th>ｾﾙ2</th>
</th>
<tr>
<td rowspan=”2″>ｾﾙ3⁺5</td>
<td>ｾﾙ4</td>
</tr>
<tr>
<td>ｾﾙ6</td>
</tr>
</table>
訂正後
| ｾﾙ1 | ｾﾙ2 |
|---|---|
| ｾﾙ3⁺5 | ｾﾙ4 |
| ｾﾙ6 |
セル2の > が抜けて居ました。
HTML内に表示されないコメントを残す方法
<!– と –> で囲む （コードの書き込みも大丈夫です。）
2024.01.28 (120）
フォームを作る(<form>タグ）
先ずは、<form ～ </form>で囲む
属性
| 属性 | 用途 |
| action | データーの送信先を指定する。 |
| method | データーの転送方法を指定する（get or post） |
| name | フォームの名前指定。 |
例
<form action=”example.php” method=”post” name=”contact-form”>
</form>
フォームで使うパーツ (input type=”text”>)
<input>タグを使いtype属性で表示するパーツを変えます。
例
<input type=”text”>
表示は入力画面が出ました。入力欄に始めからテキストを入れておくには、placeholder属性を使います。
例
<input type=”text” placeholder=”苗字 名前”>
主な属性値
| 属性値 | 用途 |
| text | 1行 テキスト |
| search | 検索 テキスト |
| メールアドレス | |
| tel | 電話番号 |
| url | URL |
ラジオボタンの作り方。(<input type=”radio”>)
ラジオボタンとは、
複数の選択肢のうち１つを選んで貰いたい時に使用するもので、１つしか選択できなく仕組みです。
| 属性 | 用途 |
| name | ボタン名 |
| value | 送信される選択しの値 |
| checked | 選択されている状態にする時 |
例
<input type=”radio” name=”gender” value=”男”>男
<input type=”redio” name=”gender” value=”女”>女
上記は１カ所間違いの為、上手く反映されませんでした。
redio→radio
訂正後は大丈夫でした。
チェックボックスを作る (<input type=”checkbox”>)
ラジオボタンと違い、チェックボックスの場合は複数の項目の選択が可能です。
| 属性 | 用途 |
| neme | チェックボックスの名前 |
| value | 送信される選択肢の値 |
| checked | 選択状態にする時使う |
例
好きな色:
<input type=”checbox” neme=”color” value=”赤”>赤
<input type=”checbox” neme=”color” value=”青”>青
<input type=”checbox” neme=”color” value=”黄色”>黄色
<input type=”checbox” neme=”color” value=”緑”>緑
結果
好きな色: 赤 青 黄色 緑
イメージと違う。
訂正
好きな色:
<input type=”checkbox” neme=”color” value=”赤” checked>赤
<input type=”checkbox” neme=”color” value=”青”>青
<input type=”checkbox” neme=”color” value=”黄色”>黄色
<input type=”checkbox” neme=”color” value=”緑”>緑
間違い個所
checbox→checkbox
kが抜けて居ました。
2024.01.28 (30)
送信ボタンを作る (<input type=”submit”>)
フォームで入力した内容の送信に使います。
| 属性 | 用途 |
| name | ボタン名 |
| value | ボタンに表示するテキスト |
例
<input type=”submit” value=”送信する（テキスト）”>
2024,0201 (30)
送信ボタンを画像にする時
type属性をimageにして画像ファイルを指定する。
例
<input type=”image” src=”images/button.png” alt=”送信”>
セレクトboxを作る（<select>タグ＋<option>タグ）
<select>タグの属性
| 属性 | 用途 |
| name | セレクトbox名 |
| multiple | キーで選択を可能にする |
<option>タグの属性
| 属性 | 用途 |
| value | 送信される選択肢の値 |
| selected | 始めから選択してる状態を作る |
例
好きなアルファベット
<select name=”bloodtype”>
<option value=”A”>A</option>
<option value=”B”>B</option>
<option value=”C”>C</option>
<option value=”不明” selectted>不明</option>
</select>
2024.02.03(120)
複数行テキスト入力欄作成（<textarea>)
例
<textarea name=”message”>メッセージ入力</textarea>
上記の場合だと、クリックしても消えないので、placeholder属性で指定する。
例
<textarea nane=”message” placeholder=”メッセージ入力”></textarea>
注意として、フォームを作動させるにはＰＨＰ（プログラム）の知識が必要になります。
フォームの設置で、名前、電話番号等の文字表示の事をラベルと言い付けた方が見やすいです。
ラベルを作る（label)
ラベルテキストの部分を<label>タグで囲み、for属性を付けます。関連付けたいフォームのパーツにはid属性を付ける。for属性とid属性の値（識別名）を同じにすればフォームとパーツが関連付けられます。
例
<input type=”checkbox” name=”travel” value=”日本” id=”japan“>
<label for=”japan”>日本</label>
<input type=”checkbox” name=”travel” value=”アメリカ” id=”japan”>
<label for=”japan”>アメリカ</label>
識別名を付ける時の注意点
識別名は必ず１対になる必要が有ります。同じファイル内で１カ所のみ使用でき、重複は出来ません。
グループ分け
<h1>明日の天気</h1>
<p>曇りのち晴れ</p>
<h2>着こなし</h2>
<p>服1枚多く</p>
結果
明日の天気
曇りのち晴れ
着こなし
服1枚多く
別パタン
<article>
<h1>明日の天気</h1>
<p>曇りのち晴れ</p>
</article>
<section>
<h2>着こなし</h2>
<p>服１枚多く</p>
</section>
結果（同じだが、CSSを使うと変化が出ます。）
明日の天気
曇りのち晴れ
着こなし
服１枚多く
ブロック要素
<h1> <p>タグを前後に改行を入れブロックとみなす。
インライン要素
<a> <img>タグをテキストの一部にしたもの
ページのヘッダー部分を作る（headerタグ)
ページ上部の要素を囲みます。（ロゴ画像、ページタイトル、ナビゲーションメニュー等）
HTMLファイルの冒頭に記述するhead要素とは異なるタグです。
例
<header>
<h1>ページタイトル</h1>
<p>最新情報です。</p>
</header>
結果
ページタイトル
最新情報です。
ナビゲーションメニューをつくる（<nav>タグ)
メインのナビゲーションメニューを囲みます。<nav>タグは<header>タグの中に含まれる事が多い、基本的にメインではないメニューには使わない。
例
<header>
<h1>タイトル</h1>
<nav>
<ul>
<li><a href=”#”サービス紹介</a></li>
<li><a href=”#”料金</a></li>
<li><a href=”#”問い合わせ</a></li>
</ul>
</nav>
</header>
結果（失敗）
タイトル
正しく修正
<header>
<h1>タイトル</h1>
<nav>
<ul>
<li><a href=”#”></a>サービス紹介</a></li>
<li><a href=”#”></a>料金</a></li>
<li><a href=”#”></a>問い合わせ</a></li>
</ul>
</nav>
</header>
#の後ろに＞の入力忘れを訂正しました。
結果
タイトル
読み物、記事を作る（<article>）
articleの意味は記事と言う意味です。
例
<article>
<h2>記事タイトル</h2>
<p>税金情報</p>
</article>
結果
記事タイトル
税金情報
テーマを持ったグループを作る（<section>）
<section>グループを纏めるタグ、１かたまりに１つのテーマが有る事が重要です。
例
<section>
<h2>オススメ記事</h2>
<ul>
<li><a href=”#”>テレビに使える？使えない？</a></li>
<li><a href=”#”>テレビにはBSがオススメです。</a></li>
</ul>
</section>
結果
オススメ記事
これが、出来ると見栄えが良くなります。
ページのメインコンテンツ部分を作る（<main>）
核となるコンテンツ全体は<main>タグで囲む（様々なグループが入る事も多い）
例
<main>
<article>
<h2>タイトル</h2>
<p>スマホ情報</p>
</article>
<section>
<h2>おすすめ</h2>
<ul>
<li><a href=”#”>時計使える？使えない？</a>/li>
<li><a href=”#”>ガジェットがおすすめ</a>/li>
</ul>
</section>
</main>
結果
おすすめ
- 時計使える？使えない？/li>
- ガジェットがおすすめ/li>
何か変（li>）
修正
</li>の（<）が抜けていました。
<main>
<article>
<h2>タイトル</h2>
<p>スマホ情報</p>
</article>
<section>
<h2>おすすめ</h2>
<ul>
<li><a href=”#”>時計使える？使えない？</a></li>
<li><a href=”#”>ガジェットがおすすめ</a></li>
</ul>
</section>
</main>
結果
おすすめ
補助情報（<aside>タグ）
本文ではない補助情報は<aside>タグで囲みます。サイドバーに使い関連性の低い情報に使う。
例
<aside>
<h3>アーカイブ欄</h3>
<p>製作者プロフィール</p>
</aside>
結果
アーカイブ欄
製作者プロフィール
ページ下部のフッター部分を作る（<footer>）
ページ下部にある部分を囲む（コピーライト、SNS等）
例
<footer>
<ul>
<li><a href=”#”>Facebook</a></li>
<li><a href=”#”>Twitter</a></li>
</ul>
<p>Copyright 2024 papa</p>
</footer>
結果
Copyright 2024 papa
意味の持たないブロック要素を作る（<div>)
どの要素にも当てはまらない、デザインのみにグループ化する場合に使います。<div>
例
<div>
<img src=”phonel.jpg” alt=”スマホ画像”>
<p>上から見た場合</p>
</div>
<div>
<img src=”phonel.jpg” alt=”スマホ画像”>
<p>5種類の色</p>
</div>
結果
上から見た場合
5種類の色
以上でHTMLの基本のまとめです。
次はCSSに進みます。
コメント