Webサイト制作におけるパンくずリストの書き方はいくつかあるが、ベターな書き方を習ったのでまとめておく。※パンくずリストとは：http://ja.wikipedia.org/wiki/%E3%83%91%E3%83%B3%E3%81%8F%E3%81%9A%E3%83%AA%E3%82%B9%E3%83%88ポイントは以下の2点。 ペ…

前回に引き続き、Webサイト制作のコーディングにおいて用いるjQueryの基本的なメソッドについて、まとめていく。今回はデザイン面ではなく、コードそのものや表示される内容を変える機能面のメソッドをまとめる。 内容や機能を変更する基本的なメソッド addC…

Webサイト制作のコーディングにおいて、要素の表示を消したいということがしばしばある。昨日の授業でRSS設置の際の表示項目をCSSで操作するということを行ったが、その際にdisplay:noneで不要な表示を消していた。そこで、ふとvisibility:hiddenとの違いは…

Webサイト制作において、overflow:hidden;が登場する機会は比較的多いような気がする。floatを指定したものの親要素に指定すると習ったが、そういえば実際にその効果を検証したことはなかったと思い、今更ではあるが検証（確認）しておく。1．1つのブロック…

Webサイト制作において、CSSのリセット項目の一つとしてfont-familyの指定がある。fontに関しては正直ほぼ無知ではあるが、2013年7月時点での推奨の設定を習ったので、まとめておく。 通常の推奨設定 ポイントは以下の通り。 Macの日本語初期設定のため、欧…

本日、Webサイトのフォームページを制作していて、tableのthタグにCSSでwidthを指定したところ、 Firefoxでは希望通りになったが、IEとChromeでは幅が変化しなかった。指定値を変えてみたが、IEとChromeではまったく変わらない。 Webで調べてtable-layout: f…

Webサイト制作において、表示されるページの幅がブラウザのウィンドウサイズに合わせて変化するコーディングの仕方をまとめておく。ポイントは以下の通り。 CSSでページ全体の幅（下記コード内の#wrapper）を％単位で指定する（100％ならウィンドウの両端間…

Webサイト制作において、jQuery（Javascript）を使わないでプルダウンするメニュー（ナビ）の作り方を まとめておく。 画像を使わない場合 ポイントは、以下の通り。 HTMLで２つのリスト（通常のメニュー部にあたるulタグ-liタグとプルダウンして出てくるサ…

Webサイト制作において、更新のたびに量が増えていくような部分に関して、背景画像の表示範囲をその内容の量に合わせて自動で変わっていくようにする方法をまとめておく。デザインとコーディングの両面での対応が必要となる。まずはデザイン面から。背景画像…

Webサイト制作において、文字と画像を同じ行に配置した場合のコーディング時に、狙った通りの位置になかなか合わない場合がある。その場合に使える対応策として、CSSでvertical-alignを指定するというものがある。vertical-alignはインライン要素とtableタグ…

前回の記事の補足となるが、HTMLタグの中身の幅よりCSSで指定した幅が小さかった場合の表示結果を確認しておく。ここでいう“HTMLタグの中身”とは、以下のコードにおいて、pタグ内に書かれている文字や画像のことを指すものとする。 <p>テキスト</p> <p><img src="○○"></p>では、Webサイト…

前回の確認で、以下のことが分かった。 floatを指定すると、それ以降に書かれているfloatを指定していない要素の背景が潜り込む。 しかし、まだfloat指定で横並びにならない理由は見えてこないのではないだろうか？ そこで、いろいろ変えて変化を見てみたと…

先日、理解が曖昧だった点として、ナビなどで用いるdisplayの効果を確認したが、横並びのナビや複数カラムの横並びなど、デザインをコーディングに落とし込む際に使用頻度が高いと思われるfloatの効果について確認してみる。“floatって「浮く」ってことらし…

初歩的なことで今更ではあるが、今後なにかしらの検証をする際に前提となるかもしれないことなので、幅と高さの指定の有無による表示結果の違いを確認しておく。先に結果をまとめておくと、以下のようになった。・divタグの中が空の場合 幅指定なし、高さ指…

訓練もWebサイトのコーディングに入り、実際にコーディングしていく中でいくつか理解が曖昧な点が分かってきた。今回は、ナビなどのCSSで使うdisplayについての基本を確認してみる。先に結論を述べると、当たり前のことなのだろうが、以下の通り。 ブロック…

CSSでの文字の大きさ（高さ）と行の高さの指定は、下記のプロパティ(値)で指定する。 font-size：文字の大きさ（高さ） line-height：行の高さ また、上記指定の結果、複数行に渡る文章の行間の高さは 下記の式で決まる（求められる）。行間高さ＝「line-hei…

CSSで指定したスタイルの適用優先順位は、下記の通りとなる。 「!important」を指定したスタイル 「id」で指定したスタイル 「class」で指定したスタイル 要素名で指定したスタイル また、指定が複雑な場合、下記のスタイルの特殊性(specificity)のルールで…

レイアウトに基づいた制作手順は下記の通り。 制作手順 文章をよく読み、内容を把握する 把握した内容から、ページのアウトライン構造を想定する 抽出したテキスト情報に対し、適切なHTMLのタグを割り当てる ページの構成要素に応じて、CSSの準備をする カン…

画像配置のコーディングの仕方には以下の2通りがあり、それぞれの使い分け基準は以下の通りとなる。 HTMLソースコード内でimgタグを用いて挿入する ⇒ 画像に対して説明が必要な場合に用いる ⇒ 「alt属性」は必須で、画像に関する正しい説明を記述する 例）お…