imgタグとＣＳＳでのbackground-image:urlとの違い « vanillate
「画像」なのか、「背景」なのか、それが問題だ。 ＨＴＭＬでは文章の基本構造を基に書き、ＣＳＳではデザインを指示することがいまやスタンダードとなっています。これは、ＨＴＭＬ構造を簡単にして、いままであったテーブルでの段組が減り、読みやすくすし、そしてデザインの幅を持たせ、統一することができる、といった恩恵をうけました。 しかしながら、いままで管理するメインファイルが１枚のhtmlだったのに対して、１枚のhtml＋ＣＳＳファイル（１枚＋α）となり、初心者の勉強のハードルがあがっていると聞いて、今回は画像の読み込みをメインに書いてみようと思います。 よく見かける画像の読み込み方法 ・ＨＴＭＬ通常の記述 <img src=”画像ファイルまでのパス” /> ・CSSでの読み込み（ＣＳＳファイル内） background-image:url(“画像ファイルまでのパス”); ・CSSでの読み込み（Ｃ
Using jQuery for Background Image Animations
After reading Dave Shea's article on CSS Sprites using jQuery to produce animation effects, I felt like playing around with things to see what could be done but accomplish it with a simpler HTML structure (no need for adding superfluous tags) and simpler code, too. Changing the position of the background image felt to be the best approach to creating the type of effect we're looking for (and I'm n
Web 製作者必携？iPhone からソースが確認できる「ScriptBrowser」 | バシャログ。
ペルー代表との試合を見ましたが、今のところ 3-4-3 はイマイチ機能してないですね。だんだんモノになっていくのか？ kimoto です。 この前、iPhone の Web ブラウザいろいろということでまとめの記事を書きましたが、今回もブラウザのご紹介をしようと思います。 html や js、css などを見ることのできる「ScriptBrowser」です。 まず普通にサイトを表示させたあと、「Source」をタップ。するとハイライトされた html のソースコードが表示されます。 「折り返されてないのが見づらいよ！」というあなたは右下のアイコンをタップすればちゃんと右端で折り返してくれます。 「いかんせん横が狭すぎだろ…」というあなたも、横画面にすればその悩みが解決します。さらにピンチアウト、ピンチインで拡大縮小もできます。 「html しか確認できないの？」js や css もちゃんと
YUI 3: CSS Resetの問題
ブラウザごとのデフォルト・スタイルシートの違いを吸収するためのスタイルシートをメンテするのが面倒になったので、YUI 3のCSS Resetを使うことにした。が、このサイトではちょっとした問題が起こった。少し前にTwitterでつぶやいたりしたhtml要素にbackground-colorやbackground-imageを指定した場合、body要素の背景が描画エリアいっぱいにならなくなるというCSSの仕様絡みの問題。 この仕様によってbody要素に指定していたヘッダの背景画像がずれてしまった(ずれるサンプル)。ずれる理由は上記仕様によりbody要素の上下でmarginの相殺が起こり、marginの相殺が起こった部分は透明(親であるhtml要素)が透けて見える)ようになり、背景画像の開始点はそれに続くbody要素のコンテント・エリアになるから。 html { color: #000; ba
HTML5演出に最適な複数画像読み込み管理のJSライブラリ「LoadManager.js」 | ClockMaker Blog
HTMLで複数の画像を読み込むとき、HTMLのimgタグだけだと不恰好となりがちですが、読み込みを管理すれば見栄えも整いますというデモとJSライブラリを作ってみました。次の2つのデモを見比べて何が違うのか確認ください。 デモ (通常のimgタグ) デモ (LoadManager.jsを使用) デモの違いとは 前者は画像がバラバラとインターレース的に読み込まれ、後者は読み込み終わるまでローディングが表示され読み込まれたものがフェードインして表示されます。 ▼前者のデモ ▼後者のデモ 後者のデモには、ローディングのパーセンテージ表示も付いています。読み込みが何%まで達しているかを確認できるのも、後述のJSライブラリのメリットです。 HTML5で作られたフルFlash的なサイトを見たときにimgタグでインターレース的に画像がバラバラとでてくることが多くて、いつも微妙な思いをしていました。Flas
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
