CSSを使えば画像の拡大、縮小はwidth、heightを使って行えますが これだと拡大した時の位置が動いたり、周りの要素に影響を与えたりします そんな時scaleを使えばとても簡単に画像を拡大・縮小する事が出来ます CSSのscaleを使ったデモ 画像の上にマウスポインターを乗せると上では拡大、下では縮小します いつもそのまま中央から拡大・縮小されます、分かりやすいように動作をアニメーションにしています コード HTML <div class="big"> <img src="img.jpg" alt=""> </div> <div class="small"> <img src="img.jpg" alt=""> </div> CSS img { margin-top: 68px; -webkit-transition:all 1s; -moz-transition:all 1s; -
テキストで実装した見出しなどを画像に置換するテクニックで「-9999px」が有名ですが、そのパフォーマンスを改善するテクニックを紹介します。 Replacing the -9999px hack (new image replacement) [ad#ad-2] 画像置換：-9999px 改善したテクニック 画像置換：-9999px -9999pxを使った画像置換のテクニックは、下記のようになります。 HTMLは見出し要素で実装します。 HTML <h3 id="sample06">見出しのテキスト</h3> 「text-indent:-9999px;」でテキストを見えない位置にし、見出しとなる画像を背景画像として表示します。 #sample06{ width:300px; height:50px; background:url('bg-01.gif') no-repeat 0 -250p
HTMLで複数の画像を読み込むとき、HTMLのimgタグだけだと不恰好となりがちですが、読み込みを管理すれば見栄えも整いますというデモとJSライブラリを作ってみました。次の2つのデモを見比べて何が違うのか確認ください。 デモ (通常のimgタグ) デモ (LoadManager.jsを使用) デモの違いとは 前者は画像がバラバラとインターレース的に読み込まれ、後者は読み込み終わるまでローディングが表示され読み込まれたものがフェードインして表示されます。 ▼前者のデモ ▼後者のデモ 後者のデモには、ローディングのパーセンテージ表示も付いています。読み込みが何%まで達しているかを確認できるのも、後述のJSライブラリのメリットです。 HTML5で作られたフルFlash的なサイトを見たときにimgタグでインターレース的に画像がバラバラとでてくることが多くて、いつも微妙な思いをしていました。Flas
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 cssの小技的なテクニックが便利なので好きなん ですが、cssそのものが嫌いで覚えられないので カンペ的な記事を作ることにしました。便利な小技 は沢山あるんですが、特に自分が良く使いそうな Tipsをメモします。既に出回っている情報ばかりで 特に目新しい手法はありませんので何も期待でき ないです。 というわけで特にテーマも一貫性も無くて、ただ便利ってだけです。推奨されない方法もあるかもしれませんが、僕は細かいこと気にしませんのでそんな感じです。 内容も既出なのでお詳しい方にはお役に立てないですが、僕の個人的なメモなので適当に流して頂けると幸いです。 floatで並べたリストのセンタリング Sample01 コード .centered { position: rela
最近のトレンドの一つでもある背景画像をブラウザの枠いっぱいに表示する実装方法はたくさんあります。その中から、理にかなった最新のテクニックや、より多くのブラウザに対応させるテクニックを紹介します。 Perfect Full Page Background Image [ad#ad-2] 下記は各ポイントを意訳したものです。 各デモはページ下部のDownload Files」で、まとめてダウンロードできます。 背景画像をブラウザの枠いっぱいに表示するテクニックとは CSS3を使ったテクニック CSSだけで実装するテクニック：その1 CSSだけで実装するテクニック：その2 jQueryを使ったテクニック 背景画像をブラウザの枠いっぱいに表示するテクニックとは 前提として、下記のポイントが挙げられます。 画像でページをいっぱいにします。 空きは無いようにします。 画像のサイズは必要があれば調整しま
Hgwr 2009年5月8日 (金) 20:38 (UTC) さくらのレンタルサーバ スタンダードプランでは mod_deflate や mod_gzip が使えないみたい。転送効率を稼ぐためには、あらかじめ gzip しておいて、 mod_rewrite で圧縮したファイルを見に行かせるようにします。 圧縮したファイルを見に行かせるようにする .htaccess の設定例 参考: コンポーネントを圧縮しよう! : 独断と偏見の何でもレビュー <IfModule mod_rewrite.c> RewriteBase / RewriteCond %{HTTP:Accept-Encoding} gzip RewriteCond %{REQUEST_FILENAME} "\.(css|js|html)$" RewriteCond %{REQUEST_FILENAME} !"\.gz$" Rew
今まで色々とWEBベースのカラーパレットジェネレーターを使ってみたけど、どれもいまいちピンと来なかったという人は、何も言わずに「Color Scheme Designer 」を試してみてください。特にWEBデザイナーにとっては、かなり使える機能が満載です。 一見、何の変哲もない普通のカラーパレットジェネレーターに見えますよね。でも、ちょっといじってみれば、そんじょそこらのジェネレーターとは全然違うのが分かります。 まず、画面左でパレットのキーカラーとなる色を選びます。選んだキーカラーを元に、6つのモードでカラーパレットを作成します。モードは左から「mono＝同系色」「complement＝補色」「triad＝三色組」「tetrad＝四色組」「analogic＝類似色」「accented analogic＝補色＋類似色」となっています。 百聞は一見に如かずですので、まずは試してみてください。
WEBサイトを作っていると、「文字の色を変えたい」、「余白を大きくしたい」、「背景をグラデーションにしたい」ということがあります。 文字色や余白、背景を全て画像で用意するということもできますが、画像ばかりを用意するのも手間ですし、ファイルサイズが大きくなるのも問題です。 そこで、WEBサイトをデザインするときCSSを使います。簡単にCSSのことを説明するな、HTMLの見た目を作ることができるプログラミング言語です。 みなさんもCSS、CSS3といった言葉をネットで見たり聞いたりしたことがあると思います。CSSを使うことで、HTMLを色々と変更することができるので、プログを使っていた人は、簡単なCSSの構文を知っている人もいるかもしれません。 本格的にWEBサイトをデザインしようと思ったら、CSSについてより詳しく知る必要が出てきます。 また、CSS4という新しいCSSの仕様もあります。CS
PDFファイルへのリンクには、PDFアイコンをつけたい。 でも、ひとつひとつそうするのは大変！ その上、別の人がアップした記事までは管理できない。って、ことでこれが便利そう！ a[href $='.pdf'] { padding-right: 18px; background: transparent url(/common/img/icon_pdf.gif) no-repeat center right; } ".pdf"のところを、.xlsとかにして、それぞれ別のアイコンを指定すればいろいろできる。[href $='.xxx']で「.xxxで終わるリンク」、という意味。 mail:toのはあいはa[href ^="mailto:"] { padding-right: 20px; background: transparent url(/common/img/i
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
