Perfect horizontal AND vertical centering in CSS, at any width or height! Works with percentage based width/height, min-/max- width, images, position...
Adobe製超軽量レスポンシブフレームワークTopcoat デザインしたくないシリーズ、第二弾！最近とっても気に入っているレスポンシブフレームワークTopcoatを紹介します。 Topcoatとは TopcoatはAdobe製のレスポンシブフレームワークで、最大の特徴がとにかくめっさ早い！ってこと。 jQueryMobileを使ってよくスマートフォンサイトを作っていたのですが、「いかにもjQuerymobile」感があったり、重い、デザイン上のカスタマイズがしずらいというものがありました。 ところがどっこい、Topcoatはとにかく軽く、さくさく。フレームワーク元のデザインも「今風」なフラットでシンプルなデザイン。 シンプルだから、後からカスタマイズも非常にしやすいのが特徴です。 流行りのフラットなデザイン ボタンやフォームの一つ一つがフラットで洗練されたデザインというのも特徴で、シンプル
CSSの基本や使える小技テクニックなどを幅広くまとめました。以前書いて今もそこそこアクセスがある「CSSの知識をもっと深める30+2の小技テクニック集｜Webpark」という記事があるのですが、2年近く前の記事ですしパワーアップさせて作り直しました。 恐らく過去最長の記事ですので目次を作りました。クリックするとするりと移動します。基本的な内容が多いですが、お役に立つ項目があればうれしいです。 ということで順番に説明していきます。 1. 全般的なこと 1-1. CSSリセット ブラウザごとでデフォルトのスタイルは異なっています。その違いをそのままにしておくと、後でブラウザ間の表示の違いに悩むことになり、どこが原因か分からないとイライラしてしまいます。 そんなことのないように、いったんデフォルトのスタイルをリセットしてしまおうというのがリセットCSSです。 方法は色々ありますが、個人的には一番
ページの読み込み速度は、Googleが検索順位を決定付ける指標の一つとされています。 2018年7月に検索アルゴリズムの変更が実施され（スピードアップデートと呼ばれています。）、それ以降はデスクトップ検索だけでなく、モバイル検索においてもページの読み込み速度は検索順位を決めるシグナルとして扱われます。 また、ページの読み込み時間を短縮することは、順位だけでなく、ユーザーに対するウェブサイトの利便性向上にもつながります。 The Speed Update, which enables page speed in mobile search ranking📱, is now rolling out for all users! More details on Webmaster Central 👉 https://t.co/fF40GJZik0 — Google Search Centra
調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。
What's this? HTMLソースをもとに、id,class名CSS、子孫セレクタCSS、子セレクタCSS、LESS、SASS、SCSSを自動生成するオンラインサービスです。 従来のHTMLコーディグを強力にサポートします。 What's LESS/SASS/SCSS? LESS / SASS / SCSSはCSSを効率的にコーディングできるCSSメタ言語です。 従来のCSSに比べ子孫セレクタ・子セレクタを簡単に管理することができ、高速にコーディングすることができます。 LESS OFFICIAL SASS/SCSS OFFICIAL 関連サービス 高画質サムネイル生成サービス HTTPクエリデコード SQLフォーマッター Insert文フォーマッター スペースフォーマッター JSONフォーマッター HTML/XMLフォーマッター Emmet toolkit for <textare
HTML 各デモのベースとなるHTMLです。 div要素のclassを変更して利用します。 <div class="pic"> <img src="image.jpg"> </div> 各デモで共通で使用するスタイルです。 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } body { background: #333; } .pic { border: 10px solid #fff; float: left; height: 300px; width: 300px; margin: 20px; overflow: hidden; -webkit-box-shadow: 5px 5px 5px #111
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass (English Version) https://speakerdeck.com/ken_c_lo/zurui-design-technique-english-version 第一回…
ウェブサイトを制作する際、特にCSSの新しいテクニックにはデザインの可能性を広げるのに役立つものがたくさんあります。 すべてのウェブ制作者が知っておくべき10のスタイルシートを紹介します。 @media screen and (max-width: 960px) { } 「@media」は単に印刷用ページのためだけではありません。最近のウェブサイトで多く見かけるレスポンシブデザインや可変レイアウトでもよく利用されます。 「min-width」などのプロパティを使ってMedia Queryを作る際は、ビューポートのサイズを設定して利用してください。 HTML <meta name="viewport" content="width=device-width, initial-scale=1.0"> スマートフォンでは表示するページの大きさをビューポートの幅に（主に）縮小してフィットさせるため
CSSの勉強中に色々困ることが起きて検索するのですが、だいたい同じところに行き着くので自分用のリンク集も兼ねてまとめておきます。 仕様を確認するとりあえずW3Cを見に行った方が早い。 そもそもプロパティや値について分かっていない場合はここで解決することが多い。 CSS current work & how to participate現在の状況と仕様書の目次。CSS3の日本語訳集 - 血統の森 web実験小屋日本語訳へのリンク集。W3Cの目次から探すのが面倒なときはGoogleで「w3.org プロパティ名」で探すと早い。「devs.w3.org」と「www.w3.org」を分けて検索するのもいいと思う。 ブラウザの対応と実装対応しているかどうかだけの場合は以下の2つのサイトで事足りる場合も多い。 When can I use… Support tables for HTML5, CSS3
#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
寡聞につき、rem(root em)なんてフォントサイズの単位があるのを今まで知りませんでした。 ちょっと興味を持って調べてみたところ、結構使えそうなテクニックだったのでご紹介したいと思います。 rem (root em) というのは、「ルート要素（典型的にはhtml要素）に対する相対的なフォントサイズの単位」です。 従来のemは、親要素に対して相対的なフォントサイズの単位でした。そのため、要素の出現位置次第でフォントサイズが変わってしまうことも多く、使いにくい場面も多々ありました。 他にもフォントサイズの指定方法には、ピクセル（px）を用いたものがあります。が、特に今は様々なスクリーンサイズを意識しなくてはならない時代。スクリーンサイズの小さいデバイスでは全体的なフォントサイズを同時に大きくしなければならないこともよくありますが、pxを使用していると、メディアクエリなどを使ってあらゆるフ
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ AndroidやiPhoneなどのスマートフォンではHTML,CSS,JavaScriptにバグが多くてコーディングが大変になります。そこでバグを紹介しているサイト、記事をまとめてみました。(中にはバグではなく仕様なものもあるかもしれません) iOS 8.4.1の:hover問題 iOS 8.4.1で:hoverを指定していると1タップでページ遷移できない問題 【STINGER5】AndroidのChromeで＆nbsp;が「・」になってる気がする | ビビビッ を に変更すると直るとのこと。 Mobile Safari 8でposition: fixedした擬似要素が完全に位置が固定されない - Weblog - Hail2u.net Mobile Safari 8でposition:
CSSを拡張して記述できるものと言えば、SassとLESSが有名ですね。 これらはHTML/CSSフレームワークなどでも使われていたり、日本語での解説も多くあります。 ですが、今回はそのどちらでもない、PHPベースのプリプロセッサである「PCSS」と「CSS Crush」の簡単な説明をしてみたいと思います。 誤解のないように言っておきますが、これは「Rubyとか入れなくてもいいしこっち使おうぜ」という内容の記事ではありません。 こういうものもある、という程度に見ておくといいかもしれません。 また、この記事内の解説は公式ドキュメントを簡単にまとめたものです。 詳しく見たい方は公式サイトをご覧ください。 PCSS – CSS Server-side Preprocessor 「ショートカット志向サーバーサイドCSS3プリプロセッサ」とタイトルに書かれています。 PCSSではどんなことができるの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
