ブログをリニューアルし、ポートフォリオを公開しました
ご覧のとおり、このブログ（Stocker.jp / diary）をHTML5でリニューアルしました。 今回のテーマは「紙のように軽く、昔の雑誌のように上質で、見る人の印象に残るページ」とし、h1〜h3の文字詰めにこだわりつつ、不要なアニメーションや重いヘッダ画像などは極力排除して軽いページに仕上げました。 タイトル画像やラインなどの画像は、CSS Spriteで2枚の画像にまとめています。 マウスカーソルを乗せたときの色の変化もCSSを使用しているため非常に軽いものになっています。 トップページは3カラムのように見えますが、サイドバーはなく実質1カラムです。 このレイアウトは、jQuery Masonry という jQueryプラグインで実現しています。 タイトルのフォントは Chunkです。 トップページの場合ヘッダの上にサイトの概要を、記事ページの場合記事のタイトルとカテゴリをh1要素
InstantSpriteはWebブラウザ上でSprite画像を作成するソフトウェアです。 複数の小さな画像をくっつけて、それをCSSで切り分けるのがSprite画像です。画像編集ソフトウェアやサーバサイドで行うソフトウェアがありますが、今回はWebブラウザのクライアントサイドで行うInstantSpriteを紹介します。 ファイルをアップロードしました。実際にサーバにアップロードされる訳ではなく、クライアントサイドで処理されるようです。 くっついた画像です。 CSSのSprite設定も出力されます。 InstantSpriteは画像をまとめてアップロード（ドラッグアンドドロップ）するだけで自動でくっつけた上でCSSの設定が出力されます。定期的な更新には向かないかも知れませんが、これまでの画像を一気にSprite化したいといった時にはぴったりかも知れません。 InstantSpriteはJ
Pure Css Line Graph | Css Globe
I often think about ways to visualize data using pure css. A while ago I wrote an article about pure css bar graphs, but what puzzled me lately was a solution for doing line graphs using nothing but css. Many will not see much sense in this technique, specially when we have so much JavaScript (or even Flash) based line graph scripts. My intention was not only to enable data visualization to pe
We haven’t gone back to basics in a while. Today’s tutorial will bring you through the process of building a slick menu using a single CSS sprite image. It’s a simple, but elegant solution for most websites. This was one of the design strategies that first helped me to start using smarter markup. For those of you just getting introduced to this technique today, hopefully you’ll have some similar r
I’m pretty confident that I won’t surprise anyone here by saying that CSS sprites have been around for quite a while now, rearing their somewhat controversial heads in the Web development sphere as early as 2003. I’m pretty confident that I won’t surprise anyone here by saying that CSS sprites have been around for quite a while now, rearing their somewhat controversial heads in the Web development
運営サイト Linux系 Windows系 PC関連 最新更新 recent(20) 2021-06-19 MenuBar 2020-07-03 soft/MultiWriter ISOイメージを複数のUSBメモリに書き込む 2020-05-03 soft/icoutils Windowsのアイコン(*.ico)を取り扱う soft/Jellyfin クロスプラットフォームのメディアサーバー 2020-05-02 soft/OpenPHT オープンソースのメディアセンター soft/Plex 高機能なメディアサーバー 2020-04-23 soft/DeepSpeech Mozillaが開発したテキスト読み上げソフト 2020-04-09 SideBar FrontPage 2020-04-05 soft/ReadyMedia シンプルなメディアサーバー soft/Emby Web経由で再
GitHub - matsubo/emoji-sprite: CSS sprite and icons of EMOJI.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Java Cloud Meeting Tokyo 2010に行ってきたメモ - nakawai’s diary
Java Cloud Meeting Tokyo 2010 自分が参加させていただいたもの Seasar3がやってくる « Java Cloud Meeting Tokyo 2010 Google Web Toolkitのすすめ « Java Cloud Meeting Tokyo 2010 Seasarで動いているWebサービスCacooの裏側 « Java Cloud Meeting Tokyo 2010 Google App Engineプラットフォームの勘所 « Java Cloud Meeting Tokyo 2010 GAEの本質とSlim3によるサクサク開発誤解されがちな点 ※急遽内容変更によりSlim3はカット。 Seasar3はSpring+HotReloading（の予定） ひがさんによる、今のJava Cloudをとりまく情勢を踏まえた、現段階でのSeasar3の構想
昨日、麹町で行われた「一歩先行く！ ツール活用で制作効率アップ in TOKYO」にいってきました。 普段から、時間の足りないワタクシ。効率重視したいし、ツールも大好きです。 半休もらってでも行こう！と思ったら、優しい社長が、仕事としていっていいよとのありがたいお言葉。忙しく仕事をしている同僚たちに大変申し訳ないと思いながらも、参加してきました。 保育園のお迎えの関係上、参加できたのはたにぐちさんのセッションまでですが、十分すぎるほどいろいろなインプットができました。 このセミナーのツイートに関しては http://togetter.com/li/371765 でトゥギャりましたので、そちらもご確認ください。 とても長いので、校正途中。 早いほうがいいと思ったので無理矢理公開という荒技ごめん。 間違い見つけたらこっそり教えてね。 この日のセッション内容 なぜ効率化？わたしたちがやるべきこと
Keep in mind that Firefox has only partial support (it only supports inline SVG mask elements) so we’ll have a fallback for now. Hopefully, we can welcome support in all modern browsers very soon. Note that we’re adding Modernizr to check for support. So let’s get started! Creating the Mask Image In this tutorial we’ll be going through the first example (demo 1). For the mask transition effect to
SVG can be used as an icon system to replace icon fonts. The reasons why SVG makes for a superior icon system are numerous, but we won’t be going over them in this article. If you don’t use SVG icons and are interested in knowing why you may want to use them, I recommend you check out “Inline SVG vs Icon Fonts” by Chris Coyier – it covers the most important aspects of both systems and compares the
Firework CS5が発売されてそろそろ2週間近くたちます。もしかすると、もう誰かがブログに書いていそうですが、ひっそりと仕様が変わっているスライスの書き出しについて書いてみます。 気がついた発端は、先日公開していただいたCSS スプライト作成に便利な拡張機能「CSS Sprite Extension」です。これを見るとCS4までをよく使っていた方はあれ？と思うようなことをしていると思います。CS5限定でわざわざカスタムでスライスの命名を設定しているのですね。 さて、変更になった点は2点あります。いずれも「ファイル＞HTMLの設定＞ドキュメントの詳細」でスライスファイルの設定を行っている場合(デフォルト状態含む)です。 ステート番号(f2,f3,...)を選択すると、s1、s2、s3と全ステートの書き出しファイルに対しs+スライス番号が振られる(cs4まではf2、f3となっていた) 1
data URI Schemeを使ってHTTPリクエストを削減する方法を紹介します。 １．概略 HTMLで画像を表示する場合、 <img src="http://user-domain/foo.jpg" /> という風に、httpを使ってサーバ上の画像ファイルを表示させるのが一般的ですが、httpの代わりにdata URI Schemeを使えば、HTMLファイルに埋め込んだインラインデータで画像を表示することができます。 ２．data URI Schemeとは RFCの規定上、http、https、ftpなどは「URI Scheme（スキーム）」と呼ばれます。 data URI Schemeは、「http」にあたる部分が「data」であるURI Schemeのことを指し、RFC2397で規定されています。 ３．data URI Schemeの構文とサンプル data URI Schemeの
25 CSS Snippets for Some of the Most Common and Frustrating Tasks In this post we have 25 CSS snippets and hacks that will solve many of the most frequently used and, at times, frustrating CSS development tasks. Why reinvent the wheel when there are already plenty of time-saving pre-written CSS code snippets? As well as some classic and timeless CSS hacks you will also find many CSS3 snippets, lik
Quick Sprites CSS sprite sheet editor for macOS An important tool for every web designer Quick Sprites simplifies the creation and maintenance of CSS sprite sheets that enable you to optimize your websites. Improve your visitors’ experience A sprite sheet is a single image that combines many smaller ones. CSS sprites help reduce the number of HTTP requests that the browser needs to do in order to
spriteTimer is a jQuery countdown/countup timer plugin that uses a CSS sprite for the numeric digits and punctuation. The examples below are done using Rosewood font at 72pt so you'll most likely want to change this to the font, color, and size of your choice. Please refer to the demo pack for more examples including the sample numbers.png so that you know how to slice your own image sprite. Chang
CSSスプライトとは？ | CSS Radar
CSSスプライトとは？ CSSスプライトという言葉を聞いたことがあるだろうか？ ナビゲーションなどで画像を利用した際にマウスオーバーで画像を切り替えるという効果を加えるのによく利用される手法だ。 その昔はJavaScriptを利用していたが、CSSのbackground-position属性の位置情報を変更することで、CSSで置き換えることが一般的になった。 CSSスプライトが紹介される以前は、通常時とマウスオーバー時の画像を対にしてスライスする手法が主だったが、 CSSスプライトではさらに一歩進め、ナビゲーション全体で利用する通常時、マウスオーバー時の画像を1枚の画像にしてしまい、やはりCSSにより必要な画像を表示させる。 なぜCSSスプライト？ CSSスプライトはなぜこれまでの手法よりも優れているのだろうか？ 大きな1枚画像はページのロード時間を、複数に分けるより遅くしないだろ
ご存知の通りスマホのHTML5 Auidoは現状酷い状態です。 全プラットフォーム共通で再生できるフォーマットが無かったり、iPhoneは独自仕様で自動再生はできず、ユーザー操作由来のアクションからしか再生できなかったり、複数音が再生できなかったり、Androidは2.2までは全然動かなかったり。 対応策として知られているのがCSS SpriteならぬAudio Sprite。複数の音楽ファイルをつなげて一つのファイルにし、シーク位置を制御することで好きな音を鳴らしたりループしたりする姑息なテクです。 そんな面倒なことやってられるかと思ってたんですが、そろそろAudio Sprite用のツールも揃って来ました。 jukebox zynga/jukebox ひとつはAudio Sprite用の再生ライブラリjukebox。Zyngaが作ってるのでちょっとマジっぽいです。 var settin
Ed Eliot氏およびStuart Colville氏は13日(米国時間)、新バージョン発表時に宣言していたとおり、CSS Sprite Generator 2のソースコードを公開した。CSS Sprite Generator 2は6月23日(米国時間)に公開されたCSS Sprite Generatorの最新版。バグが修正されているほか画像処理に使われるツールがGDからImageMagicへ変更され画像処理のクオリティが向上している。 CSS Sprite Generator 2はPHPで開発されたWebアプリケーション。例外条項付きのThe BSD License (3条項版)で公開されている。画像やCSSなど「Website Performance」ブランドやWebサイトに関連した素材の著作権は両氏にあり許可なくして使ってはならないこと、ほぼ変更を加えることなく一般からアクセスでき
jQueryプラグイン検索：skuare.net
検索ワード： JSONファイルから画像スライダーを作成するjQueryプラグイン「jsonslider」 スライダーJavaScript「Swiper」で簡単スマホ対応！軽量／レスポンシブ／スワイ 背景に線を引いて印象的なサイトに！jQueryプラグイン「Lines.js」 画像を簡単にInstagram風に加工！jQueryプラグイン「simpleFilter.js」 画像を印象的なドット絵にしてくれるjQueryプラグイン「Breathing Halftone」 ちょっとしたアニメーション効果で印象をぐっと良くするためのjQueryプラグイン「animo.js」 国際電話番号を判別するjQueryプラグイン「jquery.mobilePhoneNumber」 多機能／スマホ／動画対応のギャラリーJavaScript！jQueryプラグイン「lightGallery」 テキスト表示を印象
作業効率がアップする隠れた使い方教えます！ WEB制作、プロの無料サービス活用術 ──コーディングに使えるツール（2） [technique 07] CSS Spriteを手軽に作成する 文＝東 孝之（（株）ゼネラル・プレス） Tool CSS Sprite Generator URL http://ja.spritegen.website-performance.org/ CSS Spriteは、読み込みのリクエスト数を減らすことができるので、ページ最適化に有効な手段だが、実装するのに手間がかかる。そんなときは「CSS Sprite Generator」を使うといい。「CSS Sprite Generator」は、複数の画像を一枚の画像にし、CSSで表示位置を変更するスタイルシートをオンラインで生成するジェネレータである。これを使えば、複数の画像をひとまとめにして連結画像とCSSを作成し
未だに9月くらいの気がしているhakoishiです。 おかしい...街がクリスマスとか、正月とか、なんか浮き足立った事言ってる。 さて、今回はSassでスプライト対応する時にCompassを使わないサンプルをご紹介。 Compassのスプライト、すっごく便利なんですよね。 けれど、実案件では使えない場合もあるのではないでしょうか。 画像名を決まったものにしたい、とか。 画像の並びをソースと同じ順にしたい、とか。 納品後、お客さまが更新していく案件では少なくなさそうです。 そんなときの為に、@forを使う方法をば。 サンプル サンプル 恐ろしくざっくりしたサンプルですが...。hoverでの画像切り替え有りです。 使っている画像がこちら。 上に8pxの余白を設けています。理由は後ほど。 HTML 画像置換の為、li>a>spanの入れ子にしています。 <ul class="sprite-li
Velocity 2009 Day 3 | Carpe Diem
Velocity 最終日でした。 オープニングキーノートのあと、Google の Mayer 氏による「In Search of… A better, faster, stronger Web」というタイトルで Google で行ったさまざまな施策について紹介。資料は、こちら。 デフォルトの検索結果の表示件数が 10 件になっていることをあげて、30 件すると 0.9 秒かかってしまうのに対して 10 件の場合 0.4 秒で済む Google Reader の高速化について紹介、高速化したことでアクティブユーザが増えた Google の検索結果に表示される Google Checkout のアイコン表示の高速化について紹介、アイコンは画像ではなく table タグで実現している(日本からアイコンが表示されない)、その結果 2% 表示スピードが向上した Google News の高速化につ
CSS is the second-most-important thing you can master when it comes to web design, right after HTML. And the capabilities of CSS can be staggering (especially with the new CSS3 standard already making appearances in some browsers). If you can imagine it, it's likely someone has already figured out how to do it with CSS. Below are more than 250 resources for mastering CSS. While they're not likely
コーディングしにくいデザインをHTMLとCSSのみで組んでみた(後編) 2011-01-06 タイトル通り、"コーディングしにくいデザインをHTMLとCSSのみで組んでみた(前編)" の後編です。 今回はクロスブラウザ(IE、FireFox、Webkit系とか)に対応させるために、ちょっとだけテクニック的な事も使っていきます。 最後に完成したページをzipで公開しています。 ダウンロードして煮るなり、焼くなりしてくれると良いよ！ おさらい 前回、下記のデザインを組んでいくことにしました。 そして前回はここまでコーディングが終わりました。 今回はコンテンツとクロスブラウザに対応させます。 コンテンツのメイン画像部分を何とかする。 これを何とかしていきます。 ポイントは"シャドウ"と"文字部分の不透明"。 HTML <div> <img src="img/woman.jpg" width="6
リンクの貼り方と、画像の貼り方を応用してリンクを画像にしてみましょう！マウスを乗せると画像が変わるやり方も紹介しますね！ 画像でリンクさせるタグ画像でリンクするのはこのタグでできます。 <a href="リンク先URL"><img src="画像のURL" alt="画像の説明" width="画像の横幅" height="画像の高さ" /></a>リンクを貼るタグの「リンクさせる文字」の所を画像を貼るタグに置き換えてあげれば画像でリンクできるようになります！ １枚の画像を使ってCSSで画像を切り替える方法よくボタンなんかにマウスを乗せると画像が切り替わるサイトありますよね！このやり方の説明をしますね！ サンプルサンプルボタン リンクはページトップに飛びます。 まずは画像を用意しようマウスを乗せる前と乗せた時の画像をそれぞれ作ります。２枚の画像は同じ高さ、幅でつくってくださいね！ それから
MdN Design｜総合情報サイト
作業効率がアップする隠れた使い方教えます！ WEB制作、プロの無料サービス活用術 ──コーディングに使えるツール（2） [technique 10] CSS、JavaScriptを簡単に圧縮する 文＝山田岳史（ROSTRATA） Tool Online YUI Compressor URL http://refresh-sf.com/yui/ こちらはJavaScriptやCSSファイルをオンラインで瞬時に圧縮してくれるツールだ。具体的には改行やコメントの削除、また変数名を最小限の文字に置換するといった処理が行われる。これらに加えて難読化もするかどうか、不要なセミコロンを削除するかどうかなどのオプションが選択できる。アクセス数の多いサイトでは、JavaScript、CSSのわずかなサイズのテキストファイルでもトータルのトラフィック量では大きな差となるため、できるだけ圧縮しておきたい。 対象
The Electric Sheep Company (Producing Second Life)
先进行业生产技术不了解缺技术人才？ 管理、技术生产方式落后，不符合行业新标准？ 环保生产要求不达标，环保限期整改？ 挥发油提纯不够，无法完整分离浪费宝贵资源？ 场地限制，找设计院设计费用昂贵？ 选择天浩药机，10余名行业资深生产管理经验！
作業効率がアップする隠れた使い方教えます！ WEB制作、プロの無料サービス活用術 ──コーディングに使えるツール（2） [technique 13] JavaScriptを難読化しファイル容量を抑える 文＝榊原美穂（think-L） Tool packer URL http://dean.edwards.name/packer/ 最近ではJavaScriptが使われているWebサイトも増え、JSファイルがいくつも読み込まれる場合も多い。ブラウザへの負担を少しでも減らすためにJavaScriptコードを難読化してファイル容量を抑えたい、そんなときに便利なのが「packer」だ。難読化の処理をしたいJavaScriptコードをペーストして「Pack」ボタンを押すだけでJavaScriptコードが難読化される。数百行レベルのJavaScriptコード、たとえばjQueryのファイルは、難読化する
When designing a product page, it is often necessary to present a number of images in a succession, also known as a slideshow. With the raise of the jQuery library and its numerous plugins, there is an abundance of ready-made solutions which address this problem. However, to make a lasting impression to your visitors, you need to present them with something they have not seen before. Today we are
【WordPress高速化日記】アイコン画像の表示をdata URI schemeで高速化 – 旧・中川勉社会保険労務士事務所FPウェブシュフ
サイトを制作していると、ソーシャルボタンをはじめ結構な数のアイコン画像を使いますよね。でも、アイコンの種類が増えてくると、画像ファイルの呼び出し回数が増えてページの表示が遅くなります。これを改善する方法の一つがdata URI schemeです。 画像が多いとなぜ遅くなるのか ウェブページは、そのページを閲覧している端末からHTTPリクエストを受けたサーバーが、要求されたデータをHTTPレスポンスとして各端末に返すことで表示されています。 画像の枚数と同じ回数のHTTPリクエストが必要になります。 そのうえ画像が増えるとサーバーから受け取るデータ量も増加します。 つまり画像が増えるとページの表示速度がダウンするのです。 ページを軽くするには ページを軽くする対策は以下の二点から考えなければいけません。 サーバーから呼び出す画像の枚数を減らし、HTTPリクエストの数を減らす。 サーバーから呼
Sass/Compassを「触って覚える」を目的とした講習会スライド。 実習で使用するファイルは以下からダウンロード頂けます。 http://webnaut.jp/download/markup_140204/sass.zip 目次： 1. Sassとは／機能紹介 2. Sassを触ってみよう 3. Sass開発環境の設定 4. [Work1]ネストとインポート※ 5. Compassとは／機能紹介 6. Compassの設定 7. [Work2]Compassを使ったCSS Sprite実践※ 8. [Work3]納品時の作業※ 9. 書籍、参考サイト紹介 10. [Work4]追加課題※ =========================== 紹介記事 http://webnaut.jp/markup/663.html ===========================Read l
Webサイトの高速化・軽量化に使えるTips・参考記事を集めてみました - Feel Like A Fallinstar
Googleもスマートフォンに参入、ノートPCが完全に主流になるなど、ブロードバンドから逆に回線の「低速化」が起こっています。 参考： 今だからこそ、「軽量なウェブサイト」を作ることが重要、というお話 また、GoogleはWebの表示速度をPageRankに加味することを検討中であることを明言しています。 ただ、そうは言ったものの、ちゃんと実装しないと話しにならない訳で・・（大汗 細かいことでもちゃんと積み重ねて行かねばと。 というわけで、軽快なサイトを実装するためのTipsを自分のサイトで使ったのを備忘録的にここにも書いておきたいと思います。 まずはまとめ記事から 原則を押さえてから、細かいところに行った方が効率がよいかな、と思います。 30分でできる！Webサイトを高速化する6大原則 最適化を行うための観点が簡潔にまとまっていて、高速化チェック項目として有効です。 具体的な方法もいくつ
前も触れたが、「text-indenx:-9999px;」でテキストを画像に置き換えることについて少し考えてみる。 最近、少し詳しいクライアントから「text-indent:-9999px;を使うとSEOに良くないって聞いたから、使わないでね」といったことを言われた。 SEOに良くないとは誰も断言していないのだが、「いやあんまり関係ないですよ」なんて言ったところで聞き分けてくれるわけはない。 クライアントからすれば少しの可能性でも潰したいのは当然。 ということで代替案として行ったのはGoogle方式。 Google方式とはGoogleが自サイトで使ってる方法で、テキストとともに画像を置く(背景などではなくソース上にimgタグで書く)というもの。 たとえば<a>タグ内のテキストを画像として表示させたい場合、 <a href=”hoge”>テキスト<img src=”fuga.gif
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers Jennifer Farley氏がSitePointにおいてGIF, PNG, JPG. Which One To Use?のタイトルのもと、Webサイトを作成するにあたってどの画像フォーマットを採用すべきかという指針を簡単にまとめている。まず氏はそれぞれの画像フォーマットの特徴を簡単に説明。 GIF - 256色のインデックス画像。写真には向かないが、ロゴであったりフラットブロックな画像には向いている。透過データを保持できるという特徴がある JPEG - クオリティによって圧縮率が変わる非可逆圧縮の画像フォーマット。透過は表現できないが、写真データの用途に向いている PNG - GIFに似ているが、GIFのようなぎざぎざを出さずに背景透過を実現
APPLE のサイトのナビゲーションバーの仕組み（CSS でロールオーバー） - minorio のプログラミング・メモ
CSS だけで（JavaScript を使わずに）ロールオーバーさせる方法を学んだ。やり方はいくつかあるけど、もっともスマートな方法はやっぱりアップルが採用している方法かな。CSS を無効にしたときの画面も美しい。結局そういうコーディングが SEO 的にも最適だし。 文字は padding-top と overflow: hidden で見えないようにしているようだ。その上で hover したときに背景画像のポジションをスライドさせている。 #globalheader #globalnav li a { float: left; width: 117px; height: 0pt; padding-top: 38px; overflow-x: hidden; overflow-y: hidden; } #globalheader #globalnav li a, #globalheader
Hybrid CSS Dropdowns
I know what you’re thinking…“Do we really need another article about CSS dropdowns?” Allow me to convince you. What if we could have one clean, well-structured menu which would combine the dynamism and code-ease of dropdown menus and do away with their main problems (not to mention degrade beautifully)? The problems with dropdown menus are: their secondary options are inaccesible unless you activa
メガドロップダウンメニューをjQueryとCSSで作る：via Mega Drop Down Menus w/ CSS & jQuery
twitter facebook hatena google pocket サイトが巨大化するにつれ、多くの情報を一度に見せられる方法が運営者に求められています。 それを解決する一つの手段がメガドロップダウンメニューです。 一見、ユーザビリティ上好ましく見えないかもしれませんが、ユーザビリティの第一人者「Jakob Nielsen」はAlertbox: メガドロップダウン式のナビゲーションメニューは効果あり（2009年03月23日）と述べています。 今回はjQueryを利用して、メガドロップダウンメニューを作成してみたいと思います。 via：Mega Drop Down Menus w/ CSS & jQuery sponsors 使用方法 ※長いので、先にサンプルを見る まず以下のようなメニューが記述されているとします。 <ul id="topnav"> <li><a href="#"
とりあえず、ざざざっとリニューアルしたものの、いかんせん重い。 画像数が増えたのと、色んなものを最適化してないからだけど、 サーバーのレスポンスがとても遅い。 もちろんサーバーはワーキングプアの味方、 Coreserver です。 でもわたくし、coreserverに文句言わない。だって安いもん。 というわけで本日のテーマは「ないものねだり」から「あるもの探し」へ。 ウェブの高速化は地元学と一緒だぜ！ じゃん。何はなくともまずは地元を知るために、試しに Pingdom website speed test を使ってスピードテストをしたら、 表示まで９秒、ページサイズは850kBくらいかかった。 こりゃ遅い。わたくしの地元ってば遅いったらありゃしない。 というわけで、いまはやりの（←言い方が古い）高速化を調べて さくっと導入改善自分メモ。 キャッシュプラグイン４連発！ ・Quick Cach
コーディングで押さえておきたいポイント 1.構造と見た目を分離する HTMLは文書構造。CSSはスタイリング。 と役割を分担させたコーディングをする。 brタグを連続で打ってスペースを空ける 行頭を1字分空ける、または揃えるために空白文字を使う 文章構成上必要ない、背景に配置するような画像やアイコンをimgタグで設置する。 カラムの端から端まで見出しになっているデザインにおいて、スタイリングし難いという理由でsectionタグ（または共通で囲ってるdivタグなど）から外側に見出しを出してしまう 上記の例は全てHTML側で見た目をコントロールしています。 このような使い方は極力避けましょう。 またCSSは、後述する保守性等を考慮して直接インラインやstyleタグで書くのは避け、外部ファイルにまとめます。 2.Validなソースを書く W3Cの仕様に基づいた正当なコードを書くように心掛けましょ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webブラウザ上でCSS Sprite画像を作成·InstantSprite MOONGIFT
How to Make a CSS Sprite Powered Menu « Build Internet
CSS Sprites Revisited — Smashing Magazine
ソフト一覧 - ペンギンの杜 〜 Linux ソフト集 〜
「一歩先行く！ ツール活用で制作効率アップ in TOKYO」にいってきました。
Transition Effect with CSS Masks | Codrops
An Overview of SVG Sprite Creation Techniques
RsStudio Style - [Fireworks CS5] スライス書き出し設定が変わった
data URI Schemeを使ってHTTPリクエストを削減する
25 CSS Snippets for Some of the Most Frustrating Tasks
Quick Sprites - CSS sprite sheet editor for macOS
Davor Spasovski / Web Developer
そろそろ実践投入もありうる？Audio Sprite - komagataのブログ
ソースコード公開 CSS Sprite Generator 2 | エンタープライズ | マイコミジャーナル
CSS Spriteを手軽に作成する - MdN Design Interactive
【Sass】あえて、Compassに頼らずスプライト。 | バシャログ。
250+ Resources to Help You Become a CSS Expert
コーディングしにくいデザインをHTMLとCSSのみで組んでみた(後編)
『マウスオーバーで画像を切り替えるCSSを書いてみよう』
JavaScriptを難読化しファイル容量を抑える - MdN Design Interactive
Making a Mosaic Slideshow With jQuery & CSS
Sass/Compass講習会
“text-indent:-9999px;”を使わない、安全（？）な方法 | Otaxa
JPEG、GIF、PNG画像選択の指針まとめ | エンタープライズ | マイコミジャーナル
リニューアルにて導入した、Coreserverでがんばる WordPress高速化Tips ８選！ - ヨホホ研究所
HTML,CSSコーディングで気をつけたい基本的なポイント - Qiita