PNG画像をより美しく、より軽量に最適化するテクニック | コリス
先日、紹介した「JPEG画像の最適化テクニック」に続いてSmashingMagazineから、PNG画像をより美しく、より軽量に最適化するテクニックを紹介します。 追記：2009/07/27 本エントリには続きがあります。 続：PNG画像をより美しく、より軽量に最適化するテクニック Clever PNG Optimization Techniques 下記、各ポイントをピックアップして紹介します。 最後のはCS3向けで不明だったので、途中省略しています。 はじめに PNG画像フォーマットの概要 1. ポスタリゼーション 2. 手のはいってない透過 3. 透過による分離 4. マスクを活用 はじめに ウェブデザイナーとしてあなたは既にPNGのフォーマットに精通しているかもしれません。PNGは劣化のないフォーマットとして、GIFの非常に良い代わりとなります。 Photoshop（あるいは他の画
『CSSだけで文字列を省略して「・・・」を付けて表示する方法』
本を買わずに解決するWeb制作の小技 ホームページ作成でちょっとしたことを参考書を買わずに解決する方法をPHP CSS Webデザイン jQuery Flashを中心に便利な技をまとめていきます！現在、長野県長野市の制作会社でWeb作成中！ javascriptやphpを使わずに CSSだけで文字列を省略して「・・・」を付けて表示 させるテクニックを発見 前からできる感じだったが、つい最近知りました。 FirefoxとSafariのCSS対応--ボックスに収まらないコンテンツの表示方法 どうやるかというと text-overflow: ellipsis; を使う。 ellipsis は、はみ出した部分の最後に「・・・」を付け足す。 ちなみに clip は、何もつけません。 text-overflow: ellipsis; だけだと上手くいかないので やり方としては、 横幅(width)、w
ソースが公開されているcss小技11エントリーまとめ
cssを使った小技テクニックの エントリーが様々なブログで 公開されていますが、必要な時に 探すのが面倒なのでまとめます。 ソースコードを公開している記事に 絞ってまとめています。 CSSで実装する、ちょっと凝ったパンくずリスト cssでパンくずをデザインする方法とサンプル CSSで実装するちょっと凝ったパンくずリスト CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント ユーザービリティ（見易さ）を考慮したbodyに設定する。CSS HappyLifeさんも 記事を参考に別コードを公開。 CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント CSSだけでフレームを作るテクニック frameタグを使用しないで擬似フレームを作成。IE6対応。 CSSだけでフレームを作るテクニック テキストに影を付け印象的にする JSとｃｓｓでテキストに影を付けるテクニック
CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 | CREAMU
DiaryTechnology CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 CSSでmin-heightをブラウザに関係なく使いたい。 そんなあなたにおすすめなのが、『Easiest cross-browser CSS min-height』。CSSでmin-heightをクロスブラウザにする最も簡単な方法だ。 There are still enough folks using IE6, unfortunately, and it doesn’t support the min-height or min-width CSS parameters. This has caused the invention of a number of different hacks and browser
【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。
ネットで検索をすると CSS のテクニックが山ほど公開されていますが、実際に商用サイトの制作をしていて個人的に利用する頻度が高いテクニックの BEST 5 をご紹介します。 ちょっと凝ったデザインのサイトをコーディングする時に、これらのテクニックに助けられることが多いです。どれも覚えておいて損はないものばかりです！ IE6 でも min-height を使う 例えば、異なる高さのブロックを float しつつ底辺のラインを揃えたい時などに、「IE6 が min-height に対応していたら楽なのに！」と思うことがありますが、以下のテクニックを使えば IE6 でも min-height（相当）の適用が可能になります。 [CREAMU]CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 IE6 に mi
[CSS]実用的なものからマニアックなものまでリスト要素をスタイルするベストプラクティス
実用的なものからマニアックなものまでリスト要素をスタイルするベストプラクティスをDev Snippetsから紹介します。 Styling your Lists: 20+ Brilliant How to's and Best Practices
Elastic Calendar Styling With CSS | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! This post was co-authored by Chris Coyier and Tim Wright of CSSKarma A traditional calendar is a grid of numbered boxes on a page. As a web designer, you might go right for a table, and I wouldn’t fault you for that. Tables, though, can sometimes be tough to muscle into shape. The CSS purist
リストをデザインするためのCSSプラクティス20+ – creamu
devSnippetsで、リストをデザインするためのCSSプラクティスが紹介されています。 ざっといくつかご紹介。 » Elastic Calendar Styling with CSS CSSでデザインしたカレンダー。↑のキャプチャはこちら » Simulating a Table Using an Unordered List ul,liでテーブルレイアウトを作る » How to Create a Block Hover Effect for a List of Links リンクのリストにブロックのhoverエフェクトをつける » Turning a list into a navigation bar リストをナビゲーションバーに » FORM elements design using CSS and list (ul and dl) ulとdlを使ってフォームを作成 » Pr
FlashとAction Script3.0のチュートリアル30 – creamu
noupeで、FlashとAction Script3.0のチュートリアルが紹介されています。 ざっといくつかご紹介。 » Create an Impressive Magnifying Effect with ActionScript 3.0 displacementMapFilterを使って拡大鏡のエフェクトをかける » Creating Gradients in Flash Flashでグラデをかける基本操作を動画で学ぶ » Infinite Gallery / Menu Flash,AS3でギャラリーやメニューを作る方法 » Using the Timer Class to animate rotation タイマークラスを使って、シンプルなシェイプを回転させるチュートリアル » Flash Mouse Trailer with Stars マウスに星がついてくるエフェクト » C
ウェブデザインにおける、ライトとシャドウの効果的な5つの使い方
ウェブデザインにおける、ライトとシャドウの効果的な5つの使い方をSmashing Magazineから紹介します。 5 Simple Tricks To Bring Light and Shadow Into Your Designs 以下、その意訳です。 ライトとシャドウというのは単にそこにあるだけではありません。ライトは対象物を射し、シャドウを生み出します。 形や大きさ、質感を伝え、目にする対象物の理解を深めます。 ウェブデザインでもこのライトとシャドウは非常に重要で、デザインをよりナチュラルにし、感動的で直感的なものにします。 ここに、ライトとシャドウの洗練された5つの使い方を紹介します。 A Quick Anatomy Of Light And Shadow ライトとシャドウの構造 下の図は、ライトが左からあたっています。ハイライトはそのライトが一番強くあたっている箇所です。そして
デザイナーがDTPからWebに移行する際の11のアドバイス
デザイナーがDTPからWebに移行する際の11のアドバイスをThe Design Cubicleから紹介します。 Transitioning from a Print to a Web Designer 以下、その意訳です。 DTPからWebに移行する際、今まで培った法則やスタイルを捨てるということではありません。Web向けにそれらのスキルを活用します。 実際、紙を模倣したデザインの人気は高く、ニュースサイト、Eコマースサイト、ブログなど多くのウェブサイトで採用されています。 1. Design your sites and images at 72dpi 72dpiでデザイン Webは300dpiではなく、72dpiを使用します。 2. Use RGB RGBを使用 カラーモードはCMYKではなく、RGBを使用します。 3. Design in Photoshop 作業はPhotosho
よいCSS開発を行うための８のＴＩＰＳ:phpspot開発日誌
8 methods to bring your front end coding to rockstar levels | StylizedWeb.com よいCSS開発を行うための８のＴＩＰＳとして、当たり前かなと思うことから、なるほどというものがあったので以下にご紹介。 ・IDやクラス名にはより意味のあるものをつけよう たとえば、boxとかwrapperとかcontainerとかは一般的ですね。 一般的なものをつけておけばそれが何なのかすぐに分かるし、協業の際にも便利。 全体のラッパー以外にも、headerとか、content とか footer とか固定で使っておくと一貫性が出ていい感じですね。 まあ当たり前の人には当たり前なテクニックかも。 ・閉じコメントをつけて構造を分かりやすく <div id="header" class="section"> <div id="header-
[CSS]セミリキッドレイアウトの両端に背景画像を配置するスタイルシート
セミリキッドレイアウトの両端にドロップシャドウの背景画像を配置するスタイルシートをSoh Tanakaから紹介します。 Tips for Developing Semi-Liquid Layouts demo デモでは、入れ子にしたdiv要素にそれぞれ背景画像を設置。 親は中央配置にし、min-width, max-widthを設定。 子はoverflow:hidden;を指定し、paddingなどを設定します。 HTML <textarea name="code" class="html" cols="60" rows="5"> <div id="content_wrap"> <div class="content"> <!--Content--> </div> </div> </textarea>
jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法:phpspot開発日誌
Justify elements using jQuery and CSS jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法が紹介されております。 何ができるか？というのは次の図を見て頂くのがはやいでしょう。 ビフォア ↓↓↓↓ アフター これを実現するために、CSSとマークアップによって実現するのが普通ですが、jQueryによってもっとスマートに出来るようですね。 具体的には、次のように、label の中で width がもっとも大きいもののサイズを得て、そのサイズにJavaScriptで調整しちゃうというものです。 $(document).ready(function() { var max = 0; $("label").each(function(){ if ($(this).width() > max) max = $(this).width(); });
使わなにゃ損！記号フォントで作るWeb素材 (1/2)
アイコンやバナーなど、Webサイトのデザインにちょっとしたイラストを使いたいけれど、絵はまったく描けない。かといって、他人に頼んで描いてもらうほどでもないし……。そんな困ったときには、記号フォントを試してみてはどうだろうか？ 記号フォントとは、通常アルファベットなどの文字が割り当てられている文字コードに、記号や絵文字を割り当ててある特殊なフォントで、Windowsの場合は「Wingdings 1」「Wingdings 2」「Wingdings 3」「Webdings」が標準で付属している。いずれも身の回りのものをモチーフにしたイラストが収録されているので、うまく使えればネット上でフリーアイコンやイラストを探すよりも手っとり早い。今回は、Illustratorでの使い方と簡単なTipsを紹介しよう（以降の操作説明は、Illustrator CS4を前提としています）。 必要なときにすぐ使うた
CSS 回り込み解除の決定版 | ユージック
CSS 回り込み解除の決定版 2007年1月19日 ここ最近コーディングをしていてDRY(Don’t Repeat Yourself)同じ作業を繰り返さないという考え方をCSSやマークアップにも取り入れていきたいと思うようになりました。そこで今回はfloatに関する便利なTIPSをご紹介します。 floatをかけた要素の後続要素は自動的に回り込んでしまいます。それを解除するためにclearを後続要素にかけてfloat解除しますが不自然さを感じます。というのも別の所でその後続要素を回り込ませたい場合などがあれば、floatの解除の解除といった同じ作業を繰り返してしまうからです。 そこでfloatの後続要素にclearをかけずにfloatした要素を含んだ親のブロック要素にclassをつけるだけで後続要素を回り込まなせないような方法があります。 classは2つでも3つでも付けることができますの
画像とかの横にあるテキストを上下中央に
←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。 だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました！ display: table-cell;がポイントになってて、IEはハックで対応みたいな感じです。 デモページ 画像とかの横にあるテキストを上下中央にする。のデモページ ヨモツネットさんとまるっと同じサンプルだとアレなので、ちょっとだけ実用的な感じでつくってみましたよっと。 ちょっと、IE6で確認してないので、ダメだったらご連絡ください。 IE6対応しました。ハックの書き方がいけなかったようです。すみません。 div.centeringTest p { display: table-cell; vertical-align: middle;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
構造のマークアップなしでフロートをクリアする方法
CSSのみで画像に違和感なく注釈を入れるサンプル:phpspot開発日誌
[CSS]上部のエリアを確保しつつ、要素をページの中央に配置するスタイルシート