knowledge base

マークアップ/フロントエンドエンジニアのWEB制作における備忘録です。平日はWEB屋、休日は社会人劇団の主宰・劇作家をしています。

CSS

Photoshopのような画像合成はフロントエンドでどこまで可能か

モダンブラウザに限定すれば実装は容易 Photoshopには描画モードという機能があり、例えば「乗算」「オーバーレイ」「スクリーン」などの描画モードを用いることでデザインの表現を大きく広げることが可能になります。 これまで描画モードを利用した表現はブ…

Windows環境でWebフォントが崩れる

CSS

ブラウザを問わずWindowsでのみ崩れる Webフォントサービスを利用していた際、Windows環境にてブラウザを問わずフォントが崩れるという現象がありました。 ▼Windows環境での表示 ▼本来の表示 遠目にはわかりにくいのですが、太字の部分においてWindowsの環境…

ビューポートのサイズに合わせてフォントを拡縮する

CSS

iOSではzoomが非対応に レスポンシブデザインにおいて、画面サイズに合わせてフォントサイズも拡縮しないとデザインを大きく崩してしまう場合があります。 そのようなときは、こちらのjQueryプラグインのような挙動を実装する必要があります。これまでは、そ…

画面外に絶対配置した要素が表示されてしまう

CSS

iOS9におけるSafariなど一部のスマホブラウザでは、画面外に配置した要素が、表示されてしまうバグがあります こちらの例では、右側にあるモーダルウィンドウは本来画面外にあり、ボタン押下時に画面中央に表示されるという仕組みになっているはずでした。 ※…

メイリオで斜体を実装

CSS

メイリオには斜体がありません。 正確に申しますと、英数字は斜体にできるのですが、日本語の文字(漢字カナ)はfont-styleにitalicをしても斜体が効きません。 日本語でメイリオ、かつ斜体を実装するには、以下の方法で対応が可能です。 以前10px以下のテキ…

transition + transform アニメーションが動かない

CSS

Safari(Windows版)の場合 本来ベンダープレフィックスはプロパティ名にのみ付けますが、Windows版Safariの場合はプロパティの値にもつけましょう。 -webkit-transition: transform 250ms linear; -webkit-transition: -webkit-transform 250ms linear; -mo…

IEで「いいね」ボタンが文字化けする

Helveticaが原因 IEでfacebookの「いいね」ボタンを実装すると、文字化けしてしまいました。 どうやら、デフォルトでHelveticaがフォント指定されているらしく、そのため文字化けを起こしてしまったようです。 IEとHelveticaとの相性の悪さは有名で、今回の…

Gmailで画像を非表示にできない

CSS

display:noneは無効 何かとクセの多いHTMLメールコーディングですが、Gmailは特に癖が多く、先日は画像の非表示ができないというバグに直面しました。 調べたところ、どうやらdisplay:noneは無効になってしまうとのことです。 stackoverflow.com こちらの記…

ブラウザで表示できる最小フォントサイズ(10px)以下の文字を表示する

CSS

ブラウザが表示できる最小フォントサイズは10px ブラウザは可読性維持のために、CSSで10px未満のフォントサイズを指定しても無視するという機能が備わっています。 以下の例では、決して7pxで表示されることはありません。 後述しますが、zoomを使っても無駄…

text-indentも指定してもテキストを非表示にできない

CSS

jQueryプラグインを利用してスライダーを作っていました。 どうやらこのプラグインは、サムネイルではなく番号をコントローラーとして出力するようです。 ところがデザインでは、この部分には番号ではなく丸いボタンが指定されていました。 なので、背景色や…

IE8で明朝体の表示が崩れる

CSS

明朝体にするとき、最も簡単なフォント指定は次のとおりです。 font-family: serif; これでほとんどのブラウザでは明朝体になるのですが、IE8だけ表示が崩れてしまいます。下図の赤枠で囲った文字がその顕著な例です。 「青」がゴシック体になっているし、「…

JavaScriptを用いずにクリックを無効にする

CSS

クリックを無効にするには、JavaScriptを用いる手法をよく見かけますが、CSSでも実装が可能です。 a{ pointer-events: none; } 対応ブラウザはモダンブラウザが中心となっているそうです。 なぜこのようなプロパティがあるのだろうと思ったのですが、どうや…

背景色や背景画像も印刷したい

CSS

ブラウザのもつ印刷機能では、デフォルトで背景色や背景画像を印刷しないことになっています。 画像をHTML上に直書きするのも一つの手段ですが、セマンティックなHTMLドキュメントを書こうとするとどうしても限界があります。 IEの各バージョン / Firefox / …

FireFoxでinline-blockがカラム落ちする

CSS

inline-blockとletter-spacingを同時指定すると崩れる たとえば下図のようなレイアウトを実装すると想定します。 リストを横並びにした、シンプルなレイアウトです。 これをinline-blockを用いて横並びにすると、なぜかFireFoxだけカラム落ちしてしまいまし…

clipを利用したテキストの非表示方法

CSS

CSS2から対応しているclipというプロパティを利用して、テキストを非表示にします。 .visibilittyHidden{ position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; } 理屈はいたってシ…

最新版IEでセレクトボックスの矢印を消す

CSS

このような矢印です。 Chrome/Safari/FireFoxならば、次の方法で非表示にすることが可能です。 select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; } ところが、IEではこの矢印のみが残ってしまいます。 IE10以上になってしまいま…

iOS版Safariで明朝体表示になってしまう

CSS

まずは下記をご覧ください。 この部分は本来ゴシックでなければいけないのに、明朝体で表示されてしまっています。 フォントの指定をひも解いてみると次のように書いてあります。 body{ font-family: 'Meiryo',"ヒラギノ角ゴ Pro W3","MS Pゴシック","Osa…

iOS版Safariで文字サイズが無視される

CSS

ブラウザが持つ、文字サイズ調節機能を指定する 稀に、iOS版Safariにおいて、CSSで指定した通りの文字サイズで表示されないことがあります。 以下の例では、リード文(青く塗られた部分)が異常に大きくなってしまい、小見出し(赤く塗られた部分)よりも目…

iOS版Safariでフォーム入力時に自動ズームしてしまう

iOS版Safariで入力フォームにフォーカスすると、勝手にズームすることがあります。 予告なくズームされるため、ユーザビリティを考慮すると、好ましくありません。 この現象に対する対策はいくつかあるため、ご紹介いたします。 font-sizeを大きく設定する i…

IE8で透過PNGのフェードが汚れる

以下のような事例を想定します。 こちらの事例はページ読み込み時に、タイル状に並んだ透過PNGがフェードインする要件だったのですが、IE8で表示したときに透過チャンネルの部分が黒く汚れてしまいました。 フェードしているので分かりにくいかもしれません…

スタイルシートのみで吹き出しを実装

CSS

borderの特性を利用する このようなイメージの吹き出しを作ります。 問題なのは「角」の作り方ですが、ヒントはborderの描画のされ方にあります。 たとえば、次のようなdivの枠線は下図のように表示されます。 div{ width: 200px; height: 80px; border-styl…

IEで空セルが消失

以下は、IE6/7での表示です。 セルが消失しています。 tdがないわけではなく、何も値の入っていない空セルなのです。 IE6/7では空セルは表示すらされないという特徴があります。 何かしら文字列を入れればよいので、半角スペースを入れます。 実態参照で書き…

IE6でのfloat解除方法

CSS

zoom:1を再確認 floatの解除といえばclearfixが有名ですが、疑似要素をサポートしてないIE6ではclearfixが使えません。 そこで代替として、floatを解除する性質のあるoverflow:hiddenが用いられますが、意外な落とし穴があります。 下図はヘッダー下にある2…

YouTubeのレスポンシブ対応

CSS

レスポンシブ対応したWEBサイトにおいてYouTubeを埋め込む際、ウィンドウ幅が縮んでもアスペクト比を固定しなければいけません。 その方法をご紹介します。 paddingを使う方法 <div id="wrapper"> <iframe src="//www.youtube.com/embed/"></iframe> </div> このようにスタイルを指定します。 #wrapper{ position: relative; height: 0…

ヘッダーを固定表示にするとページ内アンカーがずれる

CSS

目に見えない余白をつくる 下記のような事例を想定します。 グレーのヘッダーはスクロールしてもウィンドウ上部に固定表示するようにします。 スタイルは次のように指定しています。 header{ position: fixed; top: 0; left: 0; } 記事(article)のタイトル部…

HTMLメールで画像の間に隙間ができる

CSS

画像をブロック要素に 先日、HTMLメールの制作をしていましたら、次のような現象に遭遇しました。 画像のあいだに余白ができてしまいました。 以前、似たような現象に対する記事を書かせて頂きましたが、それとはまったく異なる現象です。 実はこれ、Gmailで…

floatした要素の高さを揃える

CSS

borderを指定していなければCSSのみで対応可能 下図のような事例を想定します。 ここで、赤枠で囲まれた部分の高さを揃えたいという要望があったと仮定しましょう。 グレーのエリアは、両方ともfloatが指定されています。 高さを揃える方法はjsを用いる方法…

Android一部機種でテキストの幅が不足する

CSS

Android 4.x系の一部機種において、テキストの幅が不足することがあります。 下図がその一例です。 テキスト右側に、原因不明の空白があるのがお分かりでしょうか。 すべての機種にこの現象が起きるわけではなく、一部機種のデフォルトブラウザでの挙動です…

テーブルのセルをカラム落ちさせる

CSS

レスポンシブ案件などで、あえて表組を崩して、th,tdを横幅いっぱいに広げたい(1カラムのレイアウトにしたい)ときがあります。今回は下図のような事例を想定します。 見出しのセルをth, フォーム部品を持っているセルをtdでマークアップしています。 クリ…

スタイルシートのみで上下中央配置

CSS

実装方法は3通り 以下のような事例を想定します。 白いテキストボックスが上下中央配置されています。 上下中央配置といえば、display:table-cellであったり、line-heightでの実装であったり、JavaScriptを用いたりと、何パターンが実装方法が存在しますが、…