rem単位を用いたレスポンシブ対応ページの実装デモ
Tweet rem単位を用いたレスポンシブ対応ページの実装デモ はじめに 本技術のポイントは1つだけです。可変にしたい要素すべてのサイズ指定にrem単位を用いることにより、普通にやると面倒なレスポンシブ対応がfont-sizeのみの変更で済むことです。 このサイトがデモです。 （ウィンドウ幅を狭くしたり右上のチェックボックスを切り替えてみてください。） きっかけ 2015年9月ごろにAppleサイトのサポートページ（https://support.apple.com/ja-jp/HT...）を開いたところ、大きな表示崩れが生じていました。 Appleサイトのバグ(左: IE Edgeでの表示 右: Chromeでの表示) 画像提供元: 情報科学屋さんを目指す人のメモ CSSを解読したところ、要素のところどころにrem単位を用いたサイズ指定が施されていました。 これは単なる凡ミスではないと考
リストに1pxのラインを追加するだけで、印象がぐっとよくなる
#sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; border-bottom:1px solid #84b2e0; } 1. 下に薄いラインを追加してみる このリストに1本ラインを加えるだけで全然印象が変わってきます。試しに下に白いラインを追加してみます。 #sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; bord
transition－CSS3リファレンス
transitionプロパティは、transition効果（時間的変化）をまとめて指定する際に使用します。 transitionプロパティでは、 transition-property、 transition-duration、 transition-timing-function、 transition-delay の各プロパティの値を、まとめて指定することができます。 このプロパティでは、値を指定する順序が重要となります。 時間として指定される最初の値はtransition-durationに割り当てられ、 時間として指定される二番目の値はtransition-delayに割り当てられます。 複数の種類のCSSプロパティに対してtransition効果を適用する場合には、値のセットをカンマ（ , ）で区切って指定します。 ■値 各プロパティの値をスペースで区切って指定 transiti
これからTwitter Bootstrapをはじめる人のためのエントリまとめ - 小さい頃はエラ呼吸
はじめに 今、Twitter Bootstrapが一部のエンジニアで人気です。 Twitter BootstrapはWebデザインが得意ではないエンジニア向けにTwitter社が開発／提供するCSSフレームワークです。このTwitter Bootstrapを利用すると、簡単にTwitterっぽいデザインのWebサイトを作成できます。 そこで、これからTwitter Bootstrapをはじめてみようと思うエンジニアの人たち向けに、役立つ記事の数々をまとめてみました。 このエントリを書こうと思ったきっかけは、以下のスライドでした。とても分かりやすく、はじめて知るようなサービスなども網羅されており、とても参考になりました。 Twitter bootstrap入門 #twtr_hack jQueryプラグイン徹底活用 プロのデザインアイデアとテクニックposted with amazlet at
オンマウスで吹き出し説明文がポップアップ
通常サイズのマスクでは、お子様には隙間ができてしまい ウイルスを効果的に遮断できません。 このマスクは、プリーツ構造で自由に伸び縮みするプリーツ構造で快適な着け心地を実現しています。1日中着けていても、息苦しくなったり耳が痛くなったりしづらい作りになっています。 普通のマスクよりも小さめに設計された 幼児・子供用のマスクなので、顔が小さい方でもジャストフィット。 幼児や学校に通うお子様にぴったりです。 ■新型インフルエンザ新型インフルエンザとは？ 動物のインフルエンザウイルスが変化して人に感染したものが『新型インフルエンザ』です。容易に人から人へ感染して広がり、急速な世界的大流行（パンデミック）を起こす危険性があります。対策の3層型高性能マスク 外側と内側には不織布、 真ん中にBFE95規格フィルターを採用した3層構造でウイルスを防ぎます。 2層目にはBFE95素材が使われているため、 新
CSS Cursors - CSS tutorial
Microsoft Internet Explorer 4+ and Netscape 6+ supports customized cursors defined with CSS. Although the cursors will not have the customized look in other browsers it usually doesn't ruin anything. These browsers will simply show the normal arrow-cursor which would be same case as if you refrained from customizing cursors at all. So unless the page really doesn't work without the customized curs
ハイパフォーマンスCSSの記述方法 : Weblog : SimpleIsm
CSS すでにいろいろ出回っていますが、そういった情報は1つだけあれば良いわけではなく、それらの情報をまとめたり、精査していって、さらにより良いものになっていくのがWebの良いところだと思います。業務を行う中でメモしていたものが貯まってきたので、その理由とかを調べてみたのでまとめます。まぁ前置きはこれぐらいにして本題。 CSSをシンプルに効率良く書くということは、ネットワーク転送量の低下、パース速度の向上、そしてHTMLとのマッチング効率化に繋がります。そしてそれは即ち、ページのパフォーマンスを向上させることに繋がります。 また、「効率的なスタイル指定をする」と考えながら臨むと肩に力が入ってしまいますが、「非効率なスタイル指定をしない」という視点で考えていけば、自ずと軽量で効率的なCSSを記述することができると思います。 パターンマッチング(Pattern matching)について 「非
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
