学科 CSS基礎①

-本日のアジェンダ-

1限目
学科 CSS基礎①
マークアップについて

2限目
学科 CSS基礎①
タグチェッカーについて

3限目
学科 CSS基礎①
FTPサーバーについて

4限目
学科 CSS基礎①
HTML/CSSのまとめ

5限目
学科 CSS基礎①
HTML/CSSのまとめ

本日のテーマ

マークアップをやってみましょう

マークアップについて

マークアップとは、文書構造(テキスト)や視覚表現(装飾)などの情報を、コンピューターが正しく認識できるように、タイトルや見出しなどの各構成要素に「タグ」と呼ばれる識別のための目印を使い、意味付けを行っていくことを意味します。

ワンポイントアドバイス

Web関連の求人情報で、マークアップエンジニアという職種があります。マークアップエンジニアというのは、専門知識を必要とする仕事ではあります。Webサイト制作で、フロント寄りの領域を扱うことから、エンジニアやプログラミングとは大きく業務内容が異なります。
マークアップエンジニアは、制作現場で数多く求められている職種です。 未経験者であってもある程度の勉強や実践経験を積めば、募集企業によって十分チャレンジが可能な職種と言われています。

参考サイト

タグチェッカーについて

正確なHTMLが書けているか、自分の目ですべてをチェックするのはとても大変作業です。とはいえ、適切なHTMLが書けていないとレイアウト崩れの素となったり、修正に大幅に時間がかかったりなど決していいことはありません。そんな時に活用したいのがHTMLのエラーチェックツールです。

ワンポイントアドバイス

マークアップエンジニアやコーダーの求人応募をして、見られるのはソースコードです。最低限のやっておくべき事として文法エラーは減らしておきましょう。

参考サイト

FTPサーバーについて

FTPサーバとは、FTPを使用してファイルの送受信を行うサーバのことである。 ファイルのアップロード・ダウンロードにはFTPクライアントソフトウェアが必要だが、最近のウェブブラウザにはこれが組み込まれている場合が多い。 

ワンポイントアドバイス

サーバーについては、案件ごとにどのサーバーを利用しているかしっかりと確認を取ってから制作依頼を受けましょう。サーバーによって基本的な設定が異なったり細かい違いがありますので、確認作業をしっかりと行いましょう。

参考サイト

SEOについて

検索エンジン最適化とは、検索エンジンのオーガニックな検索結果において、特定のウェブサイトが上位に表示されるよう、ウェブサイトの構成などを調整すること。また、その手法の総称。 サーチエンジン最適化ないし検索エンジン対策とも呼ばれ、ウェブポジショニングと同義である。

ワンポイントアドバイス

まずは正しい文法理解と記述を理解していきましょう。その次に目的であるSEO(検索エンジン最適化)を考えてより良いサイト構築・設計を考えていきましょう。

参考サイト

本日の課題

WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。

学科 HTML基礎④

-本日のアジェンダ-

1限目
学科 HTML基礎④
テーブルタグについて

2限目
学科 HTML基礎④
フォームタグについて

3限目
学科 HTML基礎④
特殊文字について

4限目
学科 HTML基礎④
HTMLのまとめ

5限目
学科 HTML基礎④
HTMLのまとめ

本日のテーマ

テーブルとフォームを記述できるようになりましょう

テーブルタグについて

「TABLE」とは<tr>、<th>、<td>などと組み合わせて表を作成するためのタグです。表の基本的な構造は<table>~</table>の中に<tr>~</tr>で表の横部分を指定し、その中に<th>~</th>や<td>~</td>で表題や縦軸を指定してセルを定義します。この時ヘッダセルのテキストは、一般的なブラウザでは太字になりセンタリングされます。
<table>はしばし、レイアウトのために使用されることがあります。しかし本来の使用方法ではありませんので、レイアウトで同様の効果が欲しい場合はスタイルシートを利用するとよいでしょう。

table/caption/tr/th/td 要素(テーブル)

<table>
  <caption>キャプション</caption>
  <tr><th>見出し</th><th>見出し</th></tr>
  <tr><td>データ</td><td>データ</td></tr>
  <tr><td>データ</td><td>データ</td></tr>
</table>

テーブル構造の表示を指定します。

