CSSスプライトで画像を円滑に表示させる
2014年8月13日 CSS, Webサイト制作 CSSスプライトとは、複数の画像をひとつにまとめて、CSSでポジションを指定することにより表示させるCSSの技のひとつです。画像の数を減らすことにより、サイトの表示を速めることができます。以前よりYoutubeなどに使用されているので、その名前を一度は聞いたことがあるかもしれません。ここではCSSスプライトを使用したメニュー画像の作り方を紹介します。 ↑私が10年以上利用している会計ソフト！ CSSスプライトを使うデメリット メリットは上記にあるとおり、サイトの高速化が期待できます。ではデメリットとは？ alt属性が使えない 背景画像のリピート表示ができない 更新する時に手間がかかる（サイズを変えるとCSSも変えなければいけないため） 以上をふまえて、私はいつもメニューの背景やボタンなど、マウスオーバー時に変化する画像のみCSSスプライトを
Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法
Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法 2011-08-28 Webデザイナーが、Webサイトのパフォーマンスを重視する傾向はあまり無いように感じますが重要なことです。 Googleでは、0.5秒遅くなると、検索数が20%減少する amazonでは、0.1秒遅くなると、売り上げが1%減少する という報告もあるようです。Webサイトのパフォーマンスはコンバージョンにも影響する大切な部分。 今回はWebサイトのパフォーマンスを上げる方法を取り上げます。 パフォーマンスアップの前に 応答時間の限界 0.1秒までなら、結果はコンピューターではなく、ユーザーによって引き起こされたように感じる。 1秒までなら、"遅れている"と感じるが、ユーザーの思考は途切れずに、自由に動いていると感じる。 10秒までになると、ユーザーがコンピューターに振り回されている気持ちになり、ストレ
[CSS]最近のウェブ構築には欠かせない要件を備えたCSSのフレームワーク -The 1140px Grid
1280px以上の大きなモニター対応、iPhoneなどのスマホ対応、単調になりがちなグリッドのバリエーション、IE6への配慮など、最近のウェブ構築には欠かせない要件を備えたCSSのフレームワークを紹介します。 The 1140px Grid · Fluid down to mobile [ad#ad-2] 以前、Twitter(@colisscom)で紹介した時からバージョンアップしたようなので、改めてブログでご紹介。 The 1140px Gridは、1280のモニターには1140pxのグリッド、スマホなどのそれより小さいモニターにはその幅に可変したリキッドタイプのグリッドを提供するスタイルシートのフレームワークで下記にその特徴的なポイントを紹介します。 1140pxで12カラムを採用した理由 12という数字は非常に便利で、二等分、三等分、四等分、六等分して利用することができます。また、
[CSS]CSS3のMedia Queries（メディアクエリ）の使い方と実装例
CSS3 Media Queries 下記は各ポイントを意訳したものです。 はじめに CSS2のMedia typesではscreen, printなどのように特定のメディア用のスタイルシートを設定することができました。CSS3ではクエリを加えることで、さらに効率的にスタイルシートを使用できます。 Media Queriesはユーザーの状態を調べ、それにあった特定のスタイルシートを適用することができます。例えば、大きいディスプレイ用と小さいモバイル用にそれぞれ異なるスタイルシートを指定することができます。 Media Queriesの使い方 まずは、デモページをみてください。 ブラウザのサイズを変更すると、スタイルが変更されます。
リスト・テーブルを極めるためのプロパティ、13連発！
contentプロパティ contentプロパティは、:before疑似要素および:after疑似要素が適用された要素の直前・直後に、文字列や画像といったコンテンツを挿入する場合に使います。 詳しくはコチラ→ content 文字列や画像などを挿入する際に使うcontentプロパティ quotesプロパティ quotesプロパティは、contentプロパティにより挿入される引用符を設定する場合に使います。 詳しくはコチラ→ quotes 引用符を設定するquotesプロパティ counter-resetプロパティ counter-resetは、要素の連番の値をリセットする場合に使います。 適用された要素が現れるたびに、指定した名前のカウンタの値が0にリセットされます。 詳しくはコチラ→ counter-reset 要素の連番の値をリセットするcounter-resetプロパティ count
jQuery Mobileのマークアップの基本とCSSの変更 (1/6)
jQuery Mobileによるスマートフォンサイトの制作方法を解説する本連載。前回に引き続き、簡単な会社案内サイトを作りながら、jQuery Mobileの基本的な使い方を学びましょう。 aboutページの作成とCSS3によるデザインの変更 今回はトップページ以下の詳細ページを順に作成していきます。まずは「to-Rについて」のページ（#about）から取り掛かりましょう。前回作成したindex.htmlに次のようなHTMLを追加します。「data-role="content"」の中にh2要素とp要素を加えただけの簡単なHTMLです。 ■サンプル1[HTML] <div data-role="page" id="about" data-theme="b"> <div data-role="header"> <h1>to-R</h1> </div> <div data-role="conte
HTML+CSS主体のJavaScriptエフェクト！ 簡単で「使える」jQueryテクニック（解説つき）
4月から入社した2011年度新卒社員です。 ハロこんにゃんセヨ がぜんウェブウェブしているほんだです。 今年4月より、意匠部のME課（めか）でマークアップエンジニアとして働いているほんだです。 入社したての新卒社員ですが、PCサイトのHTML+CSSのマークアップや、MovableType（ブログ構築ツール）での組み込みなど、色々な仕事をさせてもらってマークアップリア充です。 そんな中でも最近多い業務はjQueryを使ったビジュアル面でのちょっとしたJavaScript（以下 JS）プログラミングです。 jQueryってとっても便利ですなぁ。HTML+CSSの知識を持っている人なら、簡単に「使える」エフェクトをつくれます。 この記事では僕が入社して2ヶ月間に学んだ、簡単で「使える」jQueryテクニックを紹介します。 jQueryってなんぞってとこと、使う前の準備をざっくり解説 jQuer
JavaScriptでCSSを切り替える：jQueryプラグイン「jStyler」
twitter facebook hatena google pocket 文字サイズ「大・中・小」としているサイトが見受けられます。 これを手軽に導入するためjQueryプラグインのjStylerを使用してみてはいかがでしょうか。 sponsors 使用方法 jStylerからjquery.cookie.jsとswitcher.jsを、jQueryからjquery.jsをダウロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> <script type="text/javascript" src="switcher.js"></script> <link rel="style
なんとなくCSSを使っている人が，CSS中級者になるために （「崩れないレイアウト」のセオリー） - 主に言語とシステム開発に関して
CSSを「なんとなく」知っていて，「なんとなく」使っている， というケースがある。 そういう場合，思わぬところでレイアウトが崩れ， 要素の正確なポジショニングができず， 「なんとなく」ずっと悩み続けることになる。 その原因は，CSSの中級のノウハウが足りない，という点にある。 一発で正確なレイアウトができるようになろう。 そうなれば，CSS中級者だ。 以下は，CSS中級者になるためのノウハウ。 （１） 要素の分類 （１−１） インライン要素とブロック要素 （１−２） 置換インライン要素と非置換インライン要素 （２） 正確なポジショニング （２−１） positionのrelative/absoluteの使い方 （２−２） DOCTYPEスイッチによるボックスモデルの解釈方法の違い （２−３） 要素内の高さ位置と，要素の高さ （２−４） floatの崩れない使い方 （３） 正確なテーブルレイ
CSS3の@font-faceでWebfontを利用する。 - ぬぺら！
今回はCSS3で新たに導入された@font-faceと、 Webfontについての説明をします。 なお、管理人はOpera 10.0 Betaで作成していますので、その他のブラウザでは多少挙動が違うかもしれません。 Webfontというのは、 ユーザーの環境に用意されてないフォントでもWebサーバーにそのフォントが用意されていれば、そのユーザーの環境でもそのフォントが表示できるシステムです。 例えば、CSSでこの様な表記をするとします。 body { font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",sans-serif; } Windowsユーザーでヒラギノをインストールしている人は少ないと思います。 ですので、こう指定したところで観覧するユーザーにヒラギノがインストールされていなければ、ヒラギノでは表示されませんので無意味です
Google Font API - Google Code
How do I start? Read the Getting Started guide. Choose fonts from the Font Directory. Optionally, use the WebFont Loader library for more control over font loading. What are the Google Font API and the Google Font Directory? The Google Font Directory provides high-quality web fonts that you can include in your pages using the Google Font API. The Google Font API helps you add web fonts to any web
CSS(スタイルシート) 背景
CSS 背景 CSSで背景を設定することにより、さらにHTMLのソースをシンプルにすることができます。 その為、ブログや情報量の多いポータルサイトなどでは背景画像をCSSに設定し、画像ファイルを直接HTMLに組み込まないスタイルが人気です。 CSS 背景 CSSが使えるようになると、レイアウトでの画像使用は殆ど背景で設定することが可能となります。 ブログでもそうですが、レイアウトの画像はすべてCSSで背景画像として表示されています。 CSSロールオーバーでも背景画像を使いロールオーバーを表示する方法を書きましたが、背景画像の設定する場所は大抵決まっているので、ひとつ覚えてしまえば、いろいろなところに設定ができるようになります。しかし、背景の画像の表示も微妙な配置の設定などが必要となってきます。 そんな時、背景画像のCSSは設定をどのように変えたらいいか？わからなくなることがあります。 背景
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Av-jyo.com
http://www.netch.jp/articles/2009/06/25/cufon/