CSSの作業効率がアップする、少し高度な使い方のまとめ
Webページやスマホアプリをはじめ、レスポンシブ対応ページなどで役立つ、CSSのあまり知られていない仕様や少し高度な使い方を紹介します。 Lesser known CSS quirks & advanced tips 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. 垂直方向のpaddingは要素の幅に対して相対的 02. マージンの相殺が適用されない条件 03. 不透明度でz-indexの積み重ね順序を変更できる 04. CSSのカスタムプロパティ（変数） 05. vertical-align: top | middle | bottom 06.「height: 100%;」の挙動 07. idとclassの詳細度 08. 属性のターゲティング 09. 複数の値を指定する場合、垂直、水平の順番になるとは限らない 10.
CSS Gridを使うならマスターしておきたいauto-fillとauto-fitの違い
CSS Gridって本当に便利だなぁと思う今日この頃ですが、そのなかでも特に注目しているのがrepeat()とminmax()です。この2つのCSS関数を使うとグリッドレイアウトの構築が楽になるだけでなく、CSS Gridだけでメディアクエリなしでもレスポンシブなレイアウトが実現できます。 今回はそのrepeat()で使えるauto-fillとauto-fitという値について。ちょっと違いが分かりづらいのでメモっておきたいと思います。 auto-fillとauto-fitの違い auto-fillとauto-fitの違いは実装例を見るのが一番わかりやすいので、まずはデモをご覧ください。repeat()とauto-fill、auto-fit、minmax()を使ったデモです。 デモはこちら デモページをブラウザで開いてウィンドウ幅を変えてみてください（CSS Gridがサポートされているブラ
細かすぎるけど伝わってほしい私的BEMプラクティス30（ぐらい）
BEMのいいところは、それが何者なのかが明白ということに尽きる。とある要素を見たときに、そのスタイルがどこに書かれているのか、何を表しているのかがクラス名を見ればわかる。手を入れる際も、どこに追記すればよいのか、どれくらいの影響を及ぼすのかの大部分が推測できる。 レスポンシブ・デザインと相性がいいとか、流行りのコンポーネント指向と相性がいいなど、BEMの良さは他にもいくつか挙げられるけど、決定的なのは明瞭さであると思う。 BEMを使いはじめてかれこれ３，４年くらい経った。その間に色々な命名規則や設計思想が登場してきたけれども、今のところは浮気する程の魅力を他に感じることもなくBEM一筋でやってきている。ただし実践するにつけて、より明瞭で破綻しづらい設計を実現するために、様々な制約やガイドを設けてやってきたので、「もともとのBEM」からは多少なり離れているかもしれない。 ただし、それはBEM
Material Design Lite
COMPONENTS Material Design Lite (MDL) is a library of components for web developers based on Google's Material Design Philosophy: "A visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science." Understanding the goals and principles of Material Design is critical to the proper use of the Material Design Lite co
CSSアニメーションで実現！ コピペで使えるマイクロインタラクション - ICS MEDIA
マイクロインタラクションは、ボタンのタップやポップアップの表示、フォーム入力時のアテンションなど、ユーザーの行動やトリガーによって起こるアクションです。単なるアニメーションではなく、ユーザビリティを向上させ、またユーザーに楽しい体験を与えることでWebサイトやサービスの利用を手助けします。 たとえば、FacebookやTwitterの「いいね」ボタンや、タイムラインの更新、新しい通知がある場合のアラートの表示など、さまざまなケースで使用されています。しかし、多様なマイクロインタラクションを一から自作するのは大変手間がかかるものです。 本記事ではコピー&ペーストで導入でき、改変もしやすいCSSで表現したマイクロインタラクションを紹介します。こちらは筆者が制作したもので、商用・個人問わず無償利用できるMITライセンスで公開していますので、Webサイトやコンテンツ制作にご活用ください。 「メニュ
W3Schools.com
W3Schools offers a wide range of services and products for beginners and professionals, helping millions of people everyday to learn and master new skills. Free Tutorials Enjoy our free tutorials like millions of other internet users since 1999
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj
「ネーミングセンスがない…」と思ったときに試してみたい、5つのジェネレーター
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
よこ並びのCSS。
スマホサイトが優勢な昨今、要素をよこ並びにする機会は減ってきているのかもしれないけれど、大きい画面で見るサイトでは、ナビゲーションやタブや、商品一覧など、よこ並びにレイアウトする機会はまだまだあるんじゃないでしょうか。そんな「よこ並びにするためのCSS」も、やり方はさまざま。お馴染みのやつから、新参者まで、順番に見ていくことにします:)。 よこ並び？ そう、よこ並び。 例えばボタンを横一列に並べたり。商品の情報なんかだと、横に3つずつ並べて改行して、多段に並べる場合もありますね。偏（ひとえ）に「よこ並び」と言えど、CSSにはそのやり方がたくさんあるんです:o。 導入 この記事で紹介するよこ並びの方法は以下の通り。 CSSの歴史的な背景から、最初はfloatプロパティを使った方法を紹介します。 float（フロート） 要素を左右へ寄せるためのプロパティ。 後続する文章（テキスト）などのインラ
美しいグラデーションをCSSで実装！配色に使える便利ツールや実例も！
2020年5月18日 CSS, Webデザイン, 便利ツール 背景に動画を使ったWebサイトや、大きな背景画像を使ったWebサイトに続き、最近は画面全体にきれいなグラデーションカラーを用いたサイトを見かける機会が増えてきました。そこで今回はグラデーションカラーをCSSで実装する基本的な方法から、画像に重ねる応用、配色選びに使えるサイト、実例集などを紹介します！ ↑私が10年以上利用している会計ソフト！ CSSでグラデーションを実装 グラデーションは background プロパティーに linear-gradient の値を使って色を指定します。意外と簡単。 body { background: linear-gradient(#05FBFF, #1E00FF); } See the Pen CSS linear-gradient by Mana (@manabox) on CodePen
CSS の値と単位 — CSS Values and Units Module Level 4 （日本語訳）
◎要約 この~CSS~moduleは、 ~CSS~propに受容される共通な値と単位，および ~CSS~prop定義の中でそれらの値と単位を述べるために利用される構文について述べる。 ◎ This CSS module describes the common values and units that CSS properties accept and the syntax used for describing them in CSS property definitions. ~CSSisaLANG ◎位置付け これは、編集者草案の公な複製です… 【以下、この節の内容は，~SOTD-CSSに移譲。】 1. 序論 各種~CSS~propの定義~表tにおける値~定義の欄には、 ~keyword, ~data型（山括弧 `<^c, `>^c で括られて現れる）, および それらをどう組合せ
Projects • Lea Verou
Ordered mostly by release date, with those with the most impact featured first. Please note that this mainly contains open source tools I’ve developed, and is only a subset of my work. It does not contain any of my work designing web technologies, documenting web platform design principles or doing design reviews for proposed web technologies as a W3C TAG member, or any of my early entrepreneurial
Flexboxでどのようにレイアウトをつくるのか、アニメーションで分かりやすく解説 -How Flexbox works
Flexboxの基本原則は、CSSでのレイアウトを柔軟かつ直観的にすることです。 Flexboxでどのようにレイアウトをつくるのか、Flexboxで最もよく使う5つのプロパティがどのように機能するのかをアニメーションで紹介します。 How Flexbox works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxの基本「display: flex;」 flexコンテナの主軸の方向「flex-direction」 flexコンテナの主軸に沿って配置「justify-content」 flexコンテナの交差軸に沿って配置「align-items」 flexアイテムの整列「align-self」 最後に Flexboxの基本「display: flex;」 まずは、div要素を配置した例を見てください。 「displa
clearfixの必要がなくなる新しいプロパティをW3Cが定義、一部のブラウザでもう使える！
clearfixが登場してから早10年が過ぎ、お世話になった人もたくさんいると思います。 そんなclearfixさんの必要性がなくなる新しいCSSのプロパティが、2017年1月25日にW3Cのワーキングドラフトで定義されました。まだ一部のブラウザにしか対応していませんが、たった一つの指定でフロートを簡単にクリアできます。
W3CのCSS3に関する仕様書を全部読んでリファレンスとしてまとめてみた フラップイズム
どうも、くーへいです。 この記事は、CSS3のモジュールをW3Cの仕様書に基づいてまとめています。 CSS2までは1つの仕様書になっていたのですが、CSS3からは個々の機能ごとにモジュール化され、ブラウザはそれぞれのモジュール機能を搭載するかしないかを選べるようになっています。 そんな状況ですので、CSS3とは何かがいまいち明確になっていませんし、各仕様書も10年前に作業終了したものから未だに作業中のものまで多岐にわたっています。 そこで、この記事でまとめてしまおうというわけです。 詳細については各記事を公開次第、この記事にもリンクを作成します。 この記事も随時更新しますので、お楽しみに。 ※各タイトルの日本語名は筆者によるもの。カッコ内の英語名は仕様書のまま。 ※各仕様書の策定状況は記事公開時点（2014年7月◯日）とします。状況確認次第、お知らせします。 ※ブラウザ対応状況は「Can
ウェブサミBlog
ウェブコンサルタントサミット００２「ウェブ業界と女性の活躍」の特典であり 女性支援の活動として、ism（イズム）のジュニアコース 動画視聴（DVD配布）を行っています。 http://webconsultant.jp/summit/002/index.html#m_035 ism（イズム）とは、戦略とマーケティングを一気通貫して学べる会員制のコンサルティングプログラム。 言葉にすると難しいのですが、 社会変化に伴うネット活用をマーケティングなど小手先のテクニックで対応するのでなく、事業の方向付け・戦略から考え、それをマーケティングまで落とし込むことで成果を出す、という経営フレームワークを提供し、学んでいただくコンサルティングプログラムです。 インターネットを活用した戦略とマーケティングの研修会 ism（イズム） http://www.internet-strategy-marketing.
あなたはCSSプロパティ”display”をどのぐらい知っているだろうか？ | POSTD
CSSプロパティの1つである display は、CSSレイアウトに用いるプロパティの中でも極めて重要なものです。よく使われているのは、 block や inline 、 none あたりでしょう。 table や inline-block も、今ではかなり一般的になってきたと言えます。一方、 flex は新たに登場したものです。きっとユーザに気に入られるでしょう。これはレイアウト用に特別に作られたdisplayプロパティです。さらには、この先、 grid がまもなく私たちの秘密兵器となるでしょう（現在、盛んに取り組まれています）。これもまた、レイアウトに特化したプロパティです。 本記事は、当初予定していたよりもずっと長くなりました。ご希望に応じて、自由にサブセクションに飛んでお読みいただければと思います。もし、お時間を割いて全体を読んでいただけるのでしたら、大変嬉しく思います???? 目
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iDangero.us
[CSS]ビューポート幅（vw）に対してレスポンシブ対応の文字サイズを指定するテクニック -Responsive font size![[CSS]ビューポート幅（vw）に対してレスポンシブ対応の文字サイズを指定するテクニック -Responsive font size](https://cdn-ak-scissors.b.st-hatena.com/image/square/0e988256232f0d626498e49d6ce0a326ccb9d200/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201701%2F2017013101.png)
文字まわりのCSSを色々と試してみた | Swings
