レスポンシブデザインはもはや当たり前になっている今日このごろ。 皆がスマホを使っている今の時代。どんなサイトでもスマホから見られる可能性はあります。 どんなにあなたのサイトのターゲットとしているトラフィックがデスクトップからであったとしても、スマホからのアクセスを無視していいわけありません。 これからホームページを作る場合、余程の理由がない限り、レスポンシブ、スマホ対応にするべきでしょう。 さて、そのレスポンシブで作る時、たまに遭遇する「３」や「７」といった割り切れない値のコンテンツを横に並べる時。今までだと例えばカラムが「３」の場合、 column{ width: 33%; float: left; } と書いていました。 ただこれだと1%余り、場合によっては1pxぐらい空白が出来たりします。 table-cellという方法もありますが、flexboxを使いたい場合はtable-cell

CSS3を使い始めていくと、ぶつかる壁に「三角形みたいに尖った角」をどう表現するかというのがあります。三角形って思ったより難しいです。 まぁ無理しないで、イメージで作ればいいんですけど、ちょっとした装飾だったりすると、ちょこっとCSSで作れると楽な時もあります。 そこで、CSS3で「三角形みたいに鋭角を作る方法」を３つ紹介します。ここで紹介する方法には、メリットとデメリットがありますので、使い分けれるようになるといいと思います。 1. グラデーションを使う こちらの記事でも紹介しましたが、背景を background-size と background-position で4分割して、斜めのグラデーションを使うことで角を落とすことができます。 コード 4分割して、4つのグラデーションでそれぞれを塗ります。この方法では、塗りを使っているので、カスタマイズ性が高いですが、グラデーションを使って

2015年12月07日 ::before,::after擬似要素を使って、 よくあるパターンをつくってみよう。 コーダーのあーだこーだ こんにちは。 コーディングファクトリー部　コーダーの丸山です。 このコーナーでは、コーディングファクトリーの仕事のスタイルや、深堀りしたコーディング技術をメインにお伝えしていきたいと思っています。また、コーダーが各々のコーディング論を語る座談会なども企画してますのでお楽しみに！ 今回は私がこの要素を知ってから（コーディングの）世界観が変わった！というCSSの要素の一つである『::before,::after擬似要素』の特徴とコーディング例をご紹介します。 ::before,::after擬似要素とは 擬似要素（pseudo elements）は、W3Cによると"文書言語(HTML)に記された以上の抽象概念や情報を与えるもの"とされています。::before

世界中の人の心を掴んだ「スプラトゥーン」、文字や細かなパーツをみただけで「スプラトゥーン」とわかる作り込まれた世界観。そのUIデザインプロセスとは？ 「わかりやすさ」と「新鮮さ」の両立を目指して ※ 2018年4月に開催された「UI Crunch #13 娯楽のUI - by Nintendo -」のレポート記事としてお届けします。 「スーパーマリオ」「ゼルダの伝説」「どうぶつの森」など、これまでに数々の大ヒットシリーズを世に送り出してきた任天堂。 そんな任天堂が、新規タイトルとして企画し、開発したのが「スプラトゥーン」だ。 スプラトゥーンはインクを撃ち合うアクションシューティングゲーム。2015年5月にWii U専用のゲームソフトとして発売された。 いわずもがなの大ヒットタイトルとなったが、その大きな特徴は作り込まれた世界観。UIデザインを担当した、橘 磨理子さんは「わかりやすさ」と「新

flexboxを使うと簡単に要素を上下中央に揃えられますが、親要素に背景色や枠線がついていると一手間必要になるので順を追ってサンプルを作成してみました。 実装したいデザイン まずHTMLから HTML <div class="wrap01"> <div class="col01"> <p>テキストテキストテキスト</p> <!-- /col01 --></div> <div class="col01"> <p>テキストテキスト</p> <!-- /col01 --></div> <div class="col01"> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <!-- /col01 --></div> <!-- /wrap01 --></div> .wrap01 { display: -webkit-bo

こんにちは。めぐたんです。 今回からCSSのborderプロパティだけで作る三角形について、全2回に渡ってお届けします。 「borderプロパティだけ」、つまりブラウザの種類やバージョンに依存しないのでもしかすると前々から使われていた手法なのかもしれませんが、CSS3の登場以降CSSだけで色々な表現に挑戦する方も増えたのではないでしょうか？私も最近使う機会がよくあると感じるのでまとめてみました。 .triangle{ border-right: 50px solid transparent; border-bottom: 86.6025px solid #b2ce54; border-left: 50px solid transparent; } なぜこのように「borderだけで三角形ができるのか」を理解するには、borderのある特性を知っておくことがポイントとなります。 border