コーディングで押さえておきたいポイント 1.構造と見た目を分離する HTMLは文書構造。CSSはスタイリング。 と役割を分担させたコーディングをする。 brタグを連続で打ってスペースを空ける 行頭を1字分空ける、または揃えるために空白文字を使う 文章構成上必要ない、背景に配置するような画像やアイコンをimgタグで設置する。 カラムの端から端まで見出しになっているデザインにおいて、スタイリングし難いという理由でsectionタグ（または共通で囲ってるdivタグなど）から外側に見出しを出してしまう 上記の例は全てHTML側で見た目をコントロールしています。 このような使い方は極力避けましょう。 またCSSは、後述する保守性等を考慮して直接インラインやstyleタグで書くのは避け、外部ファイルにまとめます。 2.Validなソースを書く W3Cの仕様に基づいた正当なコードを書くように心掛けましょ
【Grunt】おれおれな画質調整の自動化 – T2
読了: 約 7 分 今制作に携わっているアプリケーションでページ毎、パーツ毎(ファーストビューであるか否か、アイコン等)でフォルダを作って画像を管理しています。 ホーム、投稿ページ、マイページ、タイムライン等。その中でもGoogleが最近1000ms以内で表示しろというものを出していて、 それじゃないと評価しないぞという事でスピードに本当にシビアになってきていますね。 Google公式サイトから Mobile Analysis in PageSpeed Insights Googleの方が書いた最近のspeedに対しての記事 Intro – Webを速くするためにGoogleがやっていること Make the Web Faster 00 – スタートアップのようにアプリを出してすぐの時や2,3年は改善を早いサイクルで回すために、 CSS Spriteや1つ1つの画像の管理が難しくなってきま
li > a" data-ddst-label="Navigation Items" data-ddst-no-support="background,border"> li > a" data-ddst-label="Navigation Items" data-ddst-no-support="background,border"> Home Categories Tutorials Resources Inspiration Freelance Interviews Design Freebies About Contact Advertise With Us Write For Us Contact When designing a website, one of the most important elements is the navigation. Both in term
こんにちは、@cappeeです。関東も大雪でしたね(・∀・) 現在がりがりっとスマートフォンサイトのコーディングに勤しんでいます。 以前Sass+Compassを使った泣くほど早いmixin集を公開しましたが、スマホだとRetina対応があるためSprite画像を使ったmixinは変更する必要があります。 色々とRetina対応したmixinの記事を拝見させていただきましたが、background-sizeを毎回手動で入力する必要があったりと以外と「これだっ！」と思うmixinがなく。。 Compassの公式サイトや色んな角度から検索して参考にした結果、個人的には「これが決定版だ！」と思えるmixinができました！！！ CSS Spriteの設定 ※こちらはCompassのスプライト初心者向けですのでわかる方はスルーしてください！ スプライト画像を使ったCSSの指定には主に以下の3つがある
![[決定版]Retina対応したスプライト画像のmixin | Cappee Design](https://cdn-ak-scissors.b.st-hatena.com/image/square/915b2cc951b69e1769ed9ae12fc1c49517798539/height=288;version=1;width=512/http%3A%2F%2Fs.wordpress.com%2Fmshots%2Fv1%2Fhttp%253A%252F%252Fcompass-style.org%252F%3Fw%3D500)
Una lista imperdibile per i webdesigner! CSS Type Set CSS Type generator csstypeset.com/ CSS Sprite Generator spritegen.website-performance.org CSS Sprite Generator csssprites.com Button Maker Online 80x15 or 88x31 button generator tools.dynamicdrive.com/button/ CSS Tidy Online Automatic code clean floele.flyspray.org/csstidy/css_optimiser.php?lang=en Typechart Type preview typechart.com CSS Compr
CSS Sprites is a technique where you use a background-image, a set width and height, and adjust the background-position to display only the portion you need to show. This way you can use a single image and display lots of different graphics with it, saving server requests and speeding up page load times. The “sprite” is the single, combined graphic. We can use this same theory, only instead of usi
Yahoo! JAPAN Tech Blog Yahoo! JAPANは27日、Yahoo!ニュースをリニューアルした。従来よりも高速にページが表示されるように改善が施された。従来は3秒から5秒ほどかかることもあった表示時間を1秒以内のレスポンスタイム実現を目指して各種最適化が実施されたと説明されている。 どういった最適化が実施されたのかがYahoo! JAPAN Tech Blog Yahoo!ニュース高速化へのサイトデザイン側からのアプローチで説明されている。サイトデザイン側の高速化アプローチとしておもに次の技術を活用したという。 CSS Spriteの採用 PNG8の採用 Optpix WebDesignerを使いPNG8の減色処理を実施 Smush.itを活用しPNG8の余分なチャンクを削除 興味深いのは、これらテクニックはYahoo!のエンジニアでありYSlowの開発者、Stoy
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。
今回の記事は2008-12-07[XHTML+CSS]CSS Spriteで表現する角丸 | Commit Labの続きです。 これはCSS Spriteというテクニックを利用して作った角丸boxです。シンプルな記述のhtml+CSSと一枚の画像で角丸を表現しています。 文字の拡大にあわせてboxの縦が伸縮しますので、すぐにフレキシブルな角丸を表現出来ます。またデザインにおいても、htmlとcssのみで作られているので思いのままに装飾する事ができます。 今回は前回の問題点を修正しました。h2のheightをpxで固定していたのはやめて、line-heightのみで高さを調整しました。これで文字を拡大しても、H2から文字がはみ出す事はありません。 またH2にbackground-colorを与え、どれだけ拡大しても背景が途中で途切れないようになりました。 それに伴いCSS Spriteの画像
Jennifer Semtner.com :: Web Designer / Developer » Blog Archive » Extending CSS Spriting
CSS Spriting is a technique for speeding up the load times for your website by reducing the number of HTTP requests for images to the server. On Yahoo’s best practices website, they say: “CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display th
こんにちわ！ Sass+Compassを導入してから、すっかりSASSってばっかりいるＷｅｂヤンキーのＡスケです！ 前置きなんていらないよって方はこちらをクリック！ … 最近、周りでもブームが起こっているようで 女に惚れSASS名言集 — SOUさん (@sou_lab) 2013年5月8日 とか ペガSASS — ぬくすさん (@nukusu) 2013年5月8日 だったり あいつ、俺のことSASSってるんじゃないか… — Ａスケ ↻Webヤンキーさん (@EisukeAkimoto) 2013年5月8日 とか大盛り上がりです。 一度この便利さを味わったら、脱することはできない夢のようなツール… しかし導入当初、Windows環境下だとCSSスプライト画像が生成されず、困り果てたことがありました。 それを解決すべく作業手順を解説します。 なお、Sass+compassの導入は済んで
制作過程で変わるサイトの表示スピード - my best practices - hiromitz - builder by ZDNet Japan
前回の第一回目のブログで、自己紹介をするのをすっかり忘れていました。 今回のブログでは、まず簡単に僕の自己紹介をしたいと思います。 僕は、KDDIウェブコミュニケーションズに勤めています。レンタルサーバー（ホスティング）の「CPI」と、ウェブ上で簡単にサイトが作れる「Jimdo」という二つのサービスを行っている会社です。僕はこの会社で、Jimdo Japanの技術責任者と、新規事業開発を担当しています。 さて、自己紹介も終わったところで、今回はサイトの表示スピードの最適化について書きたいと思います。 「CPI」「Jimdo」共に、ユーザーのサイトをホストするサービスなので、ユーザーのコンテンツの配信スピードもできるだけ最適化するように努めています。 GoogleやAmazonが以前に１秒遅れることで数十パーセントのユーザーが離脱すると言っていましたが、それほどではなくても、サイトの表示スピ
CSS Nite in Omotesando, Vol.1が終了しました 記事公開日：2010年6月 9日（水） 2010年6月8日、表参道 The Gallery「station 5」 でCSS Nite in Omotesando, Vol.1を開催し、70名弱の方にご参加いただきました。 「Fireworksビギナーのための120分徹底トレーニング」と題して、鷹野 雅弘（スイッチ）が、Fireworksの基本操作からTips、CS5での強化点についてお話ししました。 たくさんのtweetをいただきました。ありがとうございます。 Togetter - まとめ「CSS Nite in Omotesando, Vol.1「Fireworksビギナーのための120分徹底トレーニング」」 次のブログで取り上げていただきました。ありがとうございます。 ワイヤーフレームはFireworksがベスト
CSSの背景画像を解析しまくるブックマークレット SpriteMe | kotaログ from Magical Remix&Co.
ウェブ制作者必携！相当便利です。 CSSレイアウトで、飾りになる画像はbackground-imageとして指定することが多いです。個別に画像を切り出す場合もありますが、属に言う「CSS Sprite」と呼ばれる手法もこれです。 CSS Spriteとは？ 画像を個別にスライスして個別に読み込むより、1枚の画像にして表示位置を調整して出す手法です。 個別に読み込むよりも、スライスの手間を省略・読み込み時のリクエストを1度だけで済むので、使い方によってはCSS Spriteを活用した方が速い場合があります。 Firefox3.5だとソースから画像までのリンクをたどれますが、それよりも便利なブックマークレットがあります。 ブックマークレット配布サイト：SpriteMe 他人のサイトの解析時、画像をまとめて見られるので重宝します。 導入方法 配布サイトへ行き、“SpriteMe”のリンクをブ
Css Spriteを自動生成しよう - 進・日進月歩
Css Spriteという手法をご存知ですか？ 画像の部品をひとつの画像にすることで、セッション数を節約したり圧縮効率を上げたりする手法です。 こうすることによりwebページがより素早く表示されるようになり、ユーザはハッピー！ということらしいです。 ものすごい負荷がかかるほどの大規模サイトじゃない限り、大抵の人には関係ない代物ではあります。 この画像を作るために通常はデザイナが苦労して画像を合成するらしいです・・・・お疲れさまです・・・ 何が大変かというと、デザインが変更になる度に画像を合成しCSSを書き換え・・・・死にたくなりますね。 そこで例えばこんなツールがあります。CSS Sprite Generatorは、画像一式をzipで圧縮して投稿すると冒頭の画像のように合成してくれその上CSSまで作ってくれるという優れものです。 けど、結局デザインって画像とか文字色とかを微調整す
WordPress | CSS-Tricks
A Complete Guide to CSS Grid Last updated Feb 9 2023 Author Chris House Category CSS Custom Checkboxes and Radio Buttons Last updated Jan 11 2023 Author Chris Coyier Category CSS A Complete Guide to Flexbox Last updated Dec 9 2022 Author Chris Coyier Category CSS System Font Stack Last updated Oct 26 2022 Author Geoff Graham Category CSS How to use @font-face in CSS Last updated Sep 30 2022 Author
2014年9月末、CDNサービスを提供しているCloudFlareが「Universal SSL」を発表しました。同社の無料プランを含む全てのユーザーに、無償でSSL(https)接続サービスを提供するという驚くべき内容です。同社によれば、現在、セキュアな接続をサポートしているサイトは全世界で200万サイトほどだったそうです。ですが、Universal SSLの登場によって倍の400万サイトまで増えることになります。 ワンクリックでHTTPS(SSL)が利用可 このブログのドメイン(srytk.com)もCloudFlareを使っているので、cloudflare.comの設定ページを見ると確かにありました。 ドロップダウンメニューからFlexble SSLを選択するだけで「とりあえず」SSLが利用できる 当初、全てのユーザーがuniversal sslを利用できるようになるまで最大24時間
"CSS Sprite Generator"
Ed Eliot氏およびStuart Colville氏は9月28日(ドイツ時間)、Webページにおける画像の読み込みオーバーロードを軽減するためのおもしろい取り組みをWebサービス「CSS Sprite Generator」として公開した。ページを読み込む場合、画像を要求するHTTPリクエストが発行されるわけだが、「CSS Sprite Generator」はその要求数を低減させようとするものだ。 ページが画像を多く含んでいる場合、画像を取得するためのHTTPリクエストが大量にWebブラウザから発行されやすくなる。このHTTPリクエストを軽減するために、ページで使われている画像をひとつの大きな画像にマージしてしまい、かわりにCSSの機能を使ってマージされた画像から必要な部分だけを表示しようというのがCSS Sprite Generatorでの発想だ。 CSS Sprite Generat
インプレスビジネスメディア が提供する情報コミュニティサイト 「Web 担当者 Forum」 に掲載された情報を毎週一度、まとめてご紹介するこのコーナー、今回は解説記事 25 本とニュース記事 22 本です。 Web担の姉妹サイトもあります データセンター（iDC）に携わる方には「データセンター完全ガイド」が、レンタルサーバーに興味のある方には「レンタルサーバー完全ガイド」が、企業内情報システムのお仕事をされている方には「IT Leaders」が、お役に立てるはずです。 ●今回の大人気は「SEOが無意味になる。infoseekが示唆する未来」。宮脇氏による連載コラム「企業ホームページ運営の心得」の記事で、ひさしぶりにはてブも230を超えました。 検索結果画面のなかでオーガニック検索結果よりも広告コンテンツが増えてきていることを例示し、検索エンジンの向かうかもしれない方向を論じています。 ネ
日経 BP 社「PC Online」の「『Yahoo!ニュース』の表示速度が3〜5倍に、そのからくりは……」という記事が人気を博しているようなので、その人気にあやかって、私が普段実行している画像軽量化の実際の手順をご紹介します。 きっと私のやり方よりスマートな方法がたくさんあると思いますので、ご存じの方はコメントやトラックバックでぜひ教えてください。また、このエントリーで出てくるソフトウェアは基本的に Windows 用で、すべて無料で使えます。 叩き台とするページ 叩き台をテキトーに作ってみました。 画像は Paint.NET で作成しました。専業デザイナーでない一介のプログラマーの私にとって、無料で使いやすいペイントツールです。一応 Photoshop Elements も持っていますが、Paint.NET のほうが手に馴染んでいます。 この段階で、7 枚の画像ファイルを使用しています
WCAF Seminar Vol.4での講演ログ。 タイトルのLong Life Web Performance Optimization、長いのでLong Life WPOって略します。これは、Long Life Designからもじりました。Long Life Design というのはD&DEPARTMENT PROJECTのナガオカケンメイさんが行っているプロジェクトで、60年代とか70年代の昔の優れたデザインを今にも伝えて使い続けていこうって趣旨だったと思います。 それに対して、Webの世界はどうでしょう？移り変わりが早いですよね。「お！これが90年代のテーブルレイアウトかぁ〜エクセレント！」なんてことはない。そこで今回はLong Life Designのように長〜く使えるWPOを心理学などの人間側から考えてみようってのが今回のセッションの狙いです。 最近のパフォーマンス事情 最近
Useful Photoshop Tools and Techniques For Your Workflow — Smashing Magazine
A list of useful and time-saving Photoshop resources to improve your design skills as well as your professional workflow. From Smashing Magazine to our readers, to make the search of these ever-growing techniques easier. Productivity is a crucial asset of professional designers. Photoshop is an extremely powerful application for photo processing and image manipulation, and we can make it even more
The CSS sprite generator takes a number of source images and combines them into a single "sprite" image and supplies CSS to map to each image within the sprite. The technique this tool employs is often used to improve the performance of a web site by reducing the number of HTTP requests that the client's browser needs to make.
CompassでCSS Spriteする際にスプライト画像間のマージンを取る方法 CompassでCSSスプライトを作成する際に画像間に余白を取らないとRetina対応した際に奇数のサイズの画像などがあると表示が少しおかしくなります。 all-<map>-sprites(true);の場合は$<map>-spacing:10px;などのconfigで設定できるのですが、sprite-map()などでは余白が確保されません。 sprite-map()では以下のようにすると余白を取ることができます。 sprites: sprite-map("sprites/*.png", $spacing: 20px); 参考:Individual sprite spacing in the sprite-map function doesn't work · Issue #934 · chriseppste
株式会社オールフェスタは、「仕事で一緒に遊ぼうぜ！」という祭の音頭をとる会社です。Sass親善大使の田所です。 先週の設計・デザイン編に引き続き、今日は実装の部分でのお話をしようかと思います。 全体的に高速化ネタが多めです。 内容： 1. 画像を最適化する 2. CSSスプライトを使う 3. アイコンはWebフォントで 4. できるだけCSSで表現して画像を減らす 5. .load()を使う 6. backgroundプロパティで背景画像を表示させない時の正しい書き方 7. テーブルは工夫が必要 1. 画像を最適化する スマホの回線でも快適に閲覧できるよう、サイトはなるべく高速化したいところです。 画像が多いなら、まずは最適化して画像のファイルサイズを削減してみましょう。 僕(Mac)はImageOptimというアプリケーションを使っています。PNGでもJPEGでもG
25 Beautifully Created CSS and jQuery Menu Tutorial - DJ Designer Lab
Navigation menu is the lead part of a web design. A visitor always tries to search his content in a minimum time and high lighted area. For that a designer have to create a beautiful navigation menu for a web design. Today we present 25 beautifully created CSS and jQuery menu tutorial for designers. How to Code an Overlapping Tabbed Main Menu CSS Sprite Navigation Tutorial Create an apple style me
レスポンシブなCSSスプライト - MANA-DOT
よく知られたCSSスプライトはボックスの幅･高さをスプライト画像と同じに指定し、background-position をずらすことで複数のスプライト画像を含むスプライトシートの中から対象画像だけを表示します。 この方法だと表示できる画像のサイズは固定なのですが、 background-sizeとbackground-positionを % で指定し、ボックスの幅によって可変サイズな (レスポンシブ、あるいはフレキシブルな)CSSスプライトの表示法を紹介します。 デモ 元画像 gulp-spritesmith で作成した適当なスプライトシートです。 スプライトの利用例 このページの幅を変えてみると、以下のスプライト画像のサイズが画面幅によって可変であることがわかると思います。 上からwidthを 70% 、 50%、 100% で指定しています。 ボタン1 ボタン2 ボタン3 利用例を含め
Are You Loosing Traffic By Poor Website Performance? — Smashing Magazine
Website performance is a hugely important topic, so much so that the big companies of the Web are obsessed with it. For the Googles, Yahoos, Amazons and eBays, slow websites mean fewer users and less happy users and thus lost revenue and reputation. In your case, annoying a few users wouldn’t be much of a problem, but if millions of people are using your product, you’d better be snappy in deliveri
今年は「表示速度最適化(RSO:(Web Page)Rendering Speed Optimization)」の元年になると思う | Webディレクションやってます blog
Webディレクターとして名村晋治がプロジェクトマネージメントやディレクション業務に当たっている時に感じている問題解決の手法やセミナー等で話をしている内容、自身が使っているプロマネにおけるツールなどWebディレクションに関する情報の紹介しています。 2年ぐらい前からじょじょにだと思うのですが、サイトの「表示速度」について言及される事がネットの中で増えてきているかと思ってます。 もちろん、「○秒以内に表示しないとユーザーは逃げる」的な表示速度論ってのは大昔からあって、別のそれ自体は目新しい事でもなんでもありません。 ただ、その表示速度に関するレベルが冒頭の2年ぐらい前から結構高いレベルで争われるようになってきている感覚があります。 それは海外の方とチャット等で技術トークを結構しているのですが、その場でもやっぱり表示速度の向上に関する話題が増えてきている事でも実感がありました。 といった事から、
Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Gerri Elder氏がSmashing Magazineにおいて35 CSS-Lifesavers For Efficient Web Designのタイトルのもと、CSSに関連したツールやライブラリを紹介している。タイトルには35とあるが、実施に紹介されているツールやライブラリの総数は50。紹介されているCSS関連のツールやライブラリは次のとおり。 より進んだCSSセレクタや変数 Less CSS (CSSに変数、操作、ネスト、ミックスインなどの機能を追加するためのコンパイラ。LESSファイルからCSSファイルを生成) DtCSS: Variables in CSS (PHPベースのCSSプリプロ
PCから携帯絵文字が入力できるエディタ風ボックスをjQueryとphpで作るまとめ | さとう君のウェブサービス開発日誌と雑談
携帯の絵文字ってパソコンから入力できへんの？ うちの相方さんからの素朴なリクエストから、パソコンから携帯絵文字の入力に対応してみたので、それをここにまとめておきます。 完成形はこちら。絵文字がフローティングウィンドウっぽく開き、クリックするとテキストエリアに絵文字コードが挿入されます。 やってみると、1日でできたので、パソコン・モバイル両対応のCGMサイトをやってる人は余裕があれば是非やってみてください。パソコンでも携帯でも絵文字が入力できると、サイトが賑やかになった気がします。 絵文字ありのメールと絵文字なしのメールなら、絵文字ありの方がもらって嬉しいですよね。 絵文字ありのサイトと絵文字なしのサイトなら、断然絵文字ありの方がいいって思いませんか？ 絵文字をどう処理するか？ 携帯キャリア、docomo・softbank・auで絵文字コードは全然違います。詳しい説明は省きますが、3キャリア
Yslow
ライセンス： フリーウェア おすすめ度： ( 4.00点 ) 著作権者： Yahoo! Inc. 動作環境： 95/98/ME/NT/2000/XP/Vista 公式サイト： Yahoo! YSlow for Firebug 2009/07/20より林檎の木が新しくなったのをご存じでしょうか？ リニューアル？いえいえ。大幅な機能追加？違う違う。管理人が変わった？ 実は、2009/07/20より林檎の木はハイスピードバージョンとして生まれ変わりました！ 林檎の木は、速度的に次の一歩を踏み出しました。いわゆるネクストジェネレーション、これはもうネクストジェネレーション！ Yahoo！JAPANが2009/4/27にYahoo!ニュースを高速化したと発表しました。 なんと3〜5倍になったとか。なんだと、貴様、3〜5倍だと。3〜5倍って尋常じゃない数字だぞ、調子にのり
I recently had to work on a project for iOS that required that sound play on particular actions being performed. The problem is that iOS and HTML5 has been seriously oversold by Apple and the devices are pretty poor in comparison to the desktop. Audio and video are particularly poor, so to solve my problem I used an audio sprite, a technique that was similar to CSS sprites, just for audio. READER
こんばんは、村井です。 早いもので明日で三周年をむかえます。今後ともどうぞ宜しくお願い致します。 第一弾はリクエストもあったので、後輩のみんなへ「サイト公開前にこれだけは忘れずにやっておきましょう」的なメモ。また思いついたら追記します！ ファビコン 文法・ブラウザ・リンク切れチェック パフォーマンスチェック アクセス解析 サイトマップXML ファビコン お気に入りアイコン、そうですアドレスバーなどに表示されるあれです。 基本的に透過でキレイなファビコンが簡単につくれるので、フォトショップのプラグインを使っています。 こちらのサイトで親切明快に解説されています。 http://2xup.org/log/2006/04/28-2323 文法・ブラウザ・リンク切れチェック これはもう言わずもがなですが、よく使うツールをご紹介。 HTML文法チェック Firefoxアドオン LinkChec
Image Fade Revisited | jQuery for Designers - Tutorials and screencasts
Posted on 28th July 2008 — This episode is revisiting the image cross fade effect, in particular Dragon Interactive has a beautiful little transition for their navigation that some readers have been requesting. Greg Johnson takes it one step further to implement this method using jQuery and the methods shown here. Earlier: Coda Slider Effect Next: Animation Jump – quick tip Watch the image fade re
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers The "data" URL schemeを使ってWebページやCSSファイルにバイナリデータ、特に画像を含めるというのは、現状においてはバッドノウハウでしかないかもしれない。しかしながらいくつかのレアなケースにおいては有効なテクニックでもある。現状直ぐに採用するといったテクニックではないが、そういった技術があることは知っておいても損はないだろう。 SitePointにおいてMeitar Moscovitz氏がWhy The data: URI Scheme Could Help Save Your Slow SiteのタイトルでThe "data" URL schemeを使う方法を紹介している。The "data" URL schemeはRFC
CSS3 Buttons – 10+ Awesome Ready-To-Use Solutions (+All Related Tutorials You Need)
Free Web Resources Everyday - WebResourcesDepotFor years, it was images or JavaScript that usually helped us to create non-standard and attractive buttons. With the getting-wider support for CSS3 features and stable resources that can CSS3-enable non-compatible browsers, there are no obstacles left for using CSS3 buttons. Using CSS3 properties, there is a huge space of creativity for designing but
[書評]効率的なサイト作成のためのDreamweaverの教科書 Dreamweaverの書籍は今まで何冊か読んだことがあるのですが、この｢効率的なサイト作成のためのDreamweaverの教科書｣が一番よかったです。 多くの書籍がリファレンス的に機能の網羅になりがちですが、本書は逆引きリファレンス的に機能を紹介していますので機能と同時に実務でどう使うのかを習得することが出来ます。 また、Dreamweaverに限らずサイト作成に必要なHTMLやCSSの解説がいたるところにちりばめられいますし、iPhone/iPadやHTML5、CSS3などの最近のトレンドも網羅されていますのでDreamweaverに限らずに効率的なサイト作成のため知識を吸収できます。 また、本書の特徴を端的に示しているのがロールオーバーの解説です。普通の書籍だDreamweaverのMM_swapImageを紹介して終
![[書評]効率的なサイト作成のためのDreamweaverの教科書](https://cdn-ak-scissors.b.st-hatena.com/image/square/cb6ceb224340f360d9e8028b625977a06812728d/height=288;version=1;width=512/http%3A%2F%2Fimages.amazon.com%2Fimages%2FP%2F4839935394.09._PB_PT-2_OU09_SCMZZZZZZZ_.jpg)
The number of devices with high resolution screens is rising, and with it the need for a simple way to deliver crisp, resolution-independent graphics that don’t waste bandwidth. Vector-based graphics, which are compact and scalable, are a great solution. Icon fonts deliver vector illustrations in an easy format, and there are huge variety of pre-made icon sets to choose from. So, problem solved? N
CSS Sprite 失敗
ページの読み込みが速くなる、管理も簡単になるってわけで、遅ればせながら、このあいだある案件ではじめて CSS Sprite に挑戦しました。CSS で指定する複数の画像を、でかい一枚絵の中に適当に配置してまとめておくっていう、あれですね。 でも、すっかり舞い上がっちゃって、いろいろしくじりました。 最初に、まず、全画像入りの一枚絵を作るような意気込みでのぞんじゃって、いやいやいや、gif と jpg は一緒にできないよって、軽くがっかりしてる自分にあきれました。アホですね。でも、それだけじゃありません。 １、可変サイズのとこは無理！ これもはじめから気づくことができないのはどうかしてると思いますが、CSS Sprite が使えるのって、大きさが決まってるHTML エレメントに対する no-repeat な背景画像としてのみなんですよね。 あたりまえだけど、タイル状に敷き詰めるようには使えな
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML,CSSコーディングで気をつけたい基本的なポイント - Qiita
Website Navigation Menu Toolbox - DesignM.ag
[決定版]Retina対応したスプライト画像のmixin | Cappee Design
WebAir | web. for passion » 40+ “Must see” CSS Tools
CSS Sprites with Inline Images | CSS-Tricks
Yahoo!ニュース高速化の方法、PNG8移行時期は今 | エンタープライズ | マイコミジャーナル
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
[XHTML+CSS]CSS Spriteで表現する角丸2 | Commit Lab
WindowsだとCompassのCSSスプライト画像ができない…！？の解決法 | アンドウェブアンドウェブ
CSS Nite in Omotesando, Vol.1が終了しました｜CSS Nite公式サイト
CDNもSSL(TLS)もSPDYも全部無料、そうCloudFlareならね | Sorry for Team KILLing
週刊：Web担当者フォーラム通信
ウェブ高速化のための画像軽量化処理入門 - 酒と蕎麦と IT と
Long Life Web Performance Optimization - MOL
CSS Sprite Generator in Launchpad
CompassでCSS Spriteする際にスプライト画像間のマージンを取る方法
レスポンシブなサイトをつくるときに知っておきたかった7つのこと ‐ 実装編｜株式会社オールフェスタ | 株式会社オールフェスタ
CSSツール50選 | エンタープライズ | マイコミジャーナル
Audio Sprites (and fixes for iOS)
サイト公開前にやっておくべき事メモ | Blog | STARRYWORKS inc.
HTMLに画像も含める、IE8登場後には使うシーンもあるか | エンタープライズ | マイコミジャーナル
[書評]効率的なサイト作成のためのDreamweaverの教科書
A Designer’s Guide to Grumpicon | Filament Group, Inc.