menu.htmlの作成(3)
これまでの作業
まず、メニューをつくる次にindex.htmlにメニューを仮に移植する
つぎに自分のサイトのレイアウトをどのパターンにするか決める
自分のサイトのレイアウトをどのパターンにするか考える
※要注意 フレームは使わないこと。
２段または３段組のレイアウトで作成する
※要注意 フレームは使わないこと。
２段または３段組のレイアウトで作成する
1.画面上のメニューバー「ファイル」＞「新規」で「HTML」を選択すると
次のような画面が出てきます
レイアウトの中から自分のサイトの構想に合うものを選ぶ
詳細な説明のついたHTML(とCSSが合体したもの)が自動生成されます。
このページにmenu.html(またはindex.html)で作成したメニューを組み込んでください
全てが埋め込まれたHTMLをファイル名「index.html」として保存する
完成したらindex.htmlをサイトのトップページにアップロードする。
説明付きの動画です。
動画が再生できない場合
先週の授業で再生した動画です。
動画が再生できない人は
カラム落ちとは？カラム落ちが起きたらどこを直せばいいのか？
カラム落ちとは
回り込みの指定の間違いや、レイアウトサイズのズレが生じると、
カラム落ちやレイアウト崩れがおきます。
cssルールの指定は正確にできるように習得しましょう。
カラム落ちが起きるパターンには大きく分けて3種類ある
パターンA [横幅の足し算の勘違い]
パターンB [marginの読み込みがブラウザによって異なる]
パターンC [floatやtext-alignのright・left指定をミスするとカラムが落ちる]
(例)---メニューのdivボックス(黄)と本文のdivボックス(赤)の横幅の合計が
ＣＳＳで、「width: 250px;」と同じように指定しても、
border（枠線）幅が10pxだった場合、こんなに表示に差が
出るという。 “width”の数字を、内寸と見なすか、外寸と
見なすかの違いである。
つまり、最初からFirefoxでの表示に合わせて横幅一杯
に作ってしまうと、ＩＥでは表示しきれずに、カラム落ちが
起こる可能性があると考えられるのだ。
対処方法
・回り込み設定を無効にしている 記述 部分 をボックスの中に入れる事で修正
(回り込み設定とは、float : left; または float : right ; のcss設定の事。)
パターンB [marginの読み込みがブラウザによって異なる]
パターンC [floatやtext-alignのright・left指定をミスするとカラムが落ちる]
パターンA
(例)---メニューのdivボックス(黄)と本文のdivボックス(赤)の横幅の合計が
緑のdivボックスの横幅より大きいためにおきるカラム落ち
見た目には入りそうなサイズに見えるが、余白(境界線の内側のスキマ)を考えると横幅が足りない
パターンB
ブラウザによって異なる幅の読み込みＣＳＳで、「width: 250px;」と同じように指定しても、
border（枠線）幅が10pxだった場合、こんなに表示に差が
出るという。 “width”の数字を、内寸と見なすか、外寸と
見なすかの違いである。
つまり、最初からFirefoxでの表示に合わせて横幅一杯
に作ってしまうと、ＩＥでは表示しきれずに、カラム落ちが
起こる可能性があると考えられるのだ。
パターンC
問題点発生：画像がボックスからはみ出してしまう！？→対処方法
・回り込み設定を無効にしている 記述 部分 をボックスの中に入れる事で修正
(回り込み設定とは、float : left; または float : right ; のcss設定の事。)
フッター表示のrightとleft
cssを編集。
div#footer ulとdiv#footer addressのalignをleftに書き換えました。
フッターを右寄せではなく左寄せにすることで、
フッターとサイドバーがかぶってしまうのをとりあえず回避できました。
おまけ：何故フローチャートが必要なのか
クライアントからの無茶ぶり名言集
頼む人にも見て欲しい
デザインができるまで
クライアントよ、お前の依頼の大変さを思い知れ！
これがデザイナーにとっての「デザイン修正」だ！
0 件のコメント:
コメントを投稿