CSS3の「フレキシブルレイアウト」使い方まとめ フラップイズム
どうも、くーへいです。 今回は「レスポンシブデザイン」での使用が想定される、「フレキシブルボックス」についてまとめてみたいと思います。 なお、本記事は「CSS Flexible Box Layout Module Level 1」の2014年5月22日付けの編集者草案（Editor’s Draft）を基に作成しています。 また、「CSS Flexible Box Layout Module Level 1」は未だに策定中であり、現在は2014 年3月25日付の最終草案（Last Call Working Draft）が最新仕様です。 2014年5月22日付けの編集者草案は、2014 年3月25日付の最終草案に微修正を加えたものです。 最初にブラウザの対応状況について注意点 「フレキシブルボックス」で検索すると、いくつかの素晴らしい記事が出てきますが、中には古い記事が多く含まれています。 「
IDを使わないCSSの設計 - kojika17
CSSのスタイリングではIDを使用しない、という話をよく聞くようになりました。 私も最近は、IDを使わずにコーディングしているので所感を書きます。 CSSでIDを使わない 「IDを使わない」ということをHTMLの変化で示すと、以下のようになります。 <div id="header" class="clearfix"> <h1 id="logo"><a href="">logo</a></h1> <ul id="heaeder-info"> <li class="about"><a href="">about</a></li> <li class="sitemap"><a href="">sitemap</a></li> </ul> </div> ↓↓↓↓ <div class="header clearfix"> <h1 class="logo"><a href="">logo</a></
[CSS]コピペで簡単にCSS3アニメーションを実装できるライブラリ・ツールのまとめ
CSS3アニメーションで、背景を変えたり、ボタンをバウンドさせたり、画像をフェードやフリップで表示したりなどをコピペで実装できるライブラリ、緩急をともなったイージングやトゥイーンの微調整を設定できるオンラインツールをまとめて紹介します。
CSSの小数点以下の数値を各ブラウザはどのように解釈するか
CSSで小数点以下を指定できる単位で、小数点以下の数値の扱いがブラウザごとに異なっているようなので、単位別にまとめてみました。 調査時の各ブラウザのバージョンですが、Internet Explorer 9 & 10 (Windows 7), Firefox 17, Chrome 25 dev-m, Opera 12.10となっています。調査にはブラウザ付属の調査ツールを使いました。 表が見づらいかもしれませんが、我慢してください。 なお、これはどうレンダリングされるかなどは考慮していません。 その指定がどう解釈されるかだけを調べたものです。 指定した値についてですが、但し書きがない場合は1.5555555555です。 Percentageフォントサイズをパーセンテージ指定。
CSSで使用できる角度の単位
degdegree、度数法。 360で円を一周するお馴染みの表し方。 gradグラード。ゴン（gon）、グレード（grade）、グラディアン（gradian）とも。 1直角を100とする単位。 つまり90degの1/100が1gradになる。360degは400gradで表すことができる。 radラジアン（radian）。弧度法。 円周上でその円の半径と同じ長さの弧を切り取る2本の半径が成す角の値だそうです。 360degは2πradで表すことができる。 degreeからの変換はdegree * π / 180で行う。 2011年9月6日版でWho is going to use this anyway?とか言われてた単位。 turn1回転を1つの単位として扱う。 1turnは360degと等しい。 まとめ1deg = 約1.1111111111grad = 約0.0174532925ra
Firefoxで使われている上下左右中央配置のスタイルシート
Firefoxで画像を開いたら、背景が暗い感じのCSSが使われるようになってました。Firefox 12からですかね？ 11 からでした。そのページでは画像が上下左右中央に配置されています。 ちょっと興味が湧いたので中身を覗いてみたら、上下左右中央配置もCSSで行っていました。 使われているCSSファイルはresource://gre/res/TopLevelImageDocument.cssにあります。 このファイルはMPL 1.1/GPL 2.0/LGPL 2.1のトリプルライセンスです。 @media not print { body { background-color: #222; margin: 0; } img { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; } } @medi
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
Less Parser
Once you add your project folders to the application, it will automatically start monitoring the less files inside these folders for changes. After you have saved the less file, the application will automatically parse your less file into a regular css file. I saved my less file, but I don't see my changes in my browser. What happened? There are a number of different scenarios where this can happe
[CSS]サイズが分からない要素を真ん中に配置するテクニック
width, heightのサイズが分からない要素を天地左右の真ん中に配置するスタイルシートのテクニックを紹介します。 Centering in the Unknown [ad#ad-2] 下記は各ポイントを意訳したものです。 要素のサイズが分かっている場合 要素のサイズが分からない場合 まとめと対応ブラウザ 要素のサイズが分かっている場合 「真ん中に配置するエレメント」と「その親エレメント」両方の高さと幅のサイズが分かっているのであれば、エレメントを真ん中に置くのは簡単です。 「真ん中に配置するエレメント」を「position: fixed;」にし、topとleftを50%、marginのtopとleftをエレメントの半分のサイズでネガティブマージンで配置します。 CSS .centered { position: fixed; top: 50%; left: 50%; margin-t
[CSS]チェックしておきたい、スタイルシートのテクニックのまとめ | コリス
実用的なものから実験的なものまで、最近リリースされたものを中心にスタイルシートのテクニックを紹介します。
HTML | Don’t Fear the Internet
Are you a print designer, photographer, fine-artist, or general creative person? Do you have a shitty website that you slapped together yourself in Dreamweaver in that ONE web design class that you took in college? Do you not have a site at all because you’ve been waiting two years for your cousin to put it together for you? Well, we’re here to help. We know that you have little to no desire to do
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot Seperti yang kita pahami waktu ini ada sangat banyak permainan slot online paling sederhana yang dapat dimainkan dalam sekejap hanya cukup masuk di sana saja ojekslot terunggul. Di sini dapat ada sangat banyak bermacam permainan luar biasa yang pastinya dapat anda temukan dengan ringan. Beraneka permainan terbaik di sini dapat and
CSS3なら簡単！ アニメーションするリングメニューを作る | CSS-EBLOG
CSS3なら簡単！ アニメーションするリングメニューを作る カテゴリ：CSS3関連 2011年7月19日 07:40 jsdo.itで公開したら意外と好評だったので、解説などを書いてみたいと思います。 ゲームなどにありそうなリングメニューを、CSSだけを使って実装した例です。下に実際の動くサンプルもあるので、ぜひ触って見てください。 ちなみに右の画像は、中央の「main」にマウスオーバーした際にアニメーションでメニューが出てくる瞬間の画像です。 デモ まずは下のサンプルをご覧ください。ちなみにアニメーションに対応しているブラウザのみ、アニメーションが実行されます。具体的には、GoogleChrome、Safari、Firefox、Operaです。 リングメニューをCSSで実装してみる - jsdo.it - share JavaScript, HTML5 and CSS テクニックの肝 今
[CSS]divなど余計なものを使用しないで、レイアウトをセンターに配置するテクニック | コリス
「<div id="wrapper">」などのラッパーを使用しないで、レイアウトをセンターに配置するスタイルシートを紹介します。 デモページ ※スタイルにCSS3を使用しているため、この版はIE6には対応していません。後ほど紹介するシンプル版はIE6に対応しています。 「<div id="wrapper">」を使用しないでレイアウトをセンターに配置するスタイルシート 元記事ではスタディが段階ごとに紹介されていますが、ここではその最終段階を紹介します。 CSS：シンプル版 <!DOCTYPE html> <style> html{overflow: hidden; height: 100%; background: #c72;} body{overflow: auto; height: 100%; width: 600px; margin: 0 auto; /* center */ padd
プロパティから CSS 仕様書へのリンク集を作ってみた - lucky bag
CSS プロパティの仕様が確認できる OS X の Dashboard 用ウィジェット「SeeSS」が便利そう。例えば、ある CSS のプロパティについて、仕様書ではどう定義されてるんだっけってな場合に、仕様書の目次から辿ってっつうのがちょっと面倒だったりする。そこで、各プロパティ名から W3C の CSS 仕様書の当該部分へのリンク集を作ってみた。まぁ、「Appendix F. Full property table」のシンプル版って感じ。 プロパティから CSS 仕様書へのリンク プロパティから CSS 仕様書（邦訳）へのリンク 一応、邦訳版へ勝手にリンクした物も作ってみたんだけど、不都合があった場合には削除するかもしんない。あと、リンク切れや漏れがあるかもしれないんで、なんか見つけたらコメントでご報告いただけたらありがたいっす。
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
[CSS]ネガティブホバーに違和感アリ、ポジティブホバーのススメ
ポジティブホバーのデモページ ホバー時のキャプチャ [ad#ad-2] ネガティブホバーとポジティブホバーの考察 直感的に 最も大切なことは、間違っているように思われない、ということです。 ホバー時に期待するものとしては、なにかしらの反応があると予想しませんか？ 例えば、ページに遷移するリンクをクリックしようとした際、そのリンクがあなたから逃げてしまうことは望まないでしょう。その箇所に注意が向けられるように分かりやすくなることは、直観的に理解ができるとも言えるでしょう。 この感覚はUIデザイナー・デベロッパーにとって、とても大切ことです。 そして、この直感をもたらすものが、ポジティブホバーです。 どちらがよいのか？ 答えはもちろん、ポジティブホバーです。 ホバー時には、そのアピアランスには加えるようにします。 アピアランスをポジティブにするには、下記の方法があります。 通常時：下線無し 下
[CSS]画像を使用しないで、紙がひらっとめくれたエフェクトを与えるスタイルシート
あらゆるサイズのエレメントに利用が可能な、紙がひらっとめくれたようなページカールのエフェクトを与えるスタイルシートを紹介します。 デモページの拡大 このエフェクトはページのあらゆるサイズの要素に簡単に適用できます。 紙がひらっとめくれたエフェクトの実装方法 HTML HTMLはシンプルです。div要素にclassを付与しているだけです。 <div class="box">My box</div> CSS：シャドウの適用 box-shadowを使用して、内側と外側にシャドウを適用します。 .box { position: relative; width: 500px; padding: 50px; margin: 0 auto; background-color: #fff; -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Components · Twitter Bootstrap
[CSS]スタイルシートの量を少し減らした、新しいclearfix -micro clearfix