「数が増えてもこわくない！Quantity Queriesの紹介」というセッションでCSS Talk Vol2 で登壇しました | 活動 | mkasumi.com
CSS Talk vol.2に登壇しました。とても雰囲気のいい勉強会で、話す側としてもとても楽しい時間を過ごせました。 今回は、CSSネタということで、私自身がCMSを作っている会社に所属しているので、自己紹介ついでに動的コンテンツに対応したレイアウトを提供できる「Quantity Queries」についてご紹介しました。 ざっくりどんなことができるのかというと、たとえば、li要素の幅を25%幅にしていて、要素が4つしか入らないCSSの設計になっていたとします。そんな場合にCMSからお客さんが5つめのコンテンツを投入すれば普段であれば当然レイアウトが崩れてしまいますが、Quantity Queriesは解決することができます。どうやって解決できるのかというと、たとえば要素が5つ以上になったときにli要素の幅をautoにして、さらにdisplay:inline-block;を追加し、レイアウ
CSS禁則処理 - html/css-tips - tamasally - Ruffnote (ラフノート)
デフォルトの場合 半角英数字の文字列がboxからはみ出す。 句読点が場合よっては先頭に来ることもある。 禁則処理で望むこと 句読点が先頭で始まらない。 boxからはみ出ない。 参考サイト http://blog.sakurachiro.com/2010/06/control-break/ http://nanto.asablo.jp/blog/2013/06/18/6869571 各プロパティの説明 overflow-wrap: break-word;(CSS3草案なのでこちらを使うのが良さそう) word-wrap: break-word; 日本語：単語の途中で改行が入る。 英語:基本入らない 日本語の場合は句読点が先頭で始まらない。 冒頭のいわゆる禁則処理的な動きになると思われる。 bodyに直接指定してしまってもよさそう。 https://developer.mozilla.org/
特徴で使い分けたいCSSレイアウト手法 - CSS Grid, Flexbox, floatの使い分け - ICS MEDIA
ウェブページのレイアウトを作る手段には、CSSのGrid Layoutグリッド・レイアウト、Flexboxフレックス・ボックス、floatフロートなどがあります。 CSSのGrid Layoutはウェブページのレイアウト構築に役立ちます。従来floatやFlexboxでつくっていたようなレイアウトは、Grid Layoutで置き換えられるでしょう。しかし、すべてをGrid Layoutで置き換えるのが良いとはいえません。 float、Flexbox、Grid Layoutには、それぞれ特徴があるためです。特徴を使い分けていくことで、保守性の高いコーディングができるでしょう。本記事では、float、Flexbox、Grid Layoutの特徴と使い分け方をサンプルを通して紹介します。 Grid Layoutの基本については前回の記事『CSS Grid Layout入門』を参照ください。 この
「シズル感」と「読みやすさ」ってどうやってデザインで解決する？お菓子専門Webメディアのリニューアルで使った手法 | THE BAKE MAGAZINE
「シズル感」と「読みやすさ」ってどうやってデザインで解決する？お菓子専門ウェブメディアのリニューアルで使った手法 こんにちは、BAKEのデザイナー井手口です。 前職では、グラフィックとウェブデザインの両方を経験できる制作会社に所属していましたが、以前から興味があったブランディングデザインを行いたく、今年の4月からBAKEではたらいています。 BAKEに入ってからは、店舗ブランドで使っている原材料のオリジナルブランド「011」のパッケージ開発や、店舗ブランドのイベント用LP作成やPOPなどのデザインを行いながら、同時進行で進めていたお菓子専門のウェブメディア『CAKE.TOKYO』を8月上旬にフルリニューアルしました。 リニューアルの経緯はCAKE.TOKYOのこちらの記事で書いたので、今回は、サイトのデザインについてデザイナー目線から説明しようと思います。 → CAKE.TOKYO 雑誌の
誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック
【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・
overflow: overlay; - dskd
公開日2014-07-17タグCSSGoogle Chrome の Developer Tools で要素のスタイルをいじっていたら、overflow プロパティに overlay なる値があることを知った。インターネットをざっと検索した感じだとどうやら Webkit 系のみで使えるようだ。 W3C の overflow の仕様（CSS2.1 Visual Effects、CSS Overflow Module Level 3、CSS basic box model）を見ても overlay 値に関する記述はない。 検索結果を追っていくと、2009 年に Webkit Bugzilla へ投稿されたoverlay 値に対する提案が見つかる。標準仕様になく Webkit でしか動かないなら削除するか-webkit-overlay のようにプリフィックスをつけてはどうかという主旨だが、やりとり
Appleに学ぶ、横スクロールナビを組む時のCSSメモ - Qiita
やりたいこと 横スクロールするナビを組みたい … ① スマホ(iOS)で慣性スクロールにしたい … ② スクロールバー非表示にしたい … ③ ②と③を両立させたい ① 横スクロールするナビを組みたい スマホサイトでよく見る上図のようなナビゲーションを組みたいとします。 今回は、一つ一つの li を table-cell にし、水平に並べつつ、ウィンドウからはみ出た分を overflow-x: auto; で横スクロールさせるシンプル組み方で考えます。 デモ → https://s.codepen.io/skwbr/debug/QjaBLV/NjrYzwNZpgwA (コードは下記にて) ② スマホ(iOS)で慣性スクロールにしたい overflow: auto; をかけている要素に下記を指定すればOK。 ③ スクロールバー非表示にしたい webkit独自拡張の ::-webkit-scro
モバイルのUI要素を視覚的に分けるための６つのガイドライン
アプリのデザインは一見すると簡単そうかもしれませんが、実際プロトタイプに取りかかってみるとその難しさに気づきます。どのようなデザインにするか判断に迷いだすと、最初はシンプルに思えたことも複雑になり始めます。 例えば２つ以上のコンテンツを視覚的に分けるというシンプルなタスクでさえ、的確な判断をするのが難しいときもあります。 今回はそんな細かいUI要素の一つである「区切り線」やUI要素の「区分け」について見ていきたいと思います。 従来の区切り線 水平（または垂直）の線を使用すると、関連するコンテンツのセクションの間に必要となる視覚的な区分けを作ることができます。 この仕切りによってページにリズムと階層をつくり、コンテンツがどのように編成されているかユーザーが理解するのに役立ちます。 区切り線の種類と使い分け フルブリードディバイダー フルブリードディバイダー（余白なしで横幅100％の区切り線）
CSS Containment の制約と効能について覚え書き
ある要素内の状態による外界への影響を封じ込めて最適化を促す CSS Containment Module で定義される contain プロパティは will-change と同じようにブラウザが処理を最適化するために開発者から提供できるユーザーエージェント向けヒントとして機能します。 ヒントの目的はcontain の対象要素が親兄弟に影響を及ばさない独立した部分木であることを宣言し、各種の影響を contain の対象要素の中に封じ込めることです。 使うときは contain プロパティに既定の値として用意された size | layout | style | paint | content | strict のいずれかを指定します。content と strict は複合指定のエイリアスなので、本文では size layout style paint の4つについて個々の説明をします。
flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita
注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f
★★[CSS]フッタを最下部に表示する5つのテクニック-コンテンツ量が少ない時は最下部に、多い時は成り行きに | コリス
高さが分かってるフッタ、高さが不明なフッタをコンテンツ量が少ない時は最下部に表示、コンテンツ量が多い時は成り行きで表示させるスタイルシートのテクニックを紹介します。 ちょっと前のテクニックから、calc()やflexboxなど最新のテクニックまで、5つの方法を紹介します。 Sticky Footer, Five Ways 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づき、翻訳しています。 1. ネガティブマージンを使ってフッタを最下部に実装 その1 2. ネガティブマージンを使ってフッタを最下部に実装 その2 3. そのままのHTMLにcalc()を使ってフッタを最下部に実装 4. 高さが不明なフッタを最下部に実装(flexbox) 5. 高さが不明なフッタを最下部に実装(CSS Grid Layout) 1. ネガティブマージンを使ってフッタを最下部に実装 その1
![★★[CSS]フッタを最下部に表示する5つのテクニック-コンテンツ量が少ない時は最下部に、多い時は成り行きに | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/d7aa23551455018127a28922baa59c9101c06511/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016061701.png)
Solved by Flexbox — クリーンでハックのない CSS
イントロダクションCSSには長らく適切なレイアウトメカニズムが不足していました。トランジション、アニメーション、フィルタ、これらはすべて素晴らしくて有用な言語への追加機能ですが、しかしWeb開発者が不満だった、永遠に続くようにも思われた主要な問題に対処するものではありませんでした。 Flexboxに感謝します。ついに我々は解決方法を手に入れました。 このサイトはCSSフレームワークではありません。その代わり、CSSだけでは解決するのが難しい、あるいは不可能だった問題が、今やFlexboxでとても簡単になった事例のショーケースとなることが、このサイトの趣旨です。また、Internet Explorer 11の最近のリリースとSafari 6.1により、今やすべてのモダンブラウザがFlexboxの最新仕様に対応しています。 以下のデモをご覧ください。Webインスペクタでスタイルを眺めるか、また
大きな背景画像を使った魅力的なWebサイトを作ろう
2014年9月9日 CSS, Webデザイン 以前このブログで背景に動画を使ったWebサイトの作り方を紹介しましたが、やはり動画を準備するのは少しハードルが高いと感じる人もいますよね。そこで今回は導入しやすく印象に残りやすい、大きな背景画像を用いたWebサイトの作り方を紹介します！ ↑私が10年以上利用している会計ソフト！ 背景に大きな画像を使うメリット・デメリット 大きな背景画像のメリットは、なんといってもその迫力です。言葉を使わずとも、そのWebサイトを通じて伝えたいイメージをストレートに表現できます。その写真が高画質で、クオリティが高いほど印象にも残りやすいので、近年海外を中心に多くのサイトで用いられている手法です。 しかし、いくつかの注意点をおさえておかないと、どんなに素敵な写真であっても効果が半減してしまいます。ひとつは画像が大きければ大きいほど、ページの読み込みに時間がかかって
横にはみ出すナビゲーション
今回(2014年9月)のAppleのウェブサイトのリニューアルにはいくつもの興味深い点がある。ナビゲーションの二本線とバツ印が共にインラインのSVGなことなどもそうだし、多くのポーションがモダナイズされたにも関わらずPrototype.jsを継続利用したこともすごく気になる。その中でも一番気になったのは狭い画面向けの横にはみ出すナビゲーションだ。 これまでの通常は隠されている狭い画面向けのナビゲーションの多くは、次の3つに大別されていた。 ドロップダウン オーバーレイ ドロワー 極稀にアイコンのみのコンパクトに横へ並べたものもあったが、いずれの場合もナビゲーションの項目は縦に並んでいることがほとんどだ。一覧性に富み、アクセス性が高く、ユーザーの学習コストも低い。 これに対して横にはみ出すナビゲーションは、項目を画面外にはみ出すように横に並べ、スワイプでスクロールして探させるという形のものだ
[実機未検証]Androidでp要素の幅が狭まる時の対応策
悩み Androidのエミュレータで確認した際に妙な状況に遭遇。原因と対策の調査でえらく時間を喰いました…。 根本的な解決策は不明ですが、ぜんぜんValidじゃない回避策が見つかりましたので記事にします。なお、実機未検証ですので、そもそも実機でこの問題が起きているかどうかからあやふやです。 この点、ご留意くださいませ。 [2015.2.1追記]— viewportが原因かもしれない件を記事末尾に追記 — [2014.4.3追記]— とある方から解決方法の１つを教えていただけましたので追記します。 詳細は下にある「透過gifを使う」の項目をご覧下さい。 — [2013.10.30追記]— この件は何度かTwitterにて「これはダメな方法では」と指摘されていまして、私自身も上記冒頭に上げているようにダメな方法だと思っています。しかしながら、とある方にご協力いただいて解決法を探っていただいたこ
![[実機未検証]Androidでp要素の幅が狭まる時の対応策](https://cdn-ak-scissors.b.st-hatena.com/image/square/f6dd84297ff932a2155d9205a82b720872f49ec7/height=288;version=1;width=512/https%3A%2F%2Fwebutubutu.com%2Fwp-content%2Fuploads%2F2013%2F02%2F130211_01.png)
【複数行にも対応】長過ぎる文字列を省略して末尾を三点リーダー（…）にする方法いろいろ | PSYENCE:MEDIA
ランディングページといったコンテンツもレイアウトも全て決め打ちで成立するようなものはさておき、多くの Web サイトおよびアプリケーションは、いかなる分量のコンテンツであろうと柔軟に受け入れて表示出来るように設計・デザインされなくてはなりません。 しかし、全ての文字列を表示するには長過ぎてレイアウトが崩れてしまうといった場合には、何らかの方法で文字列を省略する必要があります。一昔であれば Ruby や PHP、Java などサーバーサイドで文字列を切り捨てるなどの加工をしてからフロントエンドに返すという方法が常套手段として用いられていました。しかし、これでは昨今のワンソースによるレスポンシブデザインといったスクリーンサイズに応じて動的に表示領域が変わるようなデザインに対応しきる事が出来ません。PCサイズの表示領域に適した文字数を返したとしてもモバイルサイズの表示領域がそれと同じとは限りませ
ドロワーというナビゲーションの再考 | UXデザイン会社Standardのブログ
以前Facebookのアプリケーションで採用されたことを皮切りに、ここ数年で多くのアプリケーションで使われることになったドロワーというナビゲーションについての考察です。 最近ネット上でも話題になっており、安易なナビゲーションへの採用が見直されているされているインターフェイスでもあります。しかしドロワーの必要性について疑うことは良いのですが、表面的にただドロワーを使ってはいけないという情報に左右されていては、安易なドロワーはなくなったとしても、次に安易なタブなどが量産されるということが予測できます。 UIに関わるデザイナーとしては、なぜドロワーが適していないのかということと同時に、どのような状況下であればドロワーが適しているのかは考え続ける必要があるでしょう。 ドロワーの歴史 まず名前の由来としては、たしか2013年にAndroidでナビゲーションドロワーのためのフレームワークが公開されたこ
CSSで2カラムを作ってみる - kojika17
CSSで2カラムといっても、その作成方法は様々です。 多くのパターンを理解することは、CSSに柔軟性を持たせることに、つながります。 1. floatを利用する 基本的な方法です。 子にfloatを利用すると、灰色の背景を敷いている親の高さが算出できなくなるため、背景色が出なくなったり、レイアウトが崩れたりします。 これらの問題を解決するには、clearfix か overflowを利用する必要があります。 .parent { overflow: hidden; } .child1 { float: left; width: 240px; } .child2 { float: right; width: 128px; } 2. floatとmarginを一定方向にかける 片方にfloat、片方はfloatをかけた方向に隣の要素の横幅以上のmarginをとる方法です。 floatのかかってい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog
