WEBサイトを軽量高速化。便利な圧縮系サービスまとめ【 JEPG,PNG,HTML,CSS,JS 】（WPプラグイン含む） | Stronghold Archive
WEBサイトを軽量高速化。便利な圧縮系サービスまとめ【 JEPG,PNG,HTML,CSS,JS 】（WPプラグイン含む） どうもこんにちは。利倉です。今回のTipsは【WEBサイトを軽量高速化。便利な圧縮系サービスまとめ】です。webページの軽量高速化にはいつも頭を悩まされます。今回は軽量高速化においてすぐに効果を見込める方法のまとめになります。 Online YUI Compressor CSS及びJSを圧縮します。gzipにもしてくれる便利サービス。特定ファイルだけ包んで…という手軽な使い方もできます。ためしに100KBのJSを圧縮してみたら20KBに！？なんて事も… Minify Javascript Online JSを圧縮します。実はOnline YUI Compressorで事足りるのですが、サイトが軽いのでこっちに行く事もあります。 Minifier JS及びCSSを圧縮し
【クリスマスだし】Internet Explorerとうまく付き合う方法【IE対応まとめ】【25日目の6】 | DevelopersIO
IE6はﾀﾋぬDeath! こんばんは、クラスメソッドWebマスターの野中です。 今日はクリスマスですね、社内には独り身の負のオーラが満ちてます（既婚者が多いので残っている人は少ない）。 ところで、最近はCSS3もすこしずつ使えるようになってきていて、IE6からIE8の対応を蔑ろにしてしまっている自分がいます。 Web制作に携わってから6年、常に付きまとう古いIEは腐れ縁というか、ある意味青春ですね。 とっても今さら感たっぷりなお題目ですが、ここでIE対応のポイントを自分のために総浚いして青春に決着をつけたいと思います。 過去の経験と情報収集をもとにまとめているので実際にテストしたものではありません。 解決のきっかけ程度になれば良いと思いまとめています。 IEの現状 一般的なブラウザと先進的なブラウザに対する手法と考え方 ドキュメントタイプ：文書型定義 IE向け条件付きコメントで分岐処理
実験室: ボックスサイズの解釈はIE6の方がわかりやすいと思う - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） IE6がボーダー/パディングを含んだ値としてwidthを解釈するのに対し、 他の多くのブラウザはそれらをwidthに足した値で描画します。 この問題はCSSを書く人なら誰しも一度はぶちあたる壁ですね。 多くのバグで我々を悩ませるIE6さんではありますが、 この一点についてはIE6の解釈の方がコーディング上効率が良いと思います。 デザインからコーディングする際は 画像エディタ上のサイズそのままを記載すれば良いですし、 レイアウト中にカラム幅を指定する場合にも わざわざpaddingやborder-widthを足したり引いたりするのは非効率です。 では、どうするか。 box-sizingを活用する その為に用意されたCSSプロパティがbox-sizingです。 CSS3 Basic User Interface Module ボック
iPhone 5とiOS 6で導入されたWebデベロップまわりのアップデートについて - Branch
Clicking the “Branch this” button next to a post lets you start your own branch to talk about it. Branching a post is perfect for when you have something to say about someone’s post or want to go on a tangent—without taking the whole conversation off track. Join our beta so you can branch posts, too.
ブラウザごとの差異をなくす！人気のリセットCSSまとめ | モンキーレンチ
paulund.co.uk でCSSリセットについての記事「Collection Of CSS Resets」が公開されていたので紹介します。 Eric Meyer’s “Reset CSS” 2.0 Eric Mayer氏が考案したリセットCSS。プロジェクトに合わせて編集、調整することが推奨されています。 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
Viewport [iPhone生活]
*device-widthはiPhone横持ちの場合でも必ず320px、device-heightはiPhone縦持ちの場合でも必ず480pxとなります 例えば以下は、Viewportの横幅がiPhoneのディスプレイのサイズで、倍率は1、2倍まで拡大可能、という内容です。 描写のプロセスを検証するに当たっての条件 以下の説明では複雑な状況を説明する場合もあるため、特定の語句を特定の意味でのみ使用しています。特定の語句は以下です。 viewport Viewportのメタタグで指定した値または後にSafariが計算した値。initial-scale/width/heightの3つ。 コンテンツ（サイズ） HTMLに設置したコンテンツのサイズ ドキュメント（サイズ） 余白を含めたHTML全体のサイズ。ウィンドウよりも大きい場合は、スクロールすることで見ることが出来る全体のサイズ。 ウィンドウ
Basic Ready-to-Use CSS Styles
.drop-shadow.top { box-shadow: 0 -4px 2px -2px rgba(0,0,0,0.4); } .drop-shadow.right { box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4); } .drop-shadow.bottom { box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4); } .drop-shadow.left { box-shadow: -4px 0 2px -2px rgba(0,0,0,0.4); }
ブラウザの表示サイズに合わせてフォントサイズを自動で変更する方法 jquery : 4GALAXYのメモ
77 18 12 2008 ブラウザの表示サイズに合わせてフォントサイズを自動で変更する方法 jquery jQuery, Ajax 可変するボックスやブログの記事部分なんかにいいかもしれません。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.2.6");</script> <script type="text/javascript"> function AutoFsize(){ var wpx = $("div#content").width(); var fpar = (Math.floor((wpx)/(400/100
IE6以下をIE7と同じようにするライブラリ『IE7.js』
IE6以下をIE7と同じようにするライブラリ『IE7.js』 Check Tweet 配布元:Google コード(ie7-js) ライセンス:MIT License IE7.jsはIE6をIE7に近づけるJavaScriptライブラリになります。 IE7には実装されているがIE6以下には実装されていない様々な機能をIE6以下で利用することが可能になります。 設置方法 Google コードより直接読み込むことが可能です。 以下をhead要素内などで記述します。 <!--[if lt IE 7]> <script src="http://ie7-js.googlecode.com/svn/version/xx.x/IE7.js" type="text/javascript"></script> < ![endif]--> xx.xはバージョン情報(現在のバージョンは『2.0(beta3)』)
[CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック
テキストで実装した見出しなどを画像に置換するテクニックで「-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
[CSS]フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック
フォントのサイズの単位に何を使ってますか？ px？ em？ それら2つのよく利用されるテクニックをおさらいし、さらに第3のテクニックも紹介します。 Font sizing with rem [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに pxを使ったサイズ指定 emを使ったサイズ指定 remを使ったサイズ指定 はじめに フォントのサイズの単位に何を使用するかは、未だに激しい議論の的となっています。それらのテクニックにはそれぞれ長所と短所があるのも現実です。 それらの中で短所が少なく、よく利用されるテクニックは2つあります。 pxを使ったサイズ指定 emを使ったサイズ指定 これら2つのテクニックを再検討し、さらにもう3つ目のテクニックを紹介します。 pxを使ったサイズ指定 ウェブの初期に、私たちはテキストのサイズを定めるために「px」を使用していました。これは一貫しており
cssで縦方向中央に配置する方法（5つのケース＋1） | バシャログ。
iPhone 4Sが発売間近。 買おうか迷って一旦諦めたはずがまた迷い始めました、hakoishiです。 Siriに甘い言葉をささやきたい。英語できないけど。 さて、コーディングで縦中央にオブジェクトを配置したいことって少なくないですよね。 しかしながら、cssはそういうのちょっと苦手。 「ほら、あの時使ったアレだよアレ！」と過去のソースを掘り起こしてみても、状況が違ってて使えないケースも多かったり。 というわけで今回は、cssで縦中央配置するためのtipsを5つのパターンに分けてまとめました。 case1：画像の場合 上下方向中央を始点として画像を配置し、画像の縦サイズの1/2だけネガティブマージンで上に移動。 サンプル html <p class="case01"> <img src="http://dummyimage.com/100x100/000/fff.gif&text=img
[CSS]IEを含めた主要ブラウザと各スマートフォンに対応した@font-faceの指定方法
IE6, 7, 8, 9をはじめとする主要ブラウザ、iOS, Androidのスマートフォンに対応させるための@font-faceの指定方法を紹介します。 The New Bulletproof @Font-Face Syntax [ad#ad-2] 各ブラウザ・スマートフォンに対応させる@font-faceの指定方法 各主要ブラウザ、スマートフォンに対応させる@font-faceの記述は、下記のようになります。 @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?') format('eot'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-w
CSS3 「gradient」と「@font-face」
CSS3 「gradient」と 「ウェブフォント（@font-face）」 このページは背景画像を一切使用していません。 背景のストライプ模様はCSS3のbackground-image:gradient、フォントはCSS3の@font-faceでサーバー上に置いたフォントを読み込んで表示しています。これによって、閲覧者のパソコンにインストールされていないフォントも表示する事が出来ます。また、画像文字ではないのでコピーする事も可能。 SEOの一環としても有効です。 2010年1月現在、InternetExplorerとOperaではまだgradientに対応していない為、これらのブラウザでは背景は単色になります。フォントファイルはうっかり領収書５部ダメにできる筆圧を誇るふいさんの作った「まきばフォント」をお借りしています。 フォントの為のスタイル指定 @font-face { font
正しいリッキドレイアウトCSSはこうだと思いますがッ | hijiriworld Web
リキッドレイアウトとは、ウィンドウサイズに合わせてコンテンツ領域が可変になるレイアウトのことです。 はるか昔、PCオンリーの時代から、Webデザインをするにあたって、基準となるウィンドウサイズについては様々な議論がありました。800×600とか、1024×768とか。 しかし、いまやスマホやタブレットなど、様々なウィンドウサイズが存在する時代。もはや基準となるウィンドウサイズを決めること自体が無意味であり、あらゆるウィンドウサイズに対応することが求められています。 よって、リキッドレイアウトについての知識は必須であり、リキッドレイアウトこそが基本。 ところがッ！ “リキッドレイアウト”でググると、おかしなリキッドレイアウトばかりではありませんかッッ！！ 「そのリキッドレイアウトでいいの？正しいリッキドレイアウトCSSはこうでしょ？」ということで。 おかしなリキッドレイアウト 両脇に固定幅カ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Create Your Own @font-face Kits » Font Squirrel