コピペ可ですぐに役立つ！マテリアルデザインを極めるHTML/CSSスニペット30個まとめ
Googleが2014年に提唱したデザインガイド「マテリアルデザイン」。最近の新しいウェブサイトでも、このマテリアルデザインの考え方や基本原則を取り入れたものが増えています。 今回は、コピー＆ペーストで手軽にマテリアルデザインを再現できるHTML/CSSスニペットをまとめています。 対応しているスニペットは、ナビゲーションメニューやドロップシャドウなど特長的な素材から、ボタンやカード型レイアウト、Preloader、ホバーエフェクト、チャット機能、モーフィングアニメーションなどさまざま。ゼロからスタイリングすると時間のかかってしまう作業を短縮できるものも多く、ぜひ実践の現場で役立ててみてはいかがでしょう。 マテリアルデザインを手軽に！CSS/HTML/JSコンポーネント「Material Design Lite」の使い方まとめ お好みのマテリアルデザイン配色でHTMLスニペットを一発作成で
MosaicやNetscapeといったインターネット黎明期のブラウザでネットサーフィンできる「oldweb.today」
2016年の今でこそMicrosoftの「Internet Explorer(IE)」やGoogleの「Chrome」、Appleの「Safari」などさまざまな種類のブラウザを使うことができますが、インターネットが登場し始めたころはティム・バーナーズ＝リーが作った「WorldWideWeb」や、その後に登場した「NCSA Mosaic」や「Netscape Navigator」などユーザーに多くの選択肢はありませんでした。そんなインターネット黎明期に普及していた昔懐かしのブラウザを使ってネットサーフィンできるのが「oldweb.today」というウェブサービスで、昔のブラウザデザインを見るべく実際に使ってみました。 oldweb.today http://oldweb.today/ 上記URLを開くと、上から「ブラウザ」「URL」「日時」と並んだページが表示されます。 まずは、ブラウザの
新ブラウザMicrosoft Edgeの実力はいかに？ Web制作者が抑えておきたい各ブラウザを上回るHTML5描画性能 – ICS LAB
新ブラウザMicrosoft Edgeの実力はいかに？ ウェブ制作者がおさえておきたい各ブラウザを上回るHTML5描画性能 Microsoft Windowsの最新OS「Windows 10」では、従来の標準ブラウザ「Internet Explorer」に代わって新ブラウザ「Microsoft Edge」が標準ブラウザとなりました。ウェブ制作者としては、Microsoft Edgeのパフォーマンスはどれくらいなのかが気になりませんか？ 今回はDOM + CSS3、HTML5 Canvas、WebGLについて、Microsoft Edgeと他Windowsブラウザのパフォーマンスを比較してみました。 検証に用いたデモについて 今回の検証はBunnyMarkで検証しています。Bunnyの表示は「移動スピード・方向」「回転」「拡縮」「透明度」をランダムで適用し、毎フレーム移動をさせています。時間
スマートフォンで数字キーボードに変更する（2015/01版) - Qiita
※サーバサイド/JavaScriptで切り替える想定 type="number"はブラウザ・バージョンごとに挙動が違う 数字を入力する項目にはtype="number"を使えばよさそうですがiOSで問題があります。 iOS6以下では数字ではなく数値の属性として使用するよう設計されてるようです。 ●iOS5以下 1000を入力する ⇒ カンマが入った1,000になる （pattern="\d" を設定することで回避可能？） ●iOS6以下 0123を入力する ⇒ 先頭の0が削られた123になる これでは郵便番号の入力には使えません。 （type="tel"は本来の対象と違いますし、ブラウザ側の仕様が変わる可能性があるので使いません） iOS7のバージョンシェアが90%に達したとはいえ、iOS6以下が10%もあるならば対応したいところです。 pattern="\d*"で数字キーボード以外に切り
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 Boilerplate: The web’s most popular front-end template