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は「色料の三原色…