タグ

画像とcssに関するlax34のブックマーク (4)

  • [JS]背景画像やスライドショーをブラウザいっぱいに表示するスクリプト -Vegas

    写真画像をブラウザいっぱいに表示し、ウェブページにフル表示の背景画像やスライドショーを設置するjQueryのプラグインを紹介します。 ドットベースのオーバーレイ用の画像が数多く用意されているので、画像にスタイリッシュなエフェクトを加えることも簡単にできます。 デモページ サムネイルをクリックすると、写真画像が変更されます。 Vegasの実装 外部スクリプト 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="/vegas/jquery.vegas.js"></script> スタイルシート スタイルシートもあらかじめ用意されており、外部ファイルとして指定します。 <link rel="st

  • Webサイト高速化 テンプレート/Viewの超高速化テクニック | Create it!

    << March 2011 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >> 以下の高速化のテクニックのご紹介。 ・HTMLCSS ・画像 ・javascript HTML HTMLは余計なスペース、DOMを削除 tableはDOM数が多いためdivで記述する。 インデントを整えるなど余計なコードを削除してファイル容量を少なくするのを心がける。 CSS CSSは<head></head>の中に配置。レンダリングの遅延を招く。 再描画処理が発生するため@importは使用しない。 ネストの深いCSSのセレクタは書かない。ネストを検索するのに時間がかかるため。 画像 画像が画像の数だけHTTPリクエストが増える。 画像の読み込みは極力

  • img要素のwidth、height属性について再考してみた - Webtech Walker

    img要素にwidth、height属性を指定するかどうかは常に悩んでいて、以前にもブログでみなさんに質問したりもしましたが、自分なりの一つの答えにたどり着きました。 画像の幅、高さの情報というのは以下の2通りの情報があると思います。 画像の大きさを構造上表すメタデータとしての情報 見た目の大きさを表す情報 それぞれについて考えてみます。 画像の大きさを構造上表すメタデータとしての情報 以前書いた質問のエントリーにいただいたコメントで以下のようなものがありました。 静止画像である写真や絵画は、IT化以前の歴史上、サイズを表記してきました。美術館に行くとわかりますが、絵の説明は「題名、作者名、発表年、画材、所有者(収蔵美術館)名、『サイズ』」になっています。もちろんここで表記するサイズはピクセルではなくキャンバスの号数かセンチ単位ですが。このことから考えると、現実世界において画像の大きさは重

  • imgのheightとwidthは必須か?

    img要素は、HTML文書の或部分に畫像を埋め込む爲の要素です。必須屬性は、畫像のありかを指示するsrc屬性と、代替テキストを示すalt屬性のみです。 屡々「マナー」として、height屬性とwidth屬性を必ず記述しなさい、と言はれます。 「WIDTH」と「HEIGHT」はなくても画像は表示されますが、もし書いておかないと、ブラウザはまず文字のレイアウトを決めてからその後で、画像の入る位置を再び計算することになり結果として表示するのが大変遅くなります つまり画像を全て読みこんで大きさがわかるまで表示されないのです。でももしサイズが書いてあればその大きさ分を空けておくので、画像が読みこまれてからそこに表示するだけとなるので早くなるのです。 <IMG SRC="...">タグでイメージを表示する際には、WIDTH=n と HEIGHT=n 属性を必ず指定するようにしましょう。これを指定しない

  • 1