webデザイン wordpress デザイン

webデザインも出来る様になりたい Part.3

Pocket

普段グラフィックデザインをやってるけど、webをやってみたい人向けに書き始めたwebデザインも出来る様になりたいは今回でPart3になります。

前回までの記事

webデザインも出来る様になりたい Part.1

webデザインも出来る様になりたい Part.2

前回から具体的にHTMLの書き方を書いていきましたが、今回からは、さらに詳しく書いていこうと思います。

まずは前回のおさらいです。

body要素の中身を書いていく

上記のHTMLをHTML5の書き方で書いていきました。今回からは、body要素の中味について触れていきます。みなさんが普段目にしているwebサイトは、実際にはこのbody要素の中に書かれたものを見ています。つまり、実際のサイトの内容を書く場所になります。

body要素の中に、普通にテキストを書いてみましょう。
さらに、ここへ見出しを付けてみましょう。

HTMLにおける見出し要素は、<h1></h1>の様にhいくつで表し、これが最大h6まで使う事が出来ます。えっ6つしか見出し使えないの?って思うかもしれませんが、実際に雑誌などの書籍を見てみると分かりますが、ページの大見出し、セクション事の中見出し、記事ごとの小見出しくらいで、あとはコラム要素の中に見出しがあれば更に大、中、小くらいです。これで締めて6つですね。まぁ、そんな感じで使うのが見出し要素になります。ちなみにこの見出し要素は、SEO上ではかなり重要になってきますので、有ると無いでは、まるで違いが出てしまいます。

SEOの大事なルールとしては、<h1>の大見出しの要素は、1ページに一つまでという事が決められていますので。そこだけ覚えておいてください。

そしてこれをwebブラウザで表示するとこんな風に見ることが出来ます。


するとこんな感じになります。

特に何も設定していないのですが、タイトル要素を指定したところは、大小が勝手についていますね。コレは、webブラウザのデフォルト(初期)設定によるもので、webブラウザによって若干見え方に違いが出てきます。ちょっと分かりづらいですが、天地左右の余白も微妙に空いている状態です。

ついでに、リンクの設定の仕方と、画像を入れるやり方を説明していきます。

リンクの設定の仕方

リンクを設定するには<a>タグを使用します。

<a>はアンカー(Anchor)の略で、リンクの出発点と到達点を指定するタグになります。 リンクの出発点ではhref属性というものを使ってリンク先を指定します。

例えば、リンクというテキストに対してリンクを設定する場合は、

といった感じで、リンク先のURLを指定します。この場合は、当ブログにリンクが貼られた事になります。

画像の貼り方

画像を貼る場合は、<img>タグを使用します。<img>はimageの略ですね。
src属性に対して、画像の場所のURLをしていします。

alt属性は、画像の代替テキストになります。これが何故あるかというのは、ブラウザや通信環境によって、画像が表示出来ない場合や、目の不自由な方がテキスト読み上げツールを使ってインターネットをしてる場合など、あらゆるシチュエーションを想定して必要になります。これがいわゆる、ユーザビリティってやつですねユーザビリティもSEOの観点からも大事ですので必ず入れるようにしましょう。

width=”100%” height=”auto”は、幅と高さを指定しています。これは、必要に応じて任意で入れます。レスポンシブデザインの場合は、この様にしておくと良いです。

 

見た目を変えてみる

ここまで出来たら、見た目を変えてみましょう。

Part.1で触れましたが、現在のwebではHTMLとデザインを切り離して考える構造になったという話でした。従来のHTMLとCSS(カスケーディングスタイルシート)に切り離して、デザインを制御する方法論に仕様が変更になっています。コレはもはやルールですので、よっぽどの事がない限りは、CSSをHTMLに直接記述してはいけません。ちなみに、HTMLに直接記述する事をインラインと呼びます。インラインではなく、別ファイルまたは、内部に分離させて記述します。現在主流なのは、style.cssというファイルを作成し、その中にCSSを記述し、HTML側からは、リンクファイルとして読み込むスタイルです。

CSSをリンクさせる場合は、<head>の中にリンクさせる為の記述をします。

書き方は上記の様に書きます。これだけで、HTMLファイルにスタイルシートをリンクさせる事が出来ます。あとは、style.cssの中に、CSSを記述していきます。

 

大事なのはサイト設計

 

この記事が気に入ったら
いいね ! しよう

Twitter で

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください