You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others. The reset styles given here a
Blog Posts List ブログ記事一覧 検索 CakePHP3を始めた方に CakePHP 3.X 2016年01月16日(土) 14時23分 2つの住所から距離を計算する API 2015年12月18日(金) 10時23分 「:target」セレクタについて CSS 2015年12月12日(土) 12時23分 外部サイトからの画像への直リンクを防ぐ Apache 2015年12月04日(金) 12時23分 CSS3だけで作るブラウザタブ CSS 2015年11月17日(火) 21時23分 CSS3だけで作るパンくずに関する件 CSS 2015年11月12日(木) 12時23分 Bootstrap4のブレイクポイント計算機 Bootstrap 2015年11月11日(水) 19時23分 Bootstrap4のブレイクポイントに関する件 Bootstrap 2015年11月11日(水
掲載するコンテンツにナンバリングをつける際にまず思いつくのは、ol要素を使うことでしょう。確かに、ol要素はナンバリングするのに非常に合理的です。 ここでは、そのol要素を頼らずにナンバリングするテクニックを紹介します。 Numbering In Style [ad#ad-2] 下記は各ポイントを意訳したものです。 ol要素を使用しないでナンバリングをするコンテンツは、例えばデモにあるようなFAQのリストです。 このFAQのリストは、dl要素で実装されています。 dl要素でナンバリングしたデモページ ※実装は、下記で紹介。 ナンバリングの実装には擬似要素と「counter-increment」を利用しており、アイデアの元となったのは「Styling ordered list numbers」の記事です。 Styling ordered list numbers デモページ このデモでは入れ
2012年2月、Modernizr 2.5 の カスタム・ビルダー から Respond.js が外されました。理由は、HTML5 Boilerplate (以下 H5BP) コミュニティでの決定です。Respond.js は、IE8 以下などのメディアクエリ未対応なブラウザにもその代替え機能を提供するスクリプトで、レスポンシブ Web デザイン を支えるスクリプトとして、H5BP に長らく (8ヶ月) 採用されてきた経緯があります。 ではなぜ、Respond.js は外されたのでしょう? 今回は、その決定を下した長~い議論 Issue #816: Revert mobile-first media queries and remove respond.js から、ベスト・プラクティスの要点と、Paul Irish の考える H5BP の理想像を読み解いてみたいと思います。 ヘタクソで読み
最近のWebページでよく使用されるシンプルな1カラム、マルチカラム、カード型のレイアウトをはじめ、フッタが常に最下部に表示されるスティッキー、Webアプリなど、人気のグリッドレイアウトを簡単に実装できる超軽量スタイルシートを紹介します。 もちろんレスポンシブ対応で、古い環境(IE8+, iOS5+, Android3+)もサポートされています。 レイアウト用だけのフレームワークを必要としている人にはぴったりだと思います。 GridLayout GridLayout -GitHub サポートするのがモダンブラウザだけであれば、Flexboxでレイアウトをするのがベストです。 Flexboxについては、下記ページで徹底的に解説しているので参考にしてください。 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 GridLayoutの主な特徴 GridLayoutのデモ
斜めになった横並びメニュー Codepenに面白いカタチのメニューがあったので、試してみました。 CSS3のtransformプロパティを使用するため、対応ブラウザは各モダンブラウザとIE9+。 ※CSSは最低限必要なプロパティのみ記述しています デモはこちら HTML <ul> <li><a href="#">Menu1</a></li> <li><a href="#">Menu2</a></li> <li><a href="#">Menu3</a></li> <li><a href="#">Menu4</a></li> </ul> ul{ transform: skew(-20deg); } まずはulにtransform: skew(-20deg);を指定。数値はお好みで。 li{ float: left; margin: 0 1px; background: #3397de; }
1年以上前に、私は最初の 12 Little-known CSS Facts(あまり知られていないCSSの12の事実) を発表しました。SitePointで最も人気の高い記事となりました。この記事を書いた後も、私はCSSのアドバイスやちょっとした情報の収集を続けました。だって、大ヒット映画も必ず続編を制作するじゃないですか。 注釈 SitePoint/ Natalia Balska によるイラスト それでは、早速今年も開発のヒントになる12の事実について話しましょう。もちろん、中にはもうすでにご存じのこともあると思いますが、この中で初めて知ったという事実がありましたら、コメントでお知らせください。 1. border-radius プロパティに”スラッシュ”シンタックスを使用できる事実 このプロパティについてはSitePointに4年以上 前に書いた のですが、この機能が存在することを、未
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ(特にIE7・IE8など)によっては動きや見栄えが説明と異なる場合があ
フォントがやけにキレイに見えるなというサイトがあってどうやってるのか全然分からなかったんですが、最近になって「font-smoothing」というプロパティの存在を知りました。 スマホやモダンブラウザ向けのプロパティですが、1行足すだけでテキストがスタイリッシュになります。 font-smoothingで細めのフォントを実現 まず最初にfont-smoothingをかけたものとかけてないものでどう違うのか比較画像をお見せします。 ▼font-smoothing使ったときと使ってないときの比較用GIFアニメです。テキストの雰囲気が違うのが分かりますかね。 書き方は簡単で、下記の記述をフォントを変更したいところに書き加えるだけ。 -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; 例えばbodyに書い
なんだかノウハウ溜まってきた感あるのでまとめる。 1. prefixの付与はautoprefixerに任せる方が良かった 基本的な部分だが、SCSSになんでもかんでもやらせようとするのはよくない。 例えば下記のようなprefix div { -webkit-box-shadow: 0px 0px 10px rgba(255,0,0,.5); -moz-box-shadow: 0px 0px 10px rgba(255,0,0,.5); box-shadow: 0px 0px 10px rgba(255,0,0,.5); } sass/scssであればCompass、Bourbon、lessであればLESSPrefixerなど、mixinとしてprefix付与を提供してくれるライブラリがあったりするが、これよりもautoprefixerによる解決をおすすめしたい。 gulpなどを導入していな
#CSSCreator .com { Contained Floats, the clearfix technique; } Author: Tony Aslett First created 8-May-2004 There is a large and growing movement by web developers and designers towards web standards. Part of that movement focuses on clean mark-up, which has many long term benefits such as easier maintenance, lighter pages and better support by browsers of the future. One thing that has bugged me
A toolkit to automate & enhance your workflowLeverage gulp and the flexibility of JavaScript to automate slow, repetitive workflows and compose them into efficient build pipelines. TypeScriptDevelop in any languagePNGCreate assets with any toolMarkdownWrite using any formatJavaScriptGet compiled codeWebPGet optimized imagesHTMLGet rendered content
注釈 60分のセミナー用のスライドです 60分間ひたすらしゃべるための資料なので、目次はありません セミナーのフォローアップのために公開しています 文字が大きいのは、会場の後ろの席でも見えるようにするためです Cascading Style Sheets .header { margin: 8px; color: #f00; } マジックナンバーの良くない例 .main { float: left; width: 640px; } .main h1 { width: 640px; } .main p { width: 640px; } .main ul li { width: 620px; margin-left: 20px; } 数値が乱立 .aaa { width: 640px; } .bbb { width: 324px; } .ccc { width: 216px; } .ddd
ちょうど今レスポンシブWebデザインのサイトを制作しているのですが、Media Queriesで画面サイズ別にCSSを記述していくときにどのような順番で記述すればよいのか、改めて調べてみたらいろいろ迷ってしまいました。 今までいろいろなやり方を試してきたのですが、一度整理してみたいと思います。 記述方法の種類 一般的なMedia Queriesの記述の方法としては、以下のようなやり方があります。(ブレイクポイントを480px、768px、980pxとした場合の例です) 1. PCのスタイルから記述していく方法 デフォルトでPC用のスタイルを定義し、タブレット/スマートフォン用のスタイルはMedia Queriesを使って上書きしていくPCファースト的な方法です。 /* デフォルト:980px以上用(PC用)の記述 */ @media screen and (max-width: 979px
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く