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サイト制作において、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サイト制作において、更新のたびに量が増えていくような部分に関して、背景画像の表示範囲をその内容の量に合わせて自動で変わっていくようにする方法をまとめておく。デザインとコーディングの両面での対応が必要となる。まずはデザイン面から。背景画像…
前回の続きで、inputタグのtype属性におけるその他の指定値の場合についてまとめていく。 チェックボックス inputタグのtype属性に"checkbox"を指定する。 チェックボックスは、複数選択肢の中から複数個を選択できるようにする場合に使う。 value属性にはそ…
Webサイトのお問い合わせページなどで用いられるフォームについて、PHPとの絡みもあるようなので、復習も兼ねながらまとめておく。フォームとは、ブラウザを通してユーザーからの入力を受け付ける要素のことであり、ユーザーからの情報収集を目的として使わ…
Webサイト制作における簡単なGoogleマップの埋め込み方法を紹介する。 知らなければできないが、知ってれば誰でもできるというくらい簡単な方法だった。 挿入手順 Googleの検索エンジンで表示したい場所の住所を入力して、Googleマップで表示する。 表示され…
Fireworksで簡単なGifアニメーションの制作方法を紹介する。 制作手順 アニメーションさせたいベクター画像を用意する（フリーで商用可のものが多い）。 Fireworksで画像のサイズに合う新規ファイルを作成し、画像を貼り付ける（初期の段階で画像に変更を加…
Webブラウザのタブの左端に表示されるアイコンをファビコン（favicon：favorite icon）という。 ファビコンはそのサイトのシンボルマークのようなものとなる。今回はそのファビコンの簡単な作り方をまとめておく。 制作手順 Photoshopで幅48px×高さ48pxの新…
Webサイト制作時にリストタグ（ul、li）などの箇条書き要素を用いる機会は少なからずあると思われる。 その際、デザインの面でリストタグの頭出しの記号を三角形のアイコンなどに置き換える機会も少なからずあるだろう。今回はそういった場合に使える小さい…
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についての基本を確認してみる。先に結論を述べると、当たり前のことなのだろうが、以下の通り。 ブロック…
Photoshopを使ったナビ用画像の制作手順 新規レイヤーを作り、レイヤー名をつける（レイヤー名：長方形上面） カラーパレットまたはスポイトツールなどを使って長方形上面の描画色を設定する（描画色：黄緑） 作成したレイヤー上に長方形選択ツールで長方形…
Webでは紙媒体などで用いるCMY(K)ではなく、RGBで色を指定する。 RGB：Web媒体で指定する。RGBは「色光の三原色」と呼ばれ、三色を混ぜると明るくなり、それぞれ等量混ぜると白になる（加法混色）。 CMY(K)：印刷など紙媒体で指定する。CMYは「色料の三原色…
たまには息抜きも必要ということで、本日は「オフ日！」と称して前々からチケットを確保していたハンバートハンバートのライブに行ってきました！三軒茶屋にある昭和女子大学 人見記念講堂にて、今年2度目のハンバートハンバートのライブ。ボーカルの遊穂さ…
CSSでの文字の大きさ（高さ）と行の高さの指定は、下記のプロパティ(値)で指定する。 font-size：文字の大きさ（高さ） line-height：行の高さ また、上記指定の結果、複数行に渡る文章の行間の高さは 下記の式で決まる（求められる）。行間高さ＝「line-hei…
CSSで指定したスタイルの適用優先順位は、下記の通りとなる。 「!important」を指定したスタイル 「id」で指定したスタイル 「class」で指定したスタイル 要素名で指定したスタイル また、指定が複雑な場合、下記のスタイルの特殊性(specificity)のルールで…
for文は指定した初期値から、指定した条件式を満たす限り、自動で処理をループ（繰り返し）したい場合に用いる。 書き方 for( カウンタ変数の初期化; ループ判別条件式； カウンタ変数の変更式 ){ ループ（繰り返し）処理; } カウンタ変数の初期化：for文処…
