サイタ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="キーワードを入力">

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

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

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

目的・種類別にホームページ作成・作り方講座を探す

新着レッスンノート

前回、相談していたレンタルスペースのホームページ作成について引き続き相談していきました。 どういう場所にしていきたいか ターゲットはどんな人か/どんな人にどういうふうに使って欲しいか どんな想いでその場所をやりたいのか 支援したい/助けたいとしたら、どんな人にどんなサポートをし...

これまで作成してきた WORDPRESSを用いたホームページの追加作成など行っていきました。 ・サイドバーにカテゴリーから観るを追加する方法 ダッシュボードー外観ーウィジェット 利用できるウィジェットの中に「カテゴリー」があるのでサイドバーに追加 投稿数を表示をチェック ...

前回、相談していたレンタルスペースのホームページ作成について引き続き相談していきました。 状況も変わっているということでヒアリングしていきました。 支援したい相手がどうしたいのか このスペースを通して 誰の何を助けたいか コロナ後の事業やサービスとして 「オンライン...

まず、管理者以外の場合、作成しているログイン画面が出ないとのことで、確認していきました。 すでに管理者としてログインしていた可能性がありました。 カテゴリーの追加方法 ダッシュボードにて投稿ーカテゴリー新規追加 カテゴリーの新規追加は管理者で行う必要があります。 ...

今回は、集客に困っている飲食店についてのウェブや広報の相談をしていきました。 実店舗があって、既存のお客さん/ファンがいるけど、実店舗に行きたいけどいきづらい場合、オンラインで購入してもらえるようにするのが効果的 新しい集客をする場合は、ブログを書いた方がいいけど、書き続けられるか...

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

ホームページ作成情報

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

twitter

ホームページ作成の先生

@HomepageCyta