[B! CSS] glat_designのブックマーク

glat_design id:glat_design

CSSに関するglat_designのブックマーク (347)

CSS カスケード入門 - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル背景と境界書字方向の操作内容のはみ出し CSS の値と単位 CSS における大きさの指定画像、メディア、フォームの要素表のスタイル付け CSS のデバッグ CSS の整理評価課題: CSS の基本的な理解度評価課題: 素敵なレターヘッドの便箋の作成評価課題: かっこいいボック
glat_design 2020/10/09
カスケードの説明を人にするとき使えそう

CSS

基礎

解説

翻訳
リンク
CSS fix for 100vh in mobile WebKit | CSS-Tricks
A surprisingly common response when asking people about things they’d fix about anything in CSS, is to improve the handling of viewport units. One thing that comes up often is how they relate to scrollbars. For example, if an element is sized to 100vw and stretches edge-to-edge, that’s fine so long as the page doesn’t have a vertical scrollbar. If it does have a vertical scrollbar, then 100vw is t
glat_design 2020/05/18
ウェブビューでのビューポートの大きさを正しくする。Reset CSSに書いといても良さそう /

Web制作

Webデザイン

CSS

モバイル

海外

スニペット
リンク
HTML + CSSでリアルな炎（アニメーション付）を作る - Qiita
CGなどのパーティクルで炎を作るやり方を応用して、HTMLとCSSだけでリアルな炎のアニメーションを作成しました。完成品はこちら See the Pen Only HTML + CSS Fire by Nishihara (@Nishihara) on CodePen. 概要パーティクルのかわりに大量のdiv要素を用意しています。1個1個はただの円形ですが、それらを上昇させつつ重ね合わせることで、炎のような演出を作っています。div要素大量に作るのが面倒だったのでPugを使っています。
glat_design 2020/02/12
この手の作例でかなりできが良い /

Web制作

Webデザイン

CSS

チュートリアル

Qiita
リンク
やめよう、CSSのシステムデフォルトフォント指定 - Chienomi
序ウェブをブラウジングしていると、嫌というほど見る無意味にひたすらシステムフォントを列挙している同じシステム上に存在すると予想される和文フォントのあとに欧文フォントを指定するという苦痛極まりないフォント指定をしているCSSをよく見かける。ひどい思考停止だと思うのだが、実際には行われているばかりか、ウェブデザイナーを自称する者が平気でそのような指定を推奨していたりする。それについては散々言及したつもりでいたのだが、実際にChienomiでそのこと全体を指摘した記事はなかったので、ここでしっかりと述べておこうと思う。ここではそれがなぜ、どのように問題なのか、どのようにすべきかということを述べていこう。起話の大本としては、MSNのフォント指定がひどくて、Linux上で見るために気を遣ったaliasを書かねばならないが、それ以上に無意味な指定である、ということを指摘した。それ以
glat_design 2020/01/28
様々なウェブサイトのフォント指定について詳しい比較、解説、解釈がされている /

web制作

Webデザイン

フォント

CSS

解説
リンク
MindBEMding と近代 Component 設計の共通点 - Qiita
マークアップ歴の長い方からすれば大した話でもないのですが、フルスタックエンジニアの方々がフロントエンド開発に参入される昨今。CSS指定に関して、備わっていると良い感覚を共有できればと思ったので、メモを書きます。 MindB EMding が解決した課題 Vue.js のスコープ付き CSSについて見てみましょう。本家のドキュメントを引用します。
glat_design 2020/01/21
わりと曖昧に書かれがちなBEMの複雑な場合の書き方を明確に書いてて良い /

Web制作

Webデザイン

CSS

命名規則

解説

