-webkit-text-size-adjust: none を絶対に設定してはいけない理由
PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。 以上。 で終わってしまうと記事にならないので、ちゃんと説明しておく。 そもそも -webkit-text-size-adjust とは何か iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。 これを制御するのが CSS の -webkit-text-size-adjust である。 文字サイズ自動調整の具体例 次のような HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック：ズルいデザイン（1）（1/2 ページ） デザインが自分でイイ感じに作れたらいいなあというプログラマのみなさん。少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します Webプログラマ、Webエンジニアの皆さんが、個人で作るWebサービスやハッカソンなどで、短期間に集中してサービス開発してローンチしたいときに、もうちょっと自分でイイ感じにデザインできるといいなあという声をよく聞きます。 この企画は、そんなプログラマが、少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します。 （注）このページでは、個々のデザイン要素を分かりやすく説明するために、実寸サイズより画像を拡大して使用しています。 ズルいデザインはSassとCompassを利用し
美しい横メニューの作り方
<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]画像無しで三角形を作成する仕組みとそれを応用するチュートリアル
画像無しで三角形を作成するスタイルシートの解説と、それを使って吹き出しや折り返しを作成するチュートリアルを紹介します。 CSS Quick Tip: CSS Arrows and Shapes Without Markup デモページ（当方作成） [ad#ad-2] 下記は各ポイントを意訳したものです。 CSSで三角形を作成する仕組み CSSで作成した三角形を使って吹き出しを作成 CSSで作成した三角形をさらに応用 対応ブラウザ CSSで三角形を作成する仕組み まずは基本となる三角形の作り方です。 三つにStepを分けて、解説します。 デモページ（当方作成） CSS：Step 1 三角形の元となる四角形を作成します。 三角のサイズは「border:10px;」で決まります。高さはそのまま、幅は倍です。 height, widthは仮のものです。 .step1{ height:20px; w
CSS： marginの正しい理解 - kojika17
toggle()や変数、calc、:matchなど、今までにないCSSプロパティ、セレクタが提案・実装されて、CSS3, CSS4も楽しくなってきています。 border-radiusや、box-shadowなども、古いAndroidブラウザ以外なら、prefixなしで使える状況も増えてきました。 最新技術は、これから必要になってくるかもしれませんが、基本も大切です。 float や position など、CSSコーディングを悩ませるタネはいくつもありますが、今回はその中でも私がCSSで一番難しいと思う margin について書きます。 「marginはバグが多い」という声をたまに聞きます。 しかし話を聞いてみると、正常な動作をバグと間違って認識しているケースもあります。 marginを正しく理解することによって、効率的なレイアウトを構築できますので、基本的な内容ですが、読んで頂ければ幸
Twitter BootstrapでさくさくWeb開発 : アシアルブログ
<div class="container-fluid"> <div class="row-fluid"> <div class="span4"> Span4の中身 </div> <div class="span8"> Span8の中身 </div> </div> </div> Preタグで囲むコード エンジニアの皆さんなら、ブログにコードを書きたいですよね。 Twitter Bootstrapでも、かっこ良くコードを見せる手法を提供しています。 ・codeタグで囲む 赤くなります。 ・preタグで囲む 囲み枠がつき、灰色になります。 ・Preタグ+Google Prettifyを使う preタグのclassに、prettyprint linenums を入れましょう。 これが超かっこいい！！コードを見せるならこれがよさそうですね！ さて、かっこいいGoogle Prettifyですが、こ
[CSS]CSS3グラデーションの表示サンプルと指定方法のまとめ
現在、Firefox, Safari, Chromeで利用できるCSS3グラデーションの表示サンプルと指定方法のまとめをDynamic Driveから紹介します。 CSS Library:CSS3 Linear Gradients 下記は各ポイントをピックアップしたものです。 CSS3グラデーションの基礎知識 CSS3グラデーションをサポートしているブラウザは現在のところ、下記の三つです。 Firefox 3.6+ Safari 2+ Chrome CSS3グラデーションの対応エレメントは、下記の二つです。 background background-image CSS3グラデーションの指定方法はmoz系（Firefox）とwebkit系（Safari, Chrome）で異なり、下記のようになります。 moz系
ウノウラボ Unoh Labs: CSSの管理と記述法のコツ
前回はYUIの紹介でしたが、今回はCSSの管理と記述法について書きたいと思います。 CSSは、主なHTMLエディタなどでは標準で編集できますが、多人数での開発 やスタイルが多くなってくるほど管理が大変になっていきます。 アプリケーションソフトの管理機能もいいですが、CSSコーディング規約のようなものがあると、より把握が容易になるメリットがあります。 サイト基準設定、ページレイアウト、共通要素、個別スタイルに分ける 構成内容によって、上記のような段階に分けると、意図しない表示等が出たとき、簡単に影響箇所の割り出せます。 基準スタイル（ex: base.css) font-sizeやfamily,デフォルトのmarginやpaddingのリセット等。 前回のYUIのReset.CSSを使う手もあります。 ページレイアウト(ex: layout.css) カラム構成やグローバ
長い文字列が続いて文字がはみ出してしまうのを防止するCSS:phpspot開発日誌
Wrapping Long URLs and Text Content with CSS ? Perishable Press 長い文字列が続いて文字がはみ出してしまうのを防止するCSSが公開されてます。 CSS2/3, Opera4-7, Mozilla, IE5+ 用にクロスブラウザで動作するようにCSS例が示されていて参考になります。 通常だと文字がはみ出してしまうのを、はみ出さないようにしてくれるCSSです。 ハミ出しを防いでくれます。 対応したつもりが実は特定ブラウザだけっていうことがよくありそうなこの現象、この対策で簡単に対応出来そうです。 関連エントリ JavaScript使ってないのに使ってる風のピュアCSSなテクニック集 便利なＣＳＳテクニック３０選 CSSリストに関する5つのテクニック集
CSSセレクタの高速化の話し - Webtech Walker
続・ハイパフォーマンスWebサイトを読んでCSSセレクタの高速化の話しが面白かった（というか全然知らなくてちょっとびびった）ので紹介します。 セレクタは右から左に解釈される これは正直知らなくて、結構衝撃でした。 #foo .bar {} これはなんとなく#fooを探して、その中の.barを探している気がしてたんですけど、実は.barを探して、その親要素に#fooがあるかを探すそうです。なので特に#fooが必要なければ .bar {} と書いたほうが高速だということ。 また、以下の様に要素名で指定すると、その要素を全て探します。 #foo a {} これは一度a要素を全て探すので、できればaにclassをふって #foo .anchor {} とするほうが高速のようです。（#fooをとるとより高速） 特にユニバーサルセレクタなどは、 #foo * {} とすると、全ての要素の親要素に対して
長～いURLによるカラム落ち、に対処する - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 長いURL(半角英数字）を強制改行させるには、CSSで「word-break: break-all;」を指定すれば良い。これはIEの独自拡張で、IE5.0から対応しています。 通常のボックス要素の場合だと、Opera/firefoxではボックスを突き破りはしても、ボックスを拡張したりはしない。 幅が指定されたボックス要素を拡張してしまうのはIEのバグなので、通常は「word-break: break-all;」で大きな問題は無いです。（レイアウトが崩れない、て意味ね） ただし、table要素に詰まっていると、ややこしくなります。table要素は特殊なブロック要素で、中
[JS]ホバー時に光源が移動するエフェクトがかっこいいスクリプト
マウスのホバー時に、光源がカーソルに追従するエフェクトがかっこいいスクリプトをcoders.meから紹介します。
IE6のバグや仕様の解決方法のまとめ -Ultimate IE6 Cheatsheet
IE6のCSSやJavaScriptなどのバグや仕様で困った時の解決方法をまとめたチートシートをVirtuosi Mediaから紹介します。
画像をCSSだけでハイクオリティに縮小サムネイル化する方法:phpspot開発日誌
Tip: High quality CSS thumbnails in IE7 ・Devthought 画像をCSSだけでハイクオリティに縮小サムネイル化する方法が紹介されています。 普通、IEで、img に対して、width, height 指定すると、画像が汚く縮小されちゃってましたが、CSSの指定をしちゃうとそれが解決されるということのようです。 具体的には以下のCSS指定によってそれが可能みたいです。 img { -ms-interpolation-mode: bicubic; } デモページ う〜ん、縮小してもとっても綺麗です。 FirefoxやChromeの場合は何も指定しなくても綺麗に縮小される、っていうのも知りませんでした。 これは、サーバサイドでサムネイルを生成しなくて良くなる場面が出てきて開発者としては手間の削減になりますね。 転送量を考えれば、サムネイルが完全に不要に
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
オリジナルフォントが作れるiPad用フォント作成アプリ「iFontMaker」｜linker journal｜linker