INTRODUCTIONSome ContextOur frontend UI team has put a lot of thought into how we structure our React applications, and after several iterations we’ve discovered patterns that work well for us. We’d like to share what we’ve learned in the process and hear more about how you’re organizing your applications as well. This article is part one of a series, and focuses on Blocks, Elements, and Modifiers

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

実際の現場で使えるstyled-componentsのデザインパターンを紹介します。 なお、styled-componentsのみで完結するパターンについて記述しており、他のライブラリと組み合わせるようなパターンについては紹介しません。 随時更新・追加していきます。 基本パターン styled-componentsは、reactのコンポーネントに与えられたpropsを参照し、propsに応じてstyleを出し分けることが可能です。 const Button = styled.button` background: ${props => props.primary ? 'palevioletred' : 'white'}; color: ${props => props.primary ? 'white' : 'palevioletred'}; font-size: 1em; margin:

TL;DR 実務で意外と使う基本的なものやトリッキーな小技。少ない記述で済む CSS テクニックなどをまとめました。今回は Web 制作に関わるなら、必ずおさえておきたいものや今後使っていきたいテクニック中心です。 画像 １．画像の下にできる隙間をなくす 画像の下に色などを配置すると、わずかに隙間が出来ることがあります。そんな時は親ブロックにline-height: 0;で OK。他には画像に直接vertical-align: bottom;かdisplay:block;を使えます。 css 画像の下にできる隙間をなくす方法 ２．画像の下にテキストが回り込まないようにする 回り込み解除は親要素か以下の例だとテキストにoverflow: hidden;かoverflow: auto;を指定します。IE 対策で zoom 属性 zoom:1;も同時に設定します。 css ３．float を使わ

今年もCSSの進化がすごいです！ 次のプロジェクトに使ってみたくなるようなワクワクする素晴らしいアイデア満載のスタイルシートのテクニックを紹介します。 CSSアニメーションはより洗練され、単に要素を動かして楽しむだけでなく、意味のある動きとしてより効果的に利用されるものが目立ちました。 まずは、アニメーションの表現もここまでできるのかと驚いた「Marvel Logo animation」から。 ※一部は、実際に動作するデモのコードを埋め込んでいます（全部をコードにしたらページが重すぎました）。

2017年も、CSSの進化がすごかったですね。 CSSを使ったアニメーションはより繊細に、vwやvhやcalc()などを効果的に使用したり、レイアウト、ナビゲーション、カードなどもより洗練されて実装されています。 さまざまな素晴らしいアイデアが取り入れられたスタイルシートを使ったテクニックを紹介します。 イラスト: Girls Design Materials 2017年によく目にしたもの一つが、グラデーションです。一昔前は同一色相のグラデーションが多かったですが、最近では複数の色相をし、グラデーション自体も大胆に使用するのが増えています。

In this article, I’ll teach you how to use CSS Grid to create a super cool image grid which varies the number of columns with the width of the screen. And the most beautiful part: the responsiveness will be added with a single line of CSS. This means we don’t have to clutter up the HTML with ugly class names (i.e. col-sm-4, col-md-8) or create media queries for every single screen size. If you wan

この記事はCSS Advent Calendar 2017、1日目の記事として書いております。 こんにちは。モロ（@moro_is）です。 以前、「ユーザーにスクロールを予測させるCSSの書き方について」というエントリーを拝見しまして、「すげー！ 何かリッチな感じがする！」と大変感銘を受けたことがあります。 当該コードがこちら。 See the Pen Scrolling Hints by Responsive Table by Kasumi Morita (@mkasumi) on CodePen. Scrolling Hints by Responsive Table 期待に違わぬ見事な出来なのですが、まだ改善の余地は残されているように思えます。 そう、一番外側のdivです。 このご時世、そうdivに目くじらを立てることもないとは思うのですが、逆にこのご時世だからこその問題があります。

HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと？無理なんだよあきらめな！」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで

Not too long ago, the layout for all HTML pages was done via tables, floats, and other CSS properties that were not well suited for styling complex web pages. Then came flexbox - a layout mode that was specifically designed for creating robust responsive pages. Flexbox made it easy to properly align elements and their content, and is now the preferred CSS system of most web developers. Now we have

iPhone X が発表されて間もなく、ディスプレイの「切り欠き」については至るところでちょっとしたイジリ合戦が始まっています。中には実際に信じてしまっている人もいるほど秀逸なものがありまして、それがこちら。 思わずクスッときてしまいますが（笑）、まあ当然こんなことにはなりません。 iPhone X にはディスプレイの上下左右に iOS の占有領域が存在し、それ以外（アプリのタッチイベントを認める領域）を Safe Area と呼ぶようです。Safe Area の外にある上部領域にはステータスバーとして時計やアンテナのインジケータなど iOS のシステムアイコン等が並び、下部の領域には iPhone X で導入された「ホームバー」が存在することになります。 では iPhone X の Safari で Web サイトを表示した場合に一体どのようになるのか？それを Web 上の情報を元にまと

レイアウトのベースになるグリッドのサイズ、パネルやカードやボタンなどのサイズ、要素間に与えるスペースの段階ごとのサイズ、見出しや本文などテキストの階層ごとの文字サイズなど、Webデザインを設計する際に必要となる数値をサイズを最小のユニットから導き出すオンラインツールを紹介します。 デザインする時にも、HTML+CSSで実装する時にもこういった値ははっきり決めておいて、すぐに確認できるようにしておくといいですね。

2017年9月14日 CSS 要素を横並びにする時に便利なFlexbox（フレックスボックス）。みなさん、使いこなせていますか？今回はFlexboxを使ったちょっとした小技や、ハマりがちなポイントとその回避例を紹介します！ ↑私が10年以上利用している会計ソフト！ 画像とテキストを互い違いに表示 See the Pen Flexbox – row-reverse tip by Mana (@manabox) on CodePen. まずは画像とテキストが入るボックスを作成。それらを囲む .box という div を用意しました。 HTML <div class="box"> <img src="images/iphone1.jpg" alt=""> <div class="box-text"> <h2>見出しが入ります</h2> <p>テキストが入ります</p> </div> </div>

例として以下の様な HTML 構造があったとします。 <body> <!-- 画像解像度: 100 x 100 (px)--> <img src="images/thumbnail.jpg" /> </body> img { display: inline-block; margin: auto; width: 10vw; } img の幅を 10vw と指定しています。基準となるビューポートの幅を vw で表すと 100vw となります。iPhone 5S のビューポート幅をピクセルで表すと 320px な訳ですが、10vw はその 1/10 ということで32px が img の幅となります。つまり 1vw は 1% と同じ長さになります。もちろんリキッドレイアウトにも対応した動きを持っています。 Demo - viewport lengthを開く（このサンプルはChromeブラウザでの

「Web Componentsが来る！CSS設計はどうなる？」―CSSのエキスパートに聞いてみた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 Safari 10.1からCustom Elementsが使えるようになったり、Microsoft EdgeもWeb Componentsの実装を約束していたりと、Web Componentsの足音は刻一刻と迫ってきています。 そんな時代に、Web開発はどう変わるのか？まずはCSS設計というところに着目して聞いてみたいと思い、先日「Web Components時代のCSS設計」という座談会を開催し、エキスパートの方々にお話を伺ってみました。 ゲストのエキスパート紹介 高津戸 壮さん 株式会社ピクセルグリッド フロントエンドエンジニア Web制作会社、フリーランスを経て、株式会社ピクセルグリッドに入社。スケー

The rise of JavaScript frameworks such as React, Ember and recently Angular 2, the effort of the W3C to standardize a web-native component system, pattern libraries and style guides being considered the “right way” to build web applications, and many other things have illuminated this revolution. After this shift in mindset towards building component-based user interfaces, we are now in what we li

<h1 class="has-lines">見出し</h1> <h1 class="has-lines">見出し複数行</h1> <p class="has-lines">本文</p> <p class="has-lines">本文複数行</p> <p class="has-lines"> <button>ボタン</button> </p>