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日付の最終草案に微修正を加えたものです。 最初にブラウザの対応状況について注意点 「フレキシブルボックス」で検索すると、いくつかの素晴らしい記事が出てきますが、中には古い記事が多く含まれています。 「
CSSでのフォント指定について考える（2014年）｜DTP Transit
結論1：アルファベットでウエイトなしだけでも、すべてのモダンブラウザに対応可能です。ただし、旧バージョンのSafariやFirefoxでは対応がまちまちであったため、それらに対応するには併記します。 游ゴシック体と游明朝体はWinodws 8.1では日本語名、OS X Mavericks（10.9）ではアルファベット名のみの対応であるため、両名の併記が必要となります。 疑問2：「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」のどちらを記述すればいいのでしょうか。 「ヒラギノ明朝 Pro」を改訂し、JIS X 0213:2004の例示字体に対応させたものが「ヒラギノ明朝 ProN」です。 参考： ウィキペディア - ヒラギノ 「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」の違い CSSのfont-family指定はこれで決まり！（2013春） 結論2：新しい字形に対応をしている「ヒ
【CSS】beforeのcontentで改行する - めめんと
CSSで特定の要素の前後に何かを書き足すときにはそれぞれ疑似要素の『:before』、『:after』を使用します。 クラス内のcontentプロパティに文字を入れるとそれが挿入されますが、改行する際は『\A』のエスケープ文字と『white-space』プロパティに『pre』を記述してください。これを入れないと改行が反映されないようです。 .sample1:before{ content:"★参考★\A"; } .sample2:before{ content:"★参考★\A"; white-space: pre; } .sample1 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ ストテキストテキストテキストテキストテキスト
CSS3のbackground-positionでより柔軟な配置を | Web標準Blog | ミツエーリンクス
CSS3の新機能といえば、border-radiusやtransform, border-imageなど、新しいプロパティを想像してしまいがちですが、新しい機能は必ずしも新しいプロパティでのみ実装されるわけではありません。CSS3 Colorで追加されたrgba()など、値を拡張して実現する新機能もいくつか存在しています。 こういった拡張は既存プロパティの値として使われるため、ソースを見てもあまり目新しくありません。目立ちにくいのです。そんな目立ちにくい拡張のひとつに、background-positionがあります。 CSS2までは、background-positionに2つの値が指定されても、その基点は「上から、左から」でしかありませんでした。表現によっては「右から○○px、下から○○pxの位置」といった指定のほうが都合の良い場合もありますから、それが出来ないことを面倒と考えていた方
WEBフォントで簡単に！STINGER3の細かいところにアイコンを入れてみた - 32style
WEBフォントを使って、簡単にアイコン装飾を行う方法をご紹介します。細かいところまでに気をつかえば、サイト全体の印象がグッと良くなりますよ！ サイトのちょっとした装飾に使ったりする「アイコン」ですが、わざわざ画像を作成したり、素材を探してきたりするのは結構大変です。それにアイコン画像のサイズや色をあとで変えたいと思っても、画像自体を作りなおさないといけないので、それはそれで面倒な話になっちゃいます。 でもそんな面倒な話は、「Font Awesome」というWEBフォントを使えば一気に解決します。これを使えば、簡単にアイコンを挿入することができるうえ、WEBフォントなので、あとでサイズを大きくしたり色を変えたりといった作業も、CSSを触るだけで簡単にやれちゃうんです。 ということでわたしも「Font Awesome」を使って、STINGER3を使った当サイトの細かいところにアイコンを入れて装
WEB/スマートフォンサイトにおけるフォントサイズのベストな指定方法 | 株式会社NONAME Produce(n2p)｜デジタルプロモーション企画・制作
諸説あるWEBサイトの文字サイズ指定。 現時点でベストなのかな～と思う指定をまとめてみました！ パソコン用サイト [fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”
MdN Design｜総合情報サイト
viewportを使えば、Webサイトの横幅をスマートフォン向けに最適化できる。基本的な書式は【1-1】のとおりだ。viewportにはさまざまなプロパティが用意されているので、コンテンツの内容に合わせた適切な値を指定しよう 【1-2】。 【1-1】指定しないプロパティはデフォルト値が適用されるため、すべてを記述する必要はない 【1-2】viewportのプロパティ一覧 viewportのプロパティの中でも特に重要なのがwidthの指定だ。iPhoneのデフォルト値は980pxに設定されているため、何 も指定しないとコンテンツが小さく表示されてしまう【2-1】。 値には数値も指定できるが、「devicewidth」で指定するのが一般的である【2-2】【2-3】。 【2-1】viewportのwidth指定なしの状態。コンテンツが縮小され、文字が小さくて読めない 【2-2】width=dev
これは凶悪……コーディングのヤバいバグ＆仕様 Best5 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいとです。 コーディング中にバグやブラウザ仕様のせいで、「なんじゃこりゃアア」ってなること、皆さんありませんでしょうか。 今回は、その中でもとりわけ「なんじゃこりゃアア具合」が激しいトラブルを、僕の独断と偏見のランキング形式でお話しさせていただきます。 なんでランキング形式にしたかというと、そっちの方が面白いと思ったからです。面白くなかったらごめんなさい。 第5位 IE9.jsを入れると、IE7で謎の隙間が発生しまくる IE9.jsを採用したサイトをIE7,8で見ると、 <class="ie7_anon ie7_class6" id="ie7_pseudo2" style="overflow: hidden; display: block;"/> こんなものが追記されていたりします。 こいつに高さがあるせいで、隙間が生まれてしまいます。が、こいつがな
Sassを極める！デザイナーがすぐ実践できる基本テクニック12連発 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 前回、これからSassを始めたい人へ！導入手順をまとめてみた(Dreamweaver対応)というSassの基礎に関する記事を書かせていただきました。 そこで今回は、もう一歩つっこんでもっと使いこなせるようになろう！という趣旨のもと、ちょっと使えるようになったからっていい気になっている僕がSassのテクニックやら関数をまとめてご紹介いたします！ たくさんある機能の中から、今回は比較的簡単で実用性の高いものをチョイスしました。 目指せSassマスター！WEBデザイナーもコーダーもすぐに実践したくなるSassの基本テクニック12連発もくじ もくじ テクニック1 アンパサンド（&） テクニック2 演算 テクニック3 round() テクニック4 rgba() テクニック5 コメントアウト テクニック6 変数 テ
MdN Design｜総合情報サイト
2013年1月29日発売のweb creators特別号「いますぐ悩みが解決する! Webデザイン 仕事で役立つ54のアイデア」から、毎週記事をピックアップしてご紹介! 近年さかんに目にするパララックス効果やMasonryを利用したレイアウトをはじめ、見やすくて使いやすいナビゲーション、フォームや製品紹介ページのユーザビリティを向上するインタラクション、表現の可能性を広げるHTML5+CSS3の機能、制作効率を向上するフレームワークの紹介、スマートフォンサイト制作のポイントとTipsなど、Web制作の仕事に役立つ54のアイデアが満載です。 ※本記事はweb creators特別号『いますぐ悩みが解決する! Webデザイン 仕事で役立つ54のアイデア』からの転載です。この記事は誌面でも読むことができます。
MdN Design｜総合情報サイト
ナビゲーション＆メニュー 2-01 画像なしでグラフィカルなパンくずリストに 画像を使用せずに、ほぼCSSのみで実装できるグラフィカルなパンくずリストの作り方を解説する。今回はIE8のバグ対策で少しだけjQueryを使用する。 制作・文／佐藤とも子・サチコ（螺旋デザイン） BROWSER IE…8over Firefox…3.6over Safari…3.1over Chrome…10over 01 今回のパンくずリストはCSSとIE8用にjQueryを使用している【1-1】。 HTMLはolタグでパンくずリストを表現する【1-2】。 現在地である最後の項目はaタグではなくstrong でマーキングする。 ul にはパンくずリストを表すid「breadcrumbs」をつけておく。CSSを作る際にはこの id を利用しよう。 【1-1】パンくずリストの作成に必要なファイル構成。 【1-2】パ
保存版！CSS3セレクタの説明書
CSSセレクタについての基礎知識 このブログで何回も説明していますが、念のために説明します。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 セレクタ表の説明には属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 あと親子関係や兄弟関係などもあまり聞きなれないかもしれません。下の階層にある要素との関係が親子関係で、同じ階層にある要素同士の関係が兄弟関係です。 あと、CSS3と聞いて「どうせIE8以下はダメだし使えない」と思う方もいるかもしれませんが、セレクタに関しては簡単に対応できます。 IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」をご参考に。 それ
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.arcanaworks.jp/sample/thumb/
http://daimech.com/css-purupuru/
IDEA * IDEA
フォントサイズの各ブラウザで大きさを揃える - お知らせ - ホームページ制作のガミ(GAMI)
sakurachiro.com
http://www.css-lecture.com/log/css3/css3-border-radius.html