Webサイト制作において、問い合わせフォームなどを作る際に、ユーザーからの入力データを、ページを跨いで使いたい場合がある。入力データを保持するスパーグローバル変数として、今後習うセッションというものがあるようだが、セッションを使わずにページを…

Webサイト制作において、ユーザーからの入力を受け取る部分をPHPで作ることにより、データの送受信を行うことができるようになる。今回はWebサイト内の問い合わせページなどで用いられることが多いフォーム作成の基本についてまとめておく。 formタグ フォー…

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サイト制作において、グループのメンバーなど、特定の人たちだけにページを見せたい場合というのは少なからずあると思う。そんなときに使えるJavascriptでの簡単な（擬似）パスワード認証（設定）の方法をまとめておく。 ページ内のボタンからパスワード…

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

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

Webサイト制作の画像の見せ方において、狭い領域を有効活用したい場合に便利な方法の1つとして、サムネイル画像へのマウスアクションに応じて固定位置へメインの大きい画像を表示するというものがある。これも画像置換の1つで、jQueryの方にいくつかのプラグ…

本日より8月。 ということで、ブログのデザインを変えてみました。久々に丁寧な言葉遣いになっていますが、 ついに待ちに待ったJavascriptの授業が本格的に始まったということで、 真面目に真剣に日々精進していこうと思います。授業の話に戻って、Javascrip…

Webサイト制作において、自分や知人のブログなどの更新情報を自分のサイト内に表示して、簡単にチェックできると便利である。今回はgoogleのAPIを利用してブログなどのRSSを取得して自分のサイト内に設置する方法を簡単にまとめておく。その前に、まずRSSとA…

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

前回の続きで、inputタグのtype属性におけるその他の指定値の場合についてまとめていく。 チェックボックス inputタグのtype属性に"checkbox"を指定する。 チェックボックスは、複数選択肢の中から複数個を選択できるようにする場合に使う。 value属性にはそ…

Webサイトのお問い合わせページなどで用いられるフォームについて、PHPとの絡みもあるようなので、復習も兼ねながらまとめておく。フォームとは、ブラウザを通してユーザーからの入力を受け付ける要素のことであり、ユーザーからの情報収集を目的として使わ…

Webサイト制作における簡単なGoogleマップの埋め込み方法を紹介する。 知らなければできないが、知ってれば誰でもできるというくらい簡単な方法だった。 挿入手順 Googleの検索エンジンで表示したい場所の住所を入力して、Googleマップで表示する。 表示され…

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

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

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

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

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

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

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

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

先日の授業中、HTMLのソースコードで内で改行するかしないかでブラウザ表示時に半角スペース分のズレが生じることを発見。 詳細を探ってみた。以下、bodyタグ内サンプルコード↓ <form action="#" method="post"> <p>好きな犬は： <label><input type="checkbox" name="mobile" value="1">パグ</label> </p> <p>好きな犬は：<label></label></p></form>

見出しタグには既にstrongタグの効果が含まれているのでstrongはタグの中では使わない strongタグはpタグの中にしか使わない 見出しタグと本文pタグはセットで使う ddタグはdtタグの説明なので、ddタグの中にpタグなどはあまり使わないようにする imgタグは…

WordからHTMLを作成することは可能だが、WordからHTMLを作成すると、数十行の個人情報が勝手に埋め込まれてしまうため、WordからHTMLはあまり作成しない方が良い

授業初日の内容は以下の通り。 授業内容をどう書いていくかは今後試行錯誤しながら少しずつ変化させていくかもしれません。しばらくはシンプルに、簡潔に。 授業内容 PC概要説明 Web概要説明 Web関連雑談 ポイント googleサーバーは複数個あり、すべてにイン…