CSS イベント「Back to Basics」に行ってきた - I'm kubosho_
CSSイベント「Back to Basics」というのが昨日(2015/8/30)あって、そのイベントに発表者として参加してきました。 自分の発表資料は以下のものとなります。 background-(image|size) の深みへようこそ from Shota Kubota CSSイベント「Back to Basics」2015/08 - Togetterまとめを見たり、懇親会で話した限りでは、好評だったようで良かったです。 あと、Togetter を見ると分かるのですが、今回のイベントは参加してくれた方々がツイートをたくさんしてくれました(本当にありがとうございます)。 そのおかげか、Twitter のトレンドにも入っていました(曜日と時間帯的に入りやすかったというのもあるかもしれないですが)。 準備 1ヶ月弱前から発表に向けて準備をしていて、まず資料のアウトラインと詳細をほぼ同時並行
基本の前の基礎知識 - Back to Basics CSS 2015-08-30
注意事項 これは発表資料で、普通のウェブページではありません。 環境によっては正常に表示されないかもしれません。 この資料の内容が正しいとは限りません。 正しく理解するために、ご自身で仕様を読むことをお勧めします。 韓国語版（한국어） Translation by 조은 August 30, 2015 國仲 義則 Yoshinori Kuninaka （a.k.a. Matori / @ub_pnr） 株式会社シフトブレイン 目次 CSSの基本構文 プロパティーの仕様と、その値の構文 型と単位 関数表現 仕様を覗いてみてみよう 仕様はどこにあるの？ CSS current work & how to participate CSS3の日本語訳集 - 血統の森 web実験小屋 日本語訳を見るときには、原文と一緒に見ることをお勧めします。 また、誤訳などを見つけたら翻訳者に連絡を取ってみるとよ
楽しく役に立つCSSのプロファイリング | POSTD
私はここ最近、いわゆるシングルページWebアプリケーションのパフォーマンスの最適化に取り組んでいます。そのアプリケーションは非常に動的かつインタラクティブで、新しいCSS3の利点が詰め込まれたものです。単に角丸やグラデーションの効果にとどまらず、影やグラデーション、要素の変形がふんだんに使われており、加えてtransition効果（時間的変化）や多彩な半透明色、疑似要素をベースにしたCSSの巧妙なトリック、それに実験的なCSSの特徴がちりばめられています。 分析する際には、Javascript/DOM側のボトルネックだけではなく、CSSの領域にも踏み込んでみました。上に挙げたすばらしいUIの要素が、パフォーマンスにどのような影響を及ぼしているかを見たかったからです。このアプリケーションのベースにあるJavascriptのロジックは以前（表面的な装飾のないバージョン）からさほど変わってはいま
SVGアニメーションの現状 | POSTD
SVG（Scalabe Vector Graphics）の世界は魅力的です。そして、これを使ってできることや、これに用意されているオプションには圧倒されてしまうほどです。 SVGはXMLベースの2次元ベクター画像形式で、インタラクティビティとアニメーションをサポートします。言い換えると、SVGは図形やグラフをレンダリングするXMLタグで、その図形やグラフはHTMLの構成要素がそうであるように、インタラクトしたりアニメーション化したりできるのです。 SVGに関して、私がよく受ける質問の1つは、SVG画像のアニメーション化についてです。そのやり方だけではなく、それが何なのかということも聞かれます。ですから、現在の（そして未来の）SVGアニメーションの状況を見ながら、あなたが苦痛を感じずに行えるようなヒントやツールについてお話ししましょう。 同期マルチメディア統合言語、またの名をSMIL（Syn
昨今のCSS設計事情からみるCSS設計のあり方とは
本記事は2015年1月に開催されたHTML5 Conferenceでお話させていただいた、 「Beyond CSS Architecture」というCSS設計のセッションをフォローアップする記事です。 本記事では、このセッションの概要と補足、またセッション中に説明できなかった点などについて書いていきます。 ※当日のセッションの動画・スライドも公開されているので、文末からご覧ください。 CSSの難しさと、昨今のCSS設計事情 この近年、CSSにおける設計論というのが話題に出てくるようになりました。筆者も拙著『Web制作者のためのCSS設計の教科書』を書いたり、各地でCSS設計をテーマとした講演をする機会が多くありました。 CSSの難しさというのは、石本氏によるCSSコードの評価についての記事にも書かれているのですが、CSSは良くも悪くも厳格なコード規約は少なく、ただ宣言的に書けばいいだけです
[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説
CSSでのフォントサイズの指定方法をその単位とそれぞれの相違から、レスポンシブに適したフォントサイズの指定方法までをやさしく解説します。 CSS Font Sizing 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 CSSでのフォントサイズの指定方法 各指定方法の特徴 レスポンシブに適したフォントサイズの指定方法 CSSでのフォントサイズの指定方法 CSSであなたがフォントのサイズを指定するには、いくつかの方法があります。大きく分けると、絶対値（absolute）と相対値（relative）の二つです。 絶対値（absolute） 絶対値はそのサイズが固定されており、その指定を受けたフォントはそのサイズで表示されます。これは他の要素に影響を受けません。 相対値（relative） 相対値はサイズ自体の値を持っていません。サイズは親要
![[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説](https://cdn-ak-scissors.b.st-hatena.com/image/square/a1756c6abf56af6fcc3bd951dc8836bd403779c8/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015060501.png)
あなたが知らないかもしれないCSSの7つの単位について - Coding Design's Tumblr
CSSでpx, %, emって単位は使っているけど、新しく追加された単位はどうでしょうか。 レスポンシブWebデザインのサイトやモバイルデバイスのサイト・アプリを作るようになると、もちっと便利に使える単位がないのかしらと思うところです。 そこで、CSSの新しい単位についてよくまとめてくださってる投稿があったのでご紹介します。 紹介されている単位は7つです。 remvh と vwvmin と vmaxex と chremまずはみなさんご存知の em に似ている rem から見て行きましょう。 em は指定されているフォントサイズを 1em とする単位です。 下記のように使いますね。 body { font-size: 14px; } div { font-size: 1.2em; } // 1.2em は 14px * 1.2 = 16.8px となるem で指定する値は親要素の値に対する比
あまり知られていないCSSの12の事実(続編) | POSTD
1年以上前に、私は最初の 12 Little-known CSS Facts（あまり知られていないCSSの12の事実） を発表しました。SitePointで最も人気の高い記事となりました。この記事を書いた後も、私はCSSのアドバイスやちょっとした情報の収集を続けました。だって、大ヒット映画も必ず続編を制作するじゃないですか。 注釈 SitePoint/ Natalia Balska によるイラスト それでは、早速今年も開発のヒントになる12の事実について話しましょう。もちろん、中にはもうすでにご存じのこともあると思いますが、この中で初めて知ったという事実がありましたら、コメントでお知らせください。 1. border-radius プロパティに”スラッシュ”シンタックスを使用できる事実 このプロパティについてはSitePointに4年以上 前に書いた のですが、この機能が存在することを、未
【CSS設計】拡張や修正に強いコンポーネントをマークアップする6つのテクニック | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 皆様、CSS書いてますでしょうか。 今回はSMACSSやBEMをある程度ご存知の方向けに、コンポーネントをマークアップする際に役立つテクニックと題して、「SMACSSを使う際に役立つテクニック」「BEMを使う際に役立つテクニック」「さまざまなシーンで役立つテクニック」をご紹介したいと思います。 なお、SMACSSやBEMをご存知ない方は、本記事の参考文献＆記事のリンクが参考になると思いますので、はじめにこちらをご参照いただければと思います。 ※「コンポーネント」という言葉は、使われるシーンによってさまざまな意味になりえますが、本記事においては「Webページを構成するパーツ」と定義させていただきます。 SMACSSを使う際に役立つテクニック編 まずはSMACSSを使う際に役立つテクニックからご紹介します。
Railsのプロジェクトリニューアルの機会にHTML/CSSのコーディング規約を作ってみた - Qiita
はじめに 今回、社内でフロントのまるまるリニューアル(RailsのViewは基本的に全て変更)があるので、CSS設計やディレクトリ構成などをどうするか色々まとめてやってます。 コンポーネント化を意識したり、どういうルールを適用したりするかをまとめていたら結構な量になったので共有しようと思った次第です。 BEMやSMACSS、FLOCSSなどを導入したけどそれだけじゃどうも綺麗にならない、だったりどこのファイルに何を書いていけばいいかいまいち分からない…といった方には参考になるかと思います。独自で作ったものであることと、リニューアルの初期段階でこれから問題がいくつか発生する(すでに発生していくつか改善しています)可能性があることを踏まえてご覧いただければと思います。不明点や気になる点はコメントで聞いていただければ幸いです。 以前、基本的なものは僕が普段使っているCSSのルールをコーディング規
【RWD ーレスポンシブー】右にできた謎の余白を消す方法 | バシャログ。
こんにちは。mackyです。 じめじーめな日々のせいなのでしょうか。6月がとても長く感じます。 今日は右にできた謎の余白を消す方法をまとめます。 そもそも余白って？ できあがったサイトをipadやiphoneで表示確認したとき、以下のような余白ができたことはないですか？ 先日、携わった某サイトはiphoneとipadで表示チェックを行ったのですがその際右のスクロールバーの横に白い余白ができてしまいました。ヘッダーも背景画像もそこで切れてしまいます。その時色々試してみて解決した方法をメモしておこうと思います。（サンプルコードは一部内容を変更しています。） サイトの大まかな構成としては、bodyにwidth:100%;。 内側（ipadおよびiphoneで見切れないで表示させたい幅）sectionに固定サイズの1024pxを指定しました。 ipadとiphoneでみてみたら… (※下の図はip
Pixate
Saying farewell to Pixate. When we launched Pixate, our mission was to change the way mobile apps were prototyped. We joined Google just over a year ago to continue our mission, and to pursue a broader vision of changing the way products were designed and built. While a lot of the ideas we’ve been developing could work inside the Pixate framework, we believe we can have a larger impact if we move
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSで固定比率レイアウト - @yoshiko_pg
http://mtakai.github.io/slide/20150830/table-relative/
UAスタイルシートと リセットCSS
CSSイベント「Back to Basics」2015/08
cssbuttons
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
印刷用CSS(@media print)の設定とデバッグ方法って? HTMLの印刷崩れを解決 | 初代編集長ブログ―安田英久
CSSを書く、設計する時に参考にしておきたいCSSのガイドライン・スタイルガイドのまとめ
