CSS内の画像埋込で高速化(Data URI) - Qiita
スタイルシートの中で画像を多数呼出していると、HTTPリクエストが大量発生してページの読み込みが遅くなります。このような場合、CSS Spriteを使って回避することが一般的ですが、Data URIを使うと運用はもっと簡単です。 CSSファイルへの埋込 例えばOSSCafeの場合、サイトのCSS内で16ほどの画像ファイルを読込んでいます。 body { background-image:url(images/body.png) } body>header { background-image: url(images/header.png) } body>header div.center>h1 { background-image:url(images/logo.png) } ...(略) body { background-image:url(data:image/png;base64,
レスポンシブ・ウェブデザイン基礎
1. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・ レスポンシブ・ウ ブデザイ ェ ン基礎 Responsive Web Design Basic こもりまさあき 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki 2. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・ 自己紹介 こもりまさあき http://blog.gaspanik.com http://protean.im 1990年代前半に都内のDTP系デザイン会社にてアルバイトをはじめる。大学卒業後 そのまま正社員となり、入出力業務、デザイン業務、ネットワーク関連業務に並行し て従事。2001年、会社を退職しそのままフリーランスの道へ。案件ごとに業務内容 や立ち位置が異なるため、職域的な肩書きは
最低限覚えておきたいWEB配色の基本２大原理と６つの配色パターン
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. WEBサイトのデザインは、誰もが頭を悩ませる部分だ。 「どういう配色なら良い印象を持ってもらうことができるのか？」「どのレイアウトならコンバージョンが上がるのか？」など、様々なところまで考えを張り巡らさなければいけないからだ。 そこで本日は、The Art of Color Coordination というインフォグラフィックをご紹介する。これを見れば、WEB配色の基本の２大原理と、今すぐに使える６つの配色パターンがすぐに分かる。 そして、初心者でも、統一感のある配色のWEBサイトを作るための大きな助けとなるはずだ。 また、私たちバズ部は12年で400社以上のメディア支援を行い、 立ち上げから10ヶ月で14.6億円の売上を産んだ不動産メデ
無料で使えるレスポンシブのWordPressブログテンプレート１０選 | バズ部
WordPressブログのテンプレートは、とても高性能なものが多く、色々なところで様々なものが紹介されている。しかし余りにも多過ぎて、どれを選べば良いのか分からなくなってしまう方もいるのではないだろうか？ そこで本日は、ソーシャルメディアマーケティングを実践する上で最適なブログデザインという部分に焦点を当てて、オススメのWordPressブログテンプレートを１０個ご紹介する。 これらのテンプレートの選択基準は、以下の３つだ。 シンプルな２コラムであること メインコンテンツが左、サイドバーが右にあること レスポンシブデザインであること なぜ、この３つの点が重要なのかという理由は、「月１５万PVを生むブログをデザインした時に徹底した７つの要素」で確認して欲しい。 １．Respo デモを確認 ｜ ダウンロードページ シンプルで落ち着いたデザインでありながら、ヘッダー直下のスライダー画像が目を惹く
絶対に覚えておきたいwebデザインの配色・カラー3つの基本と基礎
webデザインを考える時にカラーは切っても切りはなせません。しかし、配色は苦手だけど、まぁカラーの勉強は後でいいや…センス無いしその前にやることあるし…となんとなく後回しにされがちなんじゃないかなーと思います。基本を知っておくと、デザインに役立つのはもちろん、クライアントさんに提案出来たり、私生活や料理etc…様々な場面でとっても強い味方になってくれるます。ちょっとしたスキルアップをしたいと考えてるなら、まずは配色から初めてみるのが良いかもしれませんXD 色って？ カラーモードRGBとCMYKとは？ 色の三属性について 「色相」 「明度」 「彩度」 具体的な例と配色方法 面積比率 可読性 最後に 1.色って？ まず一口に色といっても色々(シャレじゃないですw)あるのですが大きく分けて果物や印刷物など物についてる色とテレビやパソコンのモニターなど光を放っている色の2種類があります。 物体色
CSSリセットとは異なる、Normalize.cssの特徴や使い方などの解説 -About normalize.css
Normalize.cssって何？ CSSリセットとは違うの？ どうやって使うの？ といった疑問を解決するNormalize.cssの制作者自らの解説を紹介します。 About normalize.css [ad#ad-2] 下記は各ポイントを意訳したものです。 Normalize.cssとは Normalize.cssの特徴 ノーマライズ vs リセット Normalize.cssの使い方 終わりに Normalize.cssとは Normalize.cssとは、クロスブラウザにHTMLのエレメントのデフォルトのスタイルを提供する小さなCSSファイルです。HTML5にも対応しており、従来のCSSリセットに代わるものです。 normalize.cssの関連サイト Normalize.cssの本サイト Normalize.cssのソース Normalize.cssのドキュメント Normal
美しい横メニューの作り方
<ul id="menu"> <li><a href="#">html</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Perl</a></li> </ul> HTMLは最後まで変更しません。 #menu { width:530px; padding:0; margin:0; list-style-type: none; } #menu li { width:20%; float:left; padding:0; margin:0; text-align:center; } #menu li a { width:auto; color:#fff; font-size:12px; font-weight:
[CSS]ナビゲーションやリストなど、inline-block要素の間にできる隙間を解決する方法
ナビゲーションを実装する時など、ul要素を使って水平に並べると意図しない隙間ができてしまうのを解決する方法を紹介します。 Fighting the Space Between Inline Block Elements [ad#ad-2] デモ 解決方法 floatでいいんじゃないの デモ まずは、元となるコードから。 HTML nav要素を使い、a要素で各アイテムを実装します。 <nav> <a href="#">One</a> <a href="#">Two</a> <a href="#">Three</a> </nav> CSS 「display: inline-block;」を使って水平に並べます。 nav a { display: inline-block; padding: 5px; background: red; } このままだと、下記のように意図しない隙間ができてしまいま
jQueryUIのDialogをカスタマイズする6つの物凄く細かい小技 - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） jQueryUIのdialogは結構お世話になっているのですが、たまに欲しい機能がなかったり、あっても説明されてなかったりするのでここにDialogカスタマイズTipsをしたためておきます。 この記事の内容は既に古くなっています。現在最新バージョンのjQueryUIでは挙動が改善されていたり、渡せるオプションが変わっていたりします。 Modalしたダイアログをオーバーレイクリックで閉じる 任意の要素をクリックして閉じる アニメーションで閉じる・開く エフェクト中にオーバーレイの後ろに回りこんでしまうのを回避する 閉じる・開くアニメーションにパラメータを渡す 閉じるついでにデストロイする 1. Modalしたダイアログをオーバーレイクリックで閉じる escキー押下で閉じるオプションはあるのですが、このオプションはない様子。 そこで
HTML5/CSS3にも対応、HTML/CSS/JavaScriptを整形・チェックするオンラインツール -Dirty Markup
Dirty Markup [ad#ad-2] Dirty Markupはウェブ制作者がよく使う下記のツールをまとめたような感じです。 HTML Tidy CSS Tidy JS Beautify Dirty Markupの使い方は簡単で、右側にコードをペーストし、左側でHTML/CSS/JavaScriptを設定し「Clean」ボタンをクリックするだけです。
15 Useful Code Snippets for Smartphone Website
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！ スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック（タップ）範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
CSSや画像の命名規則について - kojika17
コーディングで時間のかかる要素の1つとして、id,class名や画像名などの命名規則が挙げられます。 特に中規模、大規模のサイトで、適当な名前を付けると名前が被る確率が上がり、 その結果、画像の上書きや不要なプロパティがかかってしまうなど、よくない結果になることも考えられます。 一つの例として、私の命名規則について紹介してます。参考程度に読んで頂けると幸いです。 カテゴリに分類して、つなげる。 ページのどの位置に属すか分類し、つなげる方法を取っています。 基本的に、CSSや画像名は同じにします。同名にすることで、名前を考える手間も省け、変更箇所の特定がしやすくなります。 例： CSS #top-side-nav 画像 top-side-nav-home.png top-side-nav-company.png 上記のように命名することで、 デザインを見なくても、どのような箇所に使われている
WordPressのトップページを雑誌や新聞のような段組にする方法
WordPressのブログは一般的に記事タイトルと記事の概要が単純に縦に並ぶだけですが、jQuery Masonry という jQuery プラグインを使用すると、このブログのトップページのように雑誌や新聞のような段組で記事一覧を並べることができます。 jQuery Masonry は WordPress 用に作られたわけではありませんが、WordPress テーマに組み込んでトップページ等で使用することができます。 ただ、公式のドキュメント通りに JavaScript を書いただけでは WordPress テーマではうまく動かないので、やり方をここにまとめておきます。 ここでは、WordPress 3.3 のデフォルトテーマ「TwentyEleven」をベースに解説します。 準備 まず jQuery Masonry 公式サイト のページ中央にある「Download the script
俺の CSS リセット: 2011 冬
年末だからというわけでもないのですが、いつものサイト作りに使う CSS リセットについて見直してみました。今までもちょっとずつ手を入れてはいたのですが、今回はかなり大きく修正しています。というのも、Nicolas Gallagher と Jonathan Neal の両氏による normalize.css を知り、大きく影響を受けたからです。 Normalize.css は「新手の CSS リセット」ではありません。CSS を「リセット」するのではなく「ノーマライズ」する、という新しい考え方です。CSS リセットとノーマライズはどちらも、ブラウザ間で CSS の実装に差異があることを前提にそれらを吸収しようとする、という同じ目的を持っています。ただ、リセットはすべてをまっさらな「さら地」にしようとするのに対し、ノーマライズは使える部分は残しつつ手を入れる必要のある部分だけを整える、という違
font-familyの指定はウェイトなしのアルファベット表記のみでほぼよさそう | Culture27
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif; 同じフォントを日本語表記とアルファベット表記の両方で指定しているのは、各ブラウザの解釈や挙動が異なるなどの理由からです。ただ、最近のブラウザはどうなんだろうかとちょっと気になったので調べました。 結果としては下記の表になりました。詳細はデモページを見てください。 Parallels上のWin7: IE6-8(IE6,7はIETester), Chrome15, Firefox8, Safari5, Opera11 Mac OS X 10.6.8: Chrome15, Firefox8, Safari5, Opera11 文字コード: UTF-8 指定方法 IE Chrome Saf
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
吹き出し素材専門サイト「フキダシデザイン」
html5-memo.com
Chromeと過ごした3年間！日英共に様々な情報を参考にしまくったWEB屋の厳選エクステンション27選！ | バンクーバーのうぇぶ屋
HTMLをアップするとCSSのスケルトンを自動生成してくれる「bearcss」:phpspot開発日誌
『float』ではなく『display: inline-block;』を使うという選択 | PRESSMAN*Tech by NET div