htmlをそれぞれ分けて管理する

どうもsu-sanです。

webページを作成している際、グロナビ周りやfooterに追加の変更があった場合いちいちコピペして回るのは面倒くさいですよね?

今回はCodeIgniter、CakePHPを始めとしたCMSを使用せずにheaderやfooterをパーツ化して管理する方法を書いていきたいと思います!

まずは共通化したい部分が記述されたhtmlを作成します!ファイルネームはheader.htmlで・・・

次に読み込ませたいhtmlのheadでjqueryを読み込みます。

その直下に下記を記述します。header.htmlのglobalnavというidのdiv要素を取得して、div#navに展開する。という感じです。

読み込ませたいhtmlに

こう記述すれば完了!

これだけで簡単に共通化することができます。

皆さんも試して見てはいかがでしょうか?

【jQuery】ページがスクロールされたらやってほしい処理を書く方法

どうも
ご無沙汰してますsu-sanです。

webページ制作でスクロールされた時にやってほしいことを書きたい時ありますよね!

スクロールされたらメニューバーを表示させたりボタンを表示させたり。。。

それができるのが下記のコードです!!

以下の関数の中に行いたい処理を書くとスクロール時に実行されます!

$(window).scroll(function(){
    〜行いたい処理〜
});

今回はwindowのscrollでイベントを追加してみたいと思います。

ここでクラスを指定して色を変えたり何かを表示させたりなどできます!
上の例ではスクロール時にhogeクラスにhogehogeクラスを追加していますー

$(window)には他にも色々な便利な関数があるので、ぜひ使ってみてくださいー!

以上、「ページがスクロールされたらやってほしい処理を書く方法」でした!

クリッカブルマップ(イメージマップ)の作成方法!

クリッカブルマップ(イメージマップ)の作成方法!

こんにちは。Webデザイナーのotarieです (。-_-。)
今回はクリッカブルマップ(イメージマップ)を使う機会があったので、クリッカブルマップ(イメージマップ)の作成方法について学んだことを書きます。

画像1枚をまるごとリンクにするのではなく、画像の一部分だけをリンクにしたい。画像内の複数の部分に違うリンク先を指定したい。と思ったアレ。クリックする場所によってリンク先が違う指定をしている絵や画像をクリッカブルマップ(イメージマップ)と言います。

このクリッカブルマップ。初めましての時はとても難しく考えていたのですが、3つの要素を指定するだけで簡単にできたのでご紹介します。
その3つが「img要素」、「map要素」、「area要素」です。
1つづつ見ていきます。
 
 
STEP1「img要素」

img要素は、通常の指定と同様で
<img src=”img/xxxxx.png”>
これに、クリッカブルマップの属性を追加します。

usemap属性:クリッカブルマップの名前を、頭に「#」を入れ指定してあげます。
・src属性:画像ファイルを指定してあげます。
・alt属性:代替テキストを指定してあげます。
 
 
STEP2「map要素」

先ほどのimg要素に指定したクリッカブルマップの名前を使ってmap名を指定してあげます。

 
 
STEP3「area要素」

area要素は少しだけ複雑になります。先ほど指定したmap要素の中に入れていきます。
画像のどの部分にリンクさせるかを形と座標と共に指定してあげます。
指定の詳しい内容は下で説明します。

■「shape=””」 領域の形

 rect:四角形
 circle:円形
 poly:多角形
 default:画像全体

■「coords=””」 領域の座標

 座標(x,yなど)
 rect:左上と右下の角の座標(x,y,x,y)
 circle:中心点の座標と半径(x,y,半径)
 poly:全ての角の座標(x,y,x,y,x,y,x,y,…)
 default:coords属性は指定できない

■「href=””」 リンク先の指定

 URL:リンク先のURL

■「alt=””」 代替テキスト

 テキスト:マップが表示できない場合のリンクテキスト

この3つの指定をしてあげるだけでできるんです!簡単ですよね!
では全部を指定したサンプルコードを書きます。

 
 
STEP4「座標指定」の方法

