Webページの企画とデザインをやる上での大切なこと3選。
この記事では、将来プログラミングをできるようになるために、プログラムについて学んだ知識を解説していく記事です。
今日学んだプログラミングの知識。
自分の良いところ診断の要件を考える。
実装の準備。
モックアップを元にHTMLを実装する。
自分の良いところ診断の要件を考える。
「あなたのいいところ診断」とは、以下のような要件を持つページです。
いいところを診断できる
名前を入力すると診断できる
同じ名前なら、必ず同じ診断結果が出る
診断後に、自分の名前入りの診断結果が表示される
診断結果を X(旧 Twitter)に、ポスト(ツイート)できる
このようなものを考えてみましょう。
これら要件を満たすための見た目は、どのようなものがよいでしょうか?
コンピューター上でこのようなアイデアを簡単に表現できるソフトウェア・サービスもあります。
代表的なソフトウェアサービスには以下のようなものがあります。
Prott
Sketch
Figma
ここでは、上記のようなサービスで作成したものを例にしていきます。
「あなたのいいところは？」という見出し
「診断したい名前を入れてください」という入力を促す言葉
名前の入力欄
「診断する」ボタン
が表示されているものとします。
このような、 実際のソフトウェアのような機能を作り込むことなく、見た目だけを作ったものを、モックアップと呼びます。
また、モックアップを紙で作ったものを ペーパーモックアップ と呼びます。
実装の準備
workspace フォルダの、 assessment フォルダの中に、
assessment.html
assessment.js
assessment.css
という 3 つのファイルを作成します。
assessment.html には、下の内容を入力してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="assessment.css">
<title>あなたのいいところ診断</title>
</head>
<body>
<script src="assessment.js"></script>
</body>
</html>
assessment.htmlPlease Type!
assessment.js
assessment.css
は空ファイルでかまいません。
これでひな形が完成しました。
Chrome で問題ないか assessment.html を表示させてみましょう。
白い画面が表示され、デベロッパーコンソールに何もエラーが表示されていなければ OK です。
モックアップを元にHTMLを実装する。
それでは、モックアップで作成した要素を HTML に記述します。
assessment.html の body タグの中の 9 ～ 12 行目を追加します。
以前にも習いましたが、 h1 タグは見出し、 p タグは段落の記述です。
input タグは、入力欄を作るためのタグです。
属性には JavaScript プログラムから用いる id 属性に加え、 type や size 、 maxlength という属性も書いています。
type 属性では、入力の形式（テキストやパスワード、チェックボックス、ラジオボタンなど）を指定します。
size 属性では、入力欄（テキストフィールド）の大きさを設定します。
maxlength 属性では、この入力欄に入力できる最大の文字数を設定します。
size 属性や maxlength 属性 は、 テキスト形式やパスワード形式には使用できますが、チェックボックスやラジオボタンに使うことはできません。
button タグは、ボタンを作るためのタグです。
まとめ
今回はWebページの企画とデザインについて解説していきました。
やはりWebページを作るとなるとかなりタグの種類や属性などが出てきます。
それぞれの意味をしっかり理解し、これからも学習して行けたら良いなと考えました。