テーブルのデザイン(幅、高さ、色、文字飾りなど)は CSS で指定します。

  • tableタグ:テーブルの範囲を指定します。
  • captionタグ:表のキャプション(主題)を指定します。
  • trタグ:1行の範囲を指定します。
  • thタグ見出し項目を指定します。
  • tdタグ:データ項目を指定します。

参考サイト

ワンポイントアドバイス

楽天やヤフーショッピングの商品ページでテーブルレイアウトが必要になる場合があります。EC関連のお仕事をする場合は、想定しておきましょう。

フォームタグについて

form 要素(フォーム)

<form action=”URL” name=”フォームの名前”
  method=”転送方法” enctype=”データ型式”>
  フォーム要素(部品)
</form>

入力フォームの作成を指定します。フォーム要素にフォームを構成するフォーム要素(部品)を配置します。

  • action属性:送信先の URL を指定します。
  • name属性:フォームの名前を指定します。
  • method属性:送信データの転送方法(HTTP メソッド)を指定します。get(初期値)を指定すると URL の型式で転送します。post を指定すると本文にデータを配置して転送します。
  • enctype属性:送信データの型式(MIME タイプ)を指定します。application/x-www-form-urlencoded(初期値)を指定すると URL エンコード型式になります。multipart/form-data を指定するとマルチパート型式になります。text/plain を指定するとプレーンテキスト型式になります。

label 要素(ラベル)

<label form=”form 要素” for=”部品要素”>
  ラベル要素
</label>

入力フォームのフォーム部品とラベルを関連付けます。一般的には、関連付けを行うことでラベルをクリックしてもフォーム部品をクリックしたのと同じ効果を出すことができます。

  • form属性:form 要素との関連付けを行います。form 属性の値と form 要素の id 属性の値を一致させることで離れた場所に配置した form 要素のフォーム部品と関連付けを行うことができます。
  • for属性:フォーム部品との関連付けを行います。for 属性の値とフォーム部品の id 属性の値を一致させることでフォーム部品との関連付けを行うことができます。

input 要素(インプット)

<input type=”形状” name=”名前” form=”form 要素”
  value=”初期値” size=”幅”
  maxlength=”最大文字数” minlength=”最小文字数”
  placeholder=”凡例”
  checked disabled readonly required>

テキスト入力欄やボタンなそのフォーム部品を作成します。本要素には、終了タグがありません。

  • type属性:作成するフォーム部品の形状を指定します。
    • hidden:画面上には表示されない隠しデータを作成します。
    • text:1行のテキストボックスを作成します。(初期値)
    • search:検索テキストの入力欄を作成します。
    • tel:電話番号の入力欄を作成します。
    • url:URL の入力欄を作成します。
    • email:メールアドレスの入力欄を作成します。
    • password:パスワードの入力欄を作成します。
    • datetime:UTC の日時の入力欄を作成します。
    • date:日付の入力欄を作成します。
    • month:月の入力欄を作成します。
    • week:週の入力欄を作成します。
    • time:時刻の入力欄を作成します。
    • datetime-local:UTC によらないローカル日時の入力欄を作成します。
    • number:数値の入力欄を作成します。
    • range:レンジの入力欄を作成します。
    • color:色の入力欄を作成します。
    • checkbox:チェックボックスを作成します。
    • radio:ラジオボタンを作成します。
    • file:サーバーhげファイルを送信します。
    • submit:送信ボタンを作成します。
    • image:画像ボタンを作成します。src 属性を使用して表示する画像ファイルを指定、alt 属性を使用して代替テキストを指定、width 属性と height 属性を使用して画像の大きさを指定します。
    • reset:リセットボタンを作成します。
    • button:汎用ボタンを作成します。
  • name属性:フォーム部品の名前を指定します。ここで指定された名前は、フォームと一緒に送信されます。
  • form属性:form 要素との関連付けを行います。form 属性の値と form 要素の id 属性の値を一致させることで離れた場所に配置した form 要素のフォーム部品と関連付けを行うことができます。
  • value属性:フォーム部品が保有する値の初期値を指定します。値の現在値は、名前と一緒に送信されます。
  • size属性:コントロールの大きさ(文字数)を指定します。
  • maxlength属性:value 属性が保有する値の最大長(文字数)を指定します。
  • minlength属性value 属性が保有する値の最小長(文字数)を指定します。
  • placeholder属性何を入力するかの助言を指定します。
  • checked属性:チェックボックスやラジオボタンがチェック状態であることを指定します。
  • disabled属性コントロールが無効であることを指定します。
  • readonly属性:値の修正ができないことを指定します。
  • required属性:フォームが送信するための必須項目であることを指定します。

