ウェブデザイン技能検定3級実技対策

ウェブデザイン技能検定3級実技対策

ウェブデザイン技能検定3級実技では、すでにあるソースに対して

変更を加えたり、正しい画像やファイルを指定するなどの問題が

出題される傾向にあるが、要するに、一通りのことが出来れば

全く問題ない。

一通りのこととは、白紙の状態からHTMLのソースを記述し、

HPを作成することを指している。

従って、その一通りを解説していく。

 

1.はじめに

今回はウェブデザイン技能検定3級実技同様に、テキストエディタとして

Windowsに標準搭載されているメモ帳を使う。

 

実際のHTMLファイルには、決められた型を書く必要がある。

まずは下図のように、<!DOCTYPE html>でHTMLであることを宣言する。

<html>の中には、<head>と<body>が必要で、<head>にはページに関する情報、

<body>にはこれまで学んできた要素を記述していく。

※<html>の中に、というのは<html>と</html>の間ということ。

 

次にbody要素に対してWEBページ全体のフォントの種類を指定する。

先ほどのソースはHTMLのソースで次のソースはCSSのため、

メモ帳をもう一つ開き、CSSのコードを記述していく。

 

次にhead要素で文字コードを指定する。

文字コードを指定しなければ文字化けしてしまう。

次にタイトルを設定する。

今回は「HP作成講座」にしておく。

次に、スタイルシートを読み込ませるためのソースを記述する。

次はレイアウトを構成していく。

レイアウトは<div>要素で構成する。

<div>要素の「div」は、「division」の略で、要素をグループ化するために使用する。

まずは<body>要素の中に<div>要素を追加してheaderというclassを与える。

上記と同じ要領で、mainとfooterというclassを与える。

次は追加した<div>要素のclassにCSSを追加する。

高さと背景色を付けることでレイアウトを見やすくする。

今回はheaderクラスの背景色を#f7f2b4、高さを90pxに設定する。

main要素のクラス背景色を#bdf7f1、高さを600pxに設定し、

footer要素のクラスの背景色を#ceccf3、高さを270pxにする。

※上記画像でheaderのまえに.(ドット)をつけ忘れている。

下記画像で訂正済み。

これで大体のレイアウトが出来た。

これを実行すると下画像のようになる。

次はヘッダーロゴとヘッダーのリストを作成していく。

リストを作成する際の<li>要素では、通常黒点が付くが、

今回は黒点を必要としないので、list-styleプロパティを用いて

noneを指定し、先頭の黒点を消す。

これはCSSで記述する。

次にヘッダーの枠組みを作っていくためにheaderクラスの中に

<div>要素を追加し、class名をheader-logo、テキストをHP作成講座にする。

更にheaderの中に<div>要素を追加しclass名をheader-listにする。

その、header-listの中に<ul>要素を追加し、<li>要素を3つ用意し、

上から、HTMLとは、CSSとは、お問い合わせとする。

今こういう状態

次は縦並びになっているリストを横並びにする。

floatプロパティを使用することで指定した要素を横並びにすることが出来る。

まずは「header-list」の<li>要素を横並びにし、

header-logoとheader-listにそれぞれfloat:left;を指定することでロゴとリスト全体を

横並びにすることができる。

 

ここまでを実行すると・・・

ロゴとリスト全体が横並びになった。

しかしヘッダのbackgroundカラーが反映されなくなったため

現在原因解明中・・・・。

 

続きは次回。

 


 

 

このエントリーをはてなブックマークに追加

マーケティング・経営ランキング

にほんブログ村 経営ブログへ
にほんブログ村

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です