Qiita
リンク
font-feature-settingsとカスタムプロパティ
font-feature-sttingsプロパティは便利だけど、値の意図しない上書きが発生しやすいという扱いづらさがある。たとえば﹁ページ全体でloclを有効にした上で、h1要素ではpaltを有効にしたい﹂というようなとき、以下のようなCSSを書いてしまいがちだ。 body { font-feature-settings: "locl" 1; } h1 { font-feature-settings: "palt" 1; } しかしこのときh1のpalt機能タグはbodyから継承されたlocl機能タグに追加されるのではなく、これを上書きしてしまう。つまりh1ではloclが無効になる。これは正しくは以下のように書かないといけない。 body { font-feature-settings: "locl" 1; } h1 { font-feature-settings: "locl" 1, "
glat_design 2019/11/24
こんなに細かくfont-feature-settingsを使ったことないけど、たしかにbodyと見出し要素、くらいの重複は普通にありえる /

Web制作

Webデザイン

CSS

トピック
リンク
アクセシビリティを意識した CSS の書き方 - Frasco
私は約一年前から Web アクセシビリティについて注目し始めました。私にとって何かを学ぶこと最も効率的な方法は他人に教えることなので、ミートアップやカンファレンスなどで発言したり、このトピックに関する記事を書いているわけです。Progressive Enhancement については Smashing Magazine で、Web アクセシビリティに関しては Medium で書いています。この記事は3つ目の Web アクセシビリティ関連の記事です。このシリーズを読むのに特に決まった順序はありませんので、興味があればWriting HTMLwith accessibility in mind や Writing JavaScriptwith accessibility in mind を読んでいただければと思います。私が初めて Web サイトを作った17歳当時、CSS は比較的新しい
glat_design 2019/11/18
アクセシビリティーに配慮してCSSを書くとき注意すること集と参考リンク

Web制作

Webデザイン

CSS

アクセシビリティ

解説

翻訳
リンク
ふりがなのスタイル
サイトのデザインによっては、ふりがなをもうちょっと小さめにしたい場合もあるかもしれませんね。タイトルとかのふりがなでは、頭揃えにしたり、お尻揃えにしたいかもしれません。そんなふりがなのスタイルを調整したい時のためのまとめです。文字サイズと文字間ルビテキストの文字サイズは、デフォルトだとルビベースの半分の文字サイズ（50%）になってる（下サンプル上段）んですけれど、このサイズは、普段のテキストと同様に、font-sizeプロパティを使って調整することができます。下のサンプル（下段）では、ルビベースの30%の文字サイズになるように、指定しています:)。 rt { font-size: 30%; } 一方、ふりがなの文字間を調整する場合はというと、普段のテキストと同様にletter-spacingプロパティで調整しようとしても、上手くいきません…。下のサンプルでは、ルビテキストの文字間を
glat_design 2019/11/18
ルビのCSSによる制御について詳しい /

Web制作

Webデザイン

CSS
リンク
PostCSS Utility Library
glat_design 2019/06/26
PostCSSのミックスインみたいなやつ /

Web制作

Webデザイン

CSS

PostCSS

海外
リンク
CSSアニメーション入門 - Qiita
はじめに CSSアニメーションに関して説明する機会があったため、それらに関してまとめました。﹁CSSは書けるがCSSアニメーションがよくわからん!﹂といった人達向けに書いた記事であり、 CSSアニメーションに関するプロパティを理解できるようになることを目的としています。デモはCodePen上に置いてあります。編集して変化を見てみると理解が深まると思います。デモのJavaScriptはjQueryを読み込んでいないと動かないため、ローカル環境でデモを実行する場合はご注意ください。 CSSアニメーションとは要素をアニメーションさせるCSSの機能。 CSS TransitionとCSS Animationの2つの機能がある。 CSS Transitionとはプロパティに変更があった時に、一定時間でプロパティを変化させる機能。単純な動きのアニメーションを実装する時に利用する。 CSS
glat_design 2018/06/20
よいまとめ /

Web制作

Webデザイン

CSS

アニメーション

解説

JavaScript

