Web・デザインスクールホームページ作成講座レッスンノート プライマリーメニューをロゴに横並びで配置する方法 入力フォームで透過文字を表示する

プライマリーメニューをロゴに横並びで配置する方法 入力フォームで透過文字を表示する

ホームページ作成講座のレッスンノート

レッスンノートって?レッスンノートって?

体験レッスンということで、どのようなホームページを作りたいか、どこまでわかっていてどこがわからないか、どんなことを学んでいきたいか、ヒアリングさせていただきました。

作りたいページと課題が具体的だったのですぐに実践に入りました。
DreamWeaverを用いて別の人が作成したHTMLにCSSを適応させてレイアウトしていく作業を進めていきました。

まず、DreamWeaverを操作しながら、CSSのセレクターとパラメーターの説明をしました。

セレクタとはCSSスタイルを適用する対象のこと 例 p li body h1 #id .classなど

プロパティはどのスタイル(プロパティ)を適用するのかを指定します。

次に、ロゴの下にある、プライマリーメニューを横並びにしてロゴ横のん右端に配置する作業を行いました。

まずメニューを構成するulタグをクリックして、セレクタウィンドウで追加ボタンをクリックすることで、自動でセレクタが追加されます。

そのセレクタをクリックして選択した状態で、その下のプロパティウィンドウで適用させたいプロパティを探して、入力または選択していきます。

まず以下のように書くことでリストの左側にある●を非表示にします。

ul{
list-style-type: none;
}

次に、以下のように書くことでリストの各項目を回り込ませて横並びにします。

li{
float: left;
}

これだと項目ごとに詰まって表示されて境目がわからなかったので余白を設定することで間を空けていきます。

li{
float: left;
margin-right:30px;
}

次にこのメニューをその上のロゴの右側右端に配置するために回り込みをさせるfloatを指定していきます。

ロゴを囲むh2タグとメニューを囲むulタグ両方に指定します。

h2{
float:left;
}

nav ul{
float:right;
}

このままだとその下の要素もまわりこんでしまうので、その要素に回り込みを解除するスタイルclearを指定します。

clear:both;


次に、入力フォームの入力欄に半透明の文字で入力項目の内容を表示させる作業を行いました。

これはINPUTタグのパラメーターとしてplaceholderを指定することで表示することができます。

例:<input type="search" name="q" placeholder="キーワードを入力">

そのまま入力しても表示されなかったんで、サンプルをそのまま実行してみたところ表示できました。
このサンプルを実際に入れたいページに埋め込んでみたところ、その部分だけでなく、先ほど入力をしたけれど表示されなかった部分にも透過文字が表示されました。

最後に、今後の課題などについて確認をしてレッスンを終了いたしました。
このレッスンノートを書いたコーチ

自身の作品がグッドデザイン賞を受賞!実務・講師経験ともに豊富なので安心

自分で作る夢のマイホームページ作り講座
栗林賢 (ホームページ作成)

高田馬場・池袋・練馬・石神井公園・秋津・小手指・入間市・仏子・所沢・西武新宿

レッスンノート ページ先頭へ

ホームページ作成情報

サイタのホームページ作成講師がブログを通して、ホームページ作成情報を発信。更新情報のチェックはこちらから!

twitter

ホームページ作成の先生

@HomepageCyta