なぜタイポグラフィにおいてVertical Rhythm（バーティカルリズム）は重要な手法なのか？ | POSTD
Webのタイポグラフィについて少しでも調べたことがあるなら、 Vertical Rhythm という言葉を耳にしたことがあるのではないでしょうか。タイポグラフィを用いて仕事をする場合、最も重要な手法の1つです。このことについて知って以来、私は自分のサイト全てにVertical Rhythmを使っています。 ある日、Vertical Rhythmの重要性について自分が全く理解していないことに突然気付き、愕然としました。そしてその後すぐに2つの疑問が湧き上がってきました。「なぜVertical Rhythmを使うとサイトのデザインが向上するのか？ 」「自分のデザインを良くするために、Vertical Rhythmから何を学べばいいのだろうか？ 」。 私はこの疑問を解明しようと決めました。その考察を綴ります。 記事の最初にあたって認識を共通にするため、まずはコンテキストについて説明します。 Ve
Milligram - A minimalist CSS framework
Why it's awesomeMilligram provides a minimal setup of styles for a fast and clean starting point. Just it! Only 2kb gzipped! It's not about a UI framework. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code. Hope you enjoy! Do you want to star it, tweet it, or share it with anyone? So do it! This means a lot to me ♥ Getting St
110+ CSS Menu
Welcome to our updated collection of CSS menus for August 2023. This collection includes 37 new items, all hand-picked and free to use. These HTML and CSS menu code examples have been sourced from CodePen, GitHub, and other resources, ensuring a diverse and high-quality selection. Our August 2023 update brings a variety of innovative and aesthetically pleasing CSS menus. Whether you're looking for
早く・それなりの UI を実現する React コンポーネントセット 16 選 - Qiita
これまで、開発者が「早く・それなりの UI 」を実現するために、Bootstrap などの CSS フレームワークが重宝されてきました。 しかし今では、React などのライブラリを使って UI をコンポーネント化するようになってきています。 React であっても、事前に CSS フレームワークを読み込んでおき、クラス名を付与することでこれまでと同じように使うことができます。 ただ、既存の CSS フレームワークは内部で jQuery を使用していることが多いので、React と jQuery を共存させるか、jQuery 部分を自前で実装しないといけません。 そこで React で「早く・それなりの UI 」を作れそうな React コンポーネントセットを手当たり次第に調べてみました。 Note: Web 向け UI の コンポーネントのみとなっています。React Native や
モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI
モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI 川田寛（ピクシブ株式会社） こんにちは、ふろしきです！ 私はHTML5 Experts.jpで、過去2年ほどGoogle I/Oの情報を発信し、Web技術の変化についてお伝えしてきました。振り返るとGoogleは、2014年にモバイルWebの提唱と技術要素の拡大を図り、2015年からは「RAIL（モバイルWebが目指すべきパフォーマンス指標）」や「Progressive Web Apps（アプリのように振る舞うWeb）」といった、モバイルとの親和性が高いWebを作り出すための”考え方”を推し進めました。今年2016年は、さらにそれを踏み込んでいったという感じがします。 今回のI/Oで取り上げるのもそのひとつ。毎度お馴染みGoogle Developer A
CSS Modules 所感 - morishitter blog
CSS Modulesという、CSSの新しい設計概念・指針のようなものがある。 CSS Modulesチームの1人であるGlen Maddern氏が書いた「CSS Modules - Welcome to the Future」という記事の翻訳がバズっていたので、僕がCSS Modulesについて思ったことをまとてみる。「CSS Modulesとは何か」ということは、上記の記事に書かれているのでここではあまり触れない。 CSS Modulesとコンポーネント設計 CSSのルールセットは全てがグローバル定義であり、CSS（Cascading Style Sheets）というスタイルシート言語の最大の特徴である"カスケーディング"という機能により、CSSファイルを見ただけでそのスタイルの影響範囲を理解することは難しい。 CSS Modulesは、CSSのルールセットの影響範囲を、Webアプリケ
rem単位を用いたレスポンシブ対応ページの実装デモ
Tweet rem単位を用いたレスポンシブ対応ページの実装デモ はじめに 本技術のポイントは1つだけです。可変にしたい要素すべてのサイズ指定にrem単位を用いることにより、普通にやると面倒なレスポンシブ対応がfont-sizeのみの変更で済むことです。 このサイトがデモです。 （ウィンドウ幅を狭くしたり右上のチェックボックスを切り替えてみてください。） きっかけ 2015年9月ごろにAppleサイトのサポートページ（https://support.apple.com/ja-jp/HT...）を開いたところ、大きな表示崩れが生じていました。 Appleサイトのバグ(左: IE Edgeでの表示 右: Chromeでの表示) 画像提供元: 情報科学屋さんを目指す人のメモ CSSを解読したところ、要素のところどころにrem単位を用いたサイズ指定が施されていました。 これは単なる凡ミスではないと考
イージング関数チートシート
イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ - CSS Animation
ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ フロントエンド・デザイナーやデベロッパーは、スタイリングや配置、またデザイン性の良いサイトを作成するために CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）を利用します。しばしばページに変化（英: Transition）やアニメーション（英: Animation）を加えるために CSS を利用しますが、まだまだ開発する余地がありそうです。 アニメーションは、訪問ユーザーにとってデザインをよリ理解しやすく、ためになる情報を伝える強力なツールとなるでしょう。ウェブサイト制作で活用でき、よりパワフルな使い方ができる基本原則を今回はご紹介します。 ディズニー社の現場で長年培われた、アニメーションの基本原則 12 個（英: 12 Principles of Animation）
CSS SANS
CSS SANS は、WEB上でデザイン・文字組をするためのプログラミング言語 CSS でつくられたフォント。 WEBの歴史・進化を映し出し、時代に合わせて形を変える、これまでにないフォントです。 CSS SANS is the font created by CSS, the programming language for web designing and typesetting. It is an unprecedented font that reflects history and evolution of the Web, and even changes its own shape. フォントの成り立ちHow the font is madeCSS でできることは、WEBページのレイアウトを整えたり、文字組・文字間の調整をしたりなど、様々。 ただひとつ、「文字自体をデザイン
任意の色からカラートーンのCSS指定をSassの変数で自動的に生成する
使っている色の同色相でトーン違いの色を使うときわざわざ色を作るの面倒だなと思ったので、それを好きな色から作るSassの変数を作ってみました★ 色を選ぶときって皆さんはどうしているでしょうか。カラーチャートから選んだり、ピッカーで都度作る人もいると思います。 私はイメージにあったメインの色を選んだあとでそのトーン違いの色、色相違いの色という風に色の数値をずらすような感じで色を作ります。ですがそれをカラーピッカーでやるのは正確でなかったりしますし、数値を入力していくのもちょっと面倒です…。そこで、Sassの関数を使って数値を自動的に作り、さらにそれをそのまま使えれば良いなと思って作ってみましたー！ デモ どんなものなのか、とりあえずデモです。 See the Pen [Demo] Sass Variables Color tone by You Sakai (@webcre8) on Code
HTML5とCSS3で何ができるかを実際に動かして学べる「The Expressive Web」
「HTML5」や「CSS3」を導入することで、ウェブサイトの作成やウェブデザインがさらに便利になります。そんなHTML5とCSS3で追加されている新しい要素で「何ができるのか？」ということが、実際に試したり動かしたりしつつ学べるAdobeの「The Expressive Web」です。 HTML5 and CSS3 - Adobe - The Expressive Web - Beta http://beta.theexpressiveweb.com/ 「The Expressive Web」は左側に各コンテンツのメニューがあり、1つずつ見ていくことでCSSやHTML5の動作が分かっていくというウェブサイト。一番上の「CSS3 Animations」をクリックすると、青いキャラクターと背景がCSS3アニメーションで動いている様子を見ることができます。CSS3アニメーションはHTMLにキーフ
かわいい系デザインに使えるCSSいろいろ
2015年2月18日 CSS 過去に書いた「かわいい系デザインに使えるフォントや素材、デザインアイデアを集めました」という記事でかわいい系デザインの作り方を紹介しました。今回はかわいい系第二弾！CSSだけでできるかわいい小技をいくつか紹介します。すべてデモ付きなのでイメージしやすいかな？と思います。デモ画面内にある「HTML」「CSS」タブでコードが表示されるので、コピペして使ってくださいね！ ↑私が10年以上利用している会計ソフト！ 目次 キラキラ系テキスト マーカーでラインを引く ステッチ風ボックス リボン 画像をハート型で切り抜く ハートの鼓動 ラブビーム 1. キラキラ系テキスト 某ギャル雑誌（もう刊行されてないのかな？）で毎回見かけていたこの白抜き＋明るい色のシャドウ。CSSでは text-shadow を用いて表現できます。ポイントは文字を白に設定し、シャドウの横位置・縦位置と
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Aligning items in a flex container - CSS: Cascading Style Sheets | MDN
GitHub - picturepan2/instagram.css: Instagram.css - Complete set of Instagram filters in pure CSS
もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
Designing a perfect text frame in CSS
まだ中央寄せで消耗してるの？ - @yoshiko_pg
WordPress › Error
CSSやSVGで実装するローディングアニメーション - NxWorld