textarea 要素(テキストエリア)

<textarea name=”名前” form=”form 要素”
  cols=”幅” rows=”行数” maxlength=”最大文字数”
  minlength=”最小文字数” placeholder=”助言”
  disabled readonly required>初期値</textarea>

複数行のテキスト入力ボックスを作成します。本要素には、終了タグがありません。

  • name属性:フォーム部品の名前を指定します。ここで指定された名前は、フォームと一緒に送信されます。
  • form属性:form 要素との関連付けを行います。form 属性の値と form 要素の id 属性の値を一致させることで離れた場所に配置した form 要素のフォーム部品と関連付けを行うことができます。
  • cols属性:コントロールの横幅(文字数)を指定します。省略時は、20 です。
  • rows属性:コントロールの行数を指定します。
  • maxlength属性:入力可能な最大文字数を指定します。省略すると無制限に入力することができます。
  • minlength属性:入力しなければいけない最小文字数を指定します。
  • placeholder属性:何を入力するかの助言を指定します。
  • disabled属性:コントロールが無効であることを指定します。
  • readonly属性:値の修正ができないことを指定します。
  • required属性:フォームが送信するための必須項目であることを指定します。

select/option 要素(セレクト/オプション)

<select name=”名前” form=”form 要素” multiple
  size=”行数” disabled required>
  <option value=”値” disabled selected>選択肢</option>
  <option value=”値” disabled selected>選択肢</option>
  <option value=”値” disabled selected>選択肢</option>
</select>

select 要素は、option 要素で指定されたリストからの選択ボックスを作成します。

  • name属性:フォーム部品の名前を指定します。ここで指定された名前は、フォームと一緒に送信されます。
  • form属性:form 要素との関連付けを行います。form 属性の値と form 要素の id 属性の値を一致させることで離れた場所に配置した form 要素のフォーム部品と関連付けを行うことができます。
  • multiple属性:複数の選択肢を選択できることを指定します。省略時は、選択できる選択肢は、1つです。
  • disabled属性:コントロールが無効であることを指定します。
  • required属性:フォームが送信するための必須項目であることを指定します。

option 要素は、select 要素の選択肢を作成します。

  • value属性:フォームで送信する値を指定します。省略すると option 要素の中の文字列が使用されます。
  • disabled属性コントロールが無効であることを指定します。
  • selected属性:初期状態で選択状態にすることを指定します。

button 要素(ボタン)

<button type=”型式” name=”名前” form=”form 要素”
  disabled>ボタン内容</button>

ボタンを作成します。

  • type属性:作成するボタンのタイプを指定します。
    • submit:送信ボタンを作成します。(初期値)
    • reset:リセットボタンを作成します。
    • button:汎用ボタンを作成します。
  • name属性:フォーム部品の名前を指定します。ここで指定された名前は、フォームと一緒に送信されます。
  • form属性:form 要素との関連付けを行います。form 属性の値と form 要素の id 属性の値を一致させることで離れた場所に配置した form 要素のフォーム部品と関連付けを行うことができます。
  • disabled属性:コントロールが無効であることを指定します。

fieldset/legend 要素(フィールドセット/レジェンド)

<fieldset name=”名前” form=”form 要素” disabled>
  <legend>キャプション<legend>
  フォーム要素(部品)
</fieldset>

fieldset 要素は、フォーム要素をグループ化します。

  • name属性:フォーム部品の名前を指定します。ここで指定された名前は、フォームと一緒に送信されます。
  • form属性:form 要素との関連付けを行います。form 属性の値と form 要素の id 属性の値を一致させることで離れた場所に配置した form 要素のフォーム部品と関連付けを行うことができます。
  • disabled属性:コントロールが無効であることを指定します。

legend 要素は、グループ化した要素群のキャプションを指定します。

CSSとの紐付けについて

HTMLのタグとCSSの紐付けを行うためにid属性とclass属性が使用されます。

参考サイト

特殊文字について

HTMLのコードを記述する時に特別な書き方をする必要のある文字があります。

参考サイト

本日の課題

WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。