Qiita
リンク
CSSアニメーションで円形プログレスバーを作る方法 - Qiita
CSSアニメーションで円形プログレスバーを作ってみました。JavaScriptやSVG、画像は使っていません。サンプル（GIF） HTML .circle { position: relative; width: 120px; height: 120px; background: #333; border-radius: 50%; text-align: center; overflow: hidden; z-index: 1; } .circle::before { content: ""; display: block; position: absolute; top: 0; left: -60px; width: 120px; height: 120px; background: #999; transf orm-origin: right 60px; z-index: 2; ani
glat_design 2018/03/16
ちょっと前に作ろうとしてたけどなるほどー参考になりました /

Web制作

Webデザイン

CSS

アニメーション

UI

解説
リンク
超マイナーなCSSヲタク知識を晒してみる：CSS displayプロパティ値の自動変換 - Qiita
これはDMM.com #2 Advent Calendar 2017 - Qiita 23日目の記事です。昨日は @norinity1103 さんの﹁パターン・ランゲージ﹂のワークショップを社内で実施した件でした。カレンダーのURLはこちら DMM.com #1 Advent Calendar 2017 - Qiita DMM.com #2 Advent Calendar 2017 - Qiita自己紹介はじめまして。DMM.com LaboのÉcouffesと申します。最近のマイブームは吉岡里帆のどんぎつねクリアファイルを30分毎に眺める事です。そのマイブームも、あれです、自動化したいです。はい。はじめに今回 Advent Calendar 参加にあたり、当初は勢い余って﹃超マイナーなCSSヲタク知識を晒してみる﹄と宣言しました。ヲタク知識たるもの、実務に即役立つ有益な
glat_design 2017/12/23
確かにマイナー知識だ /

Web制作

Webデザイン

CSS

解説

Qiita

AdventCalendar
リンク
CSS Transform に関する Tips - KAYAC engineers' blog
はいどうも！バーチャル Youtuber ではない面白法人カヤックのごんです。 CSS Transf orm の Tips をやっていきます。 1. CSS Transf orm は後ろから適用される transf orm: rotate(45deg) translateX(100px); は、45度回転してからX方向に 100px 移動、ではなくX方向に 100px 移動してから、45度回転です。これは百聞は一見にしかずなので、下にデモを貼ります。なんで逆にしちゃったんですかね。 2. CSS Transf orm のパーセント表記は要素の幅に依存する CSS Transf orm Translate のパーセント表記は、 DOM 要素とは異なり、親要素ではなく、自身の幅に対する割合を指します。これも百聞は一見にしかずなので、デモを貼ります。これは、特に要素の中央寄せする際に非
glat_design 2017/12/21
これはなかなか細かすぎて伝わらない系のいい記事だ… /

Web制作

Webデザイン

アニメーション

CSS

解説
リンク
「数が増えてもこわくない！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;を追加し、レイアウ
glat_design 2017/12/20
Quantity Queriesというテクニック、初めて聞いた /

Web制作

Webデザイン

CSS

レイアウト

解説
リンク
三点リーダーの位置をOpenTypeフォントでいい感じにする…… - cockscomblog?
僕は三点リーダー﹁…﹂が好きで、ついつい使ってしまいます……。この三点リーダーですが、日本語では︵仮想ボディの︶中央に並び、欧文ではベースライン上に並べるのが一般的です。一方で昨今のWeb媒体などでは、日本語の文章であっても三点リーダーがベースライン上に並んでいる場合も多くみられます。どちらかといえばベースライン上に並んでいるのに慣れてしまった諸氏も少なくないのではないでしょうか……。基本的に、コンピュータ上で三点リーダーがどの位置に表示されるかは、フォントによって決まっています。三点リーダーのUnicodeにおける名前は “HORIZONTAL ELLIPSIS” といって、U+2026 のコードポイントに割り当てられています。このコードポイントに対応するグリフがどのようにデザインされているかが問題になります*1。実際に複数のフォントを見比べてみるとわかりますが、“HORIZONTAL
glat_design 2017/12/18
locl知らなかったです…font-feature-settings、値が多すぎるし検証しづらい /

Web制作

Webデザイン

タイポグラフィー

CSS

解説
リンク
Font Display プロパティを用いた FOIT/FOUT 最適化 | blog.jxck.io
Update この検証から2年程のちに、 First Paint/First Contentful Paintを重視するため、全ての display プロパティは swap に統一した。その他 WebFont に関連する検証は web font タグにまとまっている。 Intro Web Font 読み込み中の HTML 表示については、ブラウザデフォルトの挙動に依存していた。フォントファイルサイズが大きい場合は、FOIT/FOUT の問題が顕著になり、JSを用いた回避策が利用されることも多かった。これを解決するため、 CSS に font-display プロパティが作成され、実装が進んでいる。各プロパティの違いと挙動、そして本サイトへの適用について解説する。 Loading Web Font Web Font は、特に日本語のように文字数が多い場合、ファイルが大きく
glat_design 2017/12/18
とてもわかりやすい。一般的には本文はoptionalが良さそうなんだけど、個人的にはFOITは待てる派。FOUTのほうが気持ち悪いかも… /

Web制作

Webデザイン

CSS

フォント

解説
リンク
iPhone XのiOS 11.11以下と11.12以上どちらにも対応するWebページの作り方
WebKit公式サイトを含め、多くのWebサイトで解説されている﹁iPhoneX対応のWebページの作り方﹂はiOS 11.11系まで、またはiOS 11.12以上のどちらか一方にしか対応していないため、その両方に対応する書き方について解説します。この記事の内容は﹁スマートフォン時代のWebコーディングスクール﹂の授業資料の一部です。 iPhoneX対応していないWebページはどう見えるのか縦持ちでは特に問題ありませんが、横持ちの場合画面の左右に空白ができてしまいます。たとえば、このブログの記事ページを横持ちで観ると以下の画像のように見えます。このブログの場合、bodyの背景色は濃い茶色、ページ全体を包んでいるwrapper要素に背景画像が設定されています。 iPhoneXのセーフエリアについて iPhoneXのディスプレイを横向きにした時、センサーハウジングや角丸の部分を
glat_design 2017/12/13
そんなに優先度高くはないけど対応したいやつ /

Web制作

Webデザイン

CSS

iOS

トラブルシュート

レイアウト
リンク
15 Responsive CSS Frameworks Worth Considering - Speckyboy Design Magazine
CSS frameworks are pre-written CSS files that help web designers and developers create websites faster and more efficiently. They are perfect for those looking to launch projects without getting bogged down in the details of coding CSS from scratch. In this collection, we’re focusing on smaller, lightweight frameworks. These minimalist frameworks all offer a simpler alternative to more comprehensi
glat_design 2017/12/11
CSSだけでできる様々なUI表現を実現してくれるコード集。アニメーションやボタン、グリッドレイアウト、グラデなど /

Web制作

Webデザイン

CSS

フレームワーク

まとめ

海外
リンク
JavaScript を使わず HTML と CSS だけで Todo アプリを書く方法 - Frasco
HTML と CSS だけで Todo アプリを作りました。TodoMVC︵今回デザインを使用使わせてもらいました︶と違って JavaScript は使っておらず、すべてのインタラクションが CSS で動いています。どういう仕組みなのでしょう？簡単に説明すると、HTML、CSS の一般兄弟セレクタ︵~︶、CSS カウンタ、それから :checked 、:target、:required 疑似セレクタを組み合わせてできています。詳細についてはこれから説明していきます。アプリを試してみるソースを見るできること‥ Todo の追加︵最大50件︶ Todo の完了 Todo の削除フィルタリング︵完了・未完了︶残りのアイテム数をカウントする空文字の追加を許可しないできないこと‥ ページリロード後の永続性の維持﹁すべての Todo を完了にする︵Mark all as done︶﹂
glat_design 2017/12/01
面白かった。ここまでがっちり頑張ったCSSのTodoは初めて見たかも /

Web制作

Webデザイン

CSS

CSSProgramming

チュートリアル

翻訳
リンク
フォーカスリングの役割とマウスユーザーに向けた対応について - yuhei blog
ブラウザは、フォーカスされた要素を可視化するためにフォーカスリングを実装している。青や黒のフォーカスされた要素を囲う枠線のことだ。outlineプロパティで表現される。これは主に、ウェブページをキーボードで操作可能にするためにある。例として、ウェブページ上のボタンをクリックするという場面を想定する。キーボードによる操作では、まず、Tabキーなどによってフォーカスの位置を移動させながら、フォーカスを目的の要素まで辿り着かせる必要がある。その上で、スペースキーやエンターキーによってクリックに相当するアクションを実行する、というような流れになる。このような操作を行うためには、どの要素がフォーカスされているかを、ユーザーが視覚的に認識できることが前提になる。フォーカスリングが実装されているおかげで、開発者は適切なマークアップを行うだけでフォーカスを可視化することができる。しかしながら、マウス操
glat_design 2017/11/21
必要ない人には見せないべきかあ、なるほど確かに /

Web制作

Webデザイン

UI

CSS

解説
リンク
1 2 3 4 5 6 7 8 9 10 次のページ