では、座標はどうやって指定するのか?ここです。ここが面倒です!(´-`).。oO
Photoshopで座標を調べてもいいのですが、ここで私は便利なものを紹介します。
その名も・・・・! 

HTML Imagemap Generator!!!!

この便利なジェネレーターに座標を指定したい画像をポイっ!
そして指定したい形を選んで、絵の上でドラックして形を合わせて。。。。。
指定していくと、右側に自動的にコードが書かれ、座標も入れ込んでくれる本当に便利なジェネレーターで、強く、強くオススメします!!
あとはこのソースコードをコピペすれば簡単に指定できますよ^^

いかがでしたか?
また次回をお楽しみに〜

 

 

 

 

Webで使う『画像形式』。どう使う?

Webで使う『画像形式』。どう使う?

こんにちわ、最近左だけ花粉症?のWebデザイナー otarie です。
今回は画像形式のJPEGPNGGIFSVGについてのお話をしようと思います。

各画像形式についての特徴や、メリット、デメリットについて調べたことをまとめてみました。

・Joint Photographic Experts Groupの略
 拡張子は「.jpg」または「.jpeg
・静止画像データの圧縮形式:非可逆圧縮の画像フォーマット

インターネットでよく使用されている画像形式ですね。
JPEGは圧縮率が高く、フルカラー(約1,677万色)の画像を扱えるので、たくさんの色を必要とする写真や複雑なテクスチャーに向いている画像形式です。
グラデーションも綺麗に表現できます。

デメリットとして、JPEGは高い圧縮率で圧縮できるのですが、その際、多少の劣化を伴います。
圧縮率を上げるとファイルは小さくなるんですが、画質はブロックノイズのようになり劣化してしまう場合があります。
また、アイコンやアニメ調の平坦なイラストなどは、にじんだように汚くなってしまいます。
さらに、一度低解像度に圧縮した画像は、元に戻すこともできないので元データをバックアップしておく必要があります。

拡張子のjpgjpegの違いは?
MS-DOS時代に拡張子が3文字までという制約があったためjpgを使用していました。
現在では、普及しているOSで3文字までの制約はなくなったのでjpegを使用することができるようになり、混在するようになっているようです。

注意点
UNIX上では大文字と小文字の識別が別ファイルとして認識されるので.jpg」と「.JPG」の違いには気をつけましょう。

Portable Network Graphicsの略
 拡張子は「.png
GIFに替わるライセンス・フリーの画像形式として生まれた画像形式
 :可逆圧縮の画像フォーマット

PNGは可逆圧縮で複数の透過処理ができる画像形式です。
フルカラーにも8bitカラーにもすることができます。
この画像形式は圧縮率が高く同じ内容のGIF画像より10%~30%程度ファイルサイズが小さくなります。圧縮によってデータが捨てられてしまうことがないので、データを完全に復元することができます。
また、ライセンス問題の不安がないのも特徴です。

デメリットはJPEGGIFと比べると新しい技術になるので、古いPCやブラウザ、携帯では表示できない可能性があります。
また、フルカラーにするとJPEGよりファイルサイズが大きくなってしまいます。
アニメーションには対応していません。

PNG-8
Internet Explorer 5から対応しているため、現在では十分に使用できる画像形式です。  
GIFと同じ、インデックスカラーモードの256+1色透過を使うことができて、グラデーションなどを含む画像などに対しては、GIFよりも圧縮率が高い場合が多いです。

PNG-24(32)
JPEGと同様にフルカラー(約1,677万色)の色を扱うことができて、さらにPNG-32ではアルファチャンネルを使用することができます。
注意点として、Photoshopでは、PNG-32PNG-24とされているので勘違いしやすいですが、これは32bitのことです。
IE6に対応させるには、filterJavaScriptを使用する手間がかかってしまい、ファイルサイズも他の画像フォーマットに比べて、重くなる傾向にあります。

Graphics Interchange Formatの略
 拡張子は「.gif
・最大8bit256色)までの色を扱うことのできる圧縮画像形式

256色以上必要としてないロゴやリンクボタン、アイコン、アニメ調の簡単なイラストなど、線の境界(輪郭)もキレイに作ることができる画像形式です。
データ容量も小さく、透過処理もできます。また、256色までのアニメーションを作ることができるのも特徴です。    

デメリットは、色数に制限があるので、風景写真など多彩な色を使う場合では乏しくなってしまいます。
一つの画像で色を256色しか使用できないため、シンプルで色数が少ない画像の場合は、png形式よりファイルサイズを若干小さくできることもありますが、実際のところ、あんまり変わらないです。

Scalable Vector Graphicsの略
 拡張子は「.svg
・静止画像データの圧縮形式:非可逆圧縮の画像フォーマット

SVGJPEGPNGGIFとは異なり、ベクター画像なので、1ピクセル未満のオブジェクトでも画像を拡大・縮小しても画質が劣化せずにくっきりと綺麗に表示することができる画像形式です。

ベクタ形式
点の座標位置や点同士を結ぶ線を演算して表した画像のことです。
計算して表示する画像なので、画像自体のデータは小さく、画像の拡大や縮小も画質を演算して表現するため、劣化せずに表示できます。

ラスタ形式
ラスタ形式は「ドット絵」なので、画像を拡大すると、輪郭がギザギザになります。
ですが、複雑に色や図形が組み合わさったデータ(写真など)の表現には、ベクタ形式よりラスタ形式の方が向いています。
JPEGPNGGIF、などはすべてラスタ形式の画像です。

また、SVGは拡大・縮小に強いので、レスポンシブWebデザインでとても有効です。
ロゴ画像などに使えば、1つの画像ファイルでスマートフォンからPCまで対応できます。
SVGは画像ファイルですが、テキストエディタで中身を見ることができるので、作成や編集も可能です。JPEGPNGGIFの画像ファイルをテキストエディタで開くと文字化けしてしまいます。
また、マークアップ言語である特徴を活かしてHTMLSVGを融合させると、地図や折れ線グラフ、円グラフといった、HTMLだけではできない斜めや曲線の表現ができます。

デメリットは、写真や手書きのイラストなど、色や形状が複雑なオブジェクトの場合は、点や線の集まりでは表現しきれないので不向きです。
また、あまりにも複雑なオブジェクトを表示させようとすると動作速度が遅くなったり、メモリーの使用量が大きくなってしまいます。

いかがでしたか?
画像形式を全部理解するのがとても難しく、まだまだ勉強中ですが、Webデザイナーとして大事な知識だと教わってこうして色々調べて行くと、だんだんその大事さに気づいてきました。

また次回をお楽しみに~^^