ホームページを作ろう！webデザインも出来る様になりたい Part.3
普段グラフィックデザインをやってるけど、webをやってみたい人向けに書き始めたwebデザインも出来る様になりたいは今回でPart3になります。
前回までの記事
前回から具体的にHTMLの書き方を書いていきましたが、今回からは、さらに詳しく書いていこうと思います。
まずは前回のおさらいです。
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サイトタイトル</title> </head> <body> </body> </html> |
body要素の中身を書いていく
上記のHTMLをHTML5の書き方で書いていきました。今回からは、body要素の中味について触れていきます。みなさんが普段目にしているwebサイトは、実際にはこのbody要素の中に書かれたものを見ています。つまり、実際のサイトの内容を書く場所になります。
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サイトタイトル</title> </head> <body> webデザインも出来る様になりたい! </body> </html> |
body要素の中に、普通にテキストを書いてみましょう。
さらに、ここへ見出しを付けてみましょう。
HTMLにおける見出し要素は、<h1></h1>の様にhいくつで表し、これが最大h6まで使う事が出来ます。えっ6つしか見出し使えないの？って思うかもしれませんが、実際に雑誌などの書籍を見てみると分かりますが、ページの大見出し、セクション事の中見出し、記事ごとの小見出しくらいで、あとはコラム要素の中に見出しがあれば更に大、中、小くらいです。これで締めて6つですね。まぁ、そんな感じで使うのが見出し要素になります。ちなみにこの見出し要素は、SEO上ではかなり重要になってきますので、有ると無いでは、まるで違いが出てしまいます。
SEOの大事なルールとしては、<h1>の大見出しの要素は、１ページに一つまでという事が決められていますので。そこだけ覚えておいてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サイトタイトル</title> </head> <body> <h1>大見出し</h1> <h2>中見出し</h2> <h3>小見出し</h3> <h4>小見出し</h4> <h5>小見出し</h5> <h6>小見出し</h6> webデザインも出来る様になりたい! </body> </html> |
そしてこれをwebブラウザで表示するとこんな風に見ることが出来ます。
するとこんな感じになります。
特に何も設定していないのですが、タイトル要素を指定したところは、大小が勝手についていますね。コレは、webブラウザのデフォルト（初期）設定によるもので、webブラウザによって若干見え方に違いが出てきます。ちょっと分かりづらいですが、天地左右の余白も微妙に空いている状態です。
ついでに、リンクの設定の仕方と、画像を入れるやり方を説明していきます。
リンクの設定の仕方
リンクを設定するには<a>タグを使用します。
<a>はアンカー（Anchor）の略で、リンクの出発点と到達点を指定するタグになります。 リンクの出発点ではhref属性というものを使ってリンク先を指定します。
例えば、リンクというテキストに対してリンクを設定する場合は、
|
1 |
<a href="https://d-tips.jp">リンク</a> |
といった感じで、リンク先のURLを指定します。この場合は、当ブログにリンクが貼られた事になります。
画像の貼り方
画像を貼る場合は、<img>タグを使用します。<img>はimageの略ですね。
src属性に対して、画像の場所のURLをしていします。
alt属性は、画像の代替テキストになります。これが何故あるかというのは、ブラウザや通信環境によって、画像が表示出来ない場合や、目の不自由な方がテキスト読み上げツールを使ってインターネットをしてる場合など、あらゆるシチュエーションを想定して必要になります。これがいわゆる、ユーザビリティってやつですねユーザビリティもSEOの観点からも大事ですので必ず入れるようにしましょう。
width=”100%” height=”auto”は、幅と高さを指定しています。これは、必要に応じて任意で入れます。レスポンシブデザインの場合は、この様にしておくと良いです。
|
1 |
<img src="https://d-tips.jp/xxxx.jpg" alt="代替テキスト" width="100%" height="auto" /> |
見た目を変えてみる
ここまで出来たら、見た目を変えてみましょう。
Part.1で触れましたが、現在のwebではHTMLとデザインを切り離して考える構造になったという話でした。従来のHTMLとCSS（カスケーディングスタイルシート）に切り離して、デザインを制御する方法論に仕様が変更になっています。コレはもはやルールですので、よっぽどの事がない限りは、CSSをHTMLに直接記述してはいけません。ちなみに、HTMLに直接記述する事をインラインと呼びます。インラインではなく、別ファイルまたは、内部に分離させて記述します。現在主流なのは、style.cssというファイルを作成し、その中にCSSを記述し、HTML側からは、リンクファイルとして読み込むスタイルです。
CSSをリンクさせる場合は、<head>の中にリンクさせる為の記述をします。
|
1 |
<link href="style.css" rel="stylesheet"> |
書き方は上記の様に書きます。これだけで、HTMLファイルにスタイルシートをリンクさせる事が出来ます。あとは、style.cssの中に、CSSを記述していきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サイトタイトル</title> <link href="style.css" rel="stylesheet"> </head> <body> <h1>大見出し</h1> <img src="https://d-tips.jp/xxxx.jpg" alt="代替テキスト" width="100%" height="auto" /> <h2>中見出し</h2> <h3>小見出し</h3> <h4>小見出し</h4> <h5>小見出し</h5> <h6>小見出し</h6> webデザインも出来る様になりたい! </body> </html> |
大事なのはサイト設計
これでほぼ、HTMLとCSSのベースは出来ました。ここから重要なのはサイト設定をきちんとしておくということです。普段デザインをきちんと出来ている方は、ロジックを組み立てるのとレイアウトをするのは得意だと思います。それをWebの場合は最重要視します。ですので、デザイン段階でかなりの設定とロジックを緻密にする必要があります。逆にコーディングでは、色々なアプローチの仕方があるので、骨子さえぶれなければ、講義の意味でのDESIGNができる様になると思います。
コメントを残す