The State of CSS 2020
Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you've been writing CSS for over a decade, CSS in 2020 looks nothing like what you were used to. Instead of breakpoints, we can now leverage CSS Grid to make dynamic, responsive layouts that adapt to any viewport size with fewer lines of code. Instead of relying on global stylesheets, CSS-in-JS lets u
AMPに適用するCSSを設定できるようにしました - はてなブログ開発ブログ
はてなブログでは、AMP（Accelerated Mobile Pages）用のCSSを設定できるようにしました。AMPで記事が配信される際のデザインをカスタマイズできます。 ※はてなブログのAMP配信は、有料プラン「はてなブログPro」に加入しているユーザー向けのベータ版機能です。詳細は関連ヘルプなどをご参照ください。 記事をAMPで配信しているブログの「デザイン設定」画面では、「スマートフォン」タブの「詳細設定」に「AMP用CSS」欄が表示されます。ここにCSSを直接記述してください。 AMPでの表示は、記事編集画面（PC版）の「プレビュー」タブで、「スマートフォン（AMP）」を選択して確認できます。詳細は下記の関連ヘルプやプレビュー機能のリリース告知をご確認ください。 ※AMPのCSSにはいくつかの制限があります。本機能はAMPおよびCSSの知識を持っている方を対象しており、デザイン
FLOCSSを使ってCSSファイルを20,000行から9,000行にした話 - Qiita
入社して僕が最初にアサインされたのがこのプロジェクト。 サービスをスタートさせたのは今年の２月。最初は外注でとりあえずサービスを作ることに集中していたらしい... その結果、どのスタイルがどこに作用するか全く分からないCSSの魔境でした。 これでは簡単なページを追加するにも一苦労。 そこで、20,000行あるCSSファイルのリファクタリングに踏み切りました。 当時の問題 スタートアップのサービスなのでもっと機能を追加したり、変更したりしたいと言う要望は日に日に大きくなっていました。 一方で、実際に機能を作ったとしてもそれを view に反映させるのも日に日に苦しくなっていました。 僕たちを苦しめていた理由は以下の通りです。 どこにスタイルが作用しているか分からないので、CSSを安易に変更ができない。 新しい部品を付け足す時にCSSの影響範囲を考慮しなくてはならず、プロダクトのUI変更が困難
CSS： marginの正しい理解 - kojika17
toggle()や変数、calc、:matchなど、今までにないCSSプロパティ、セレクタが提案・実装されて、CSS3, CSS4も楽しくなってきています。 border-radiusや、box-shadowなども、古いAndroidブラウザ以外なら、prefixなしで使える状況も増えてきました。 最新技術は、これから必要になってくるかもしれませんが、基本も大切です。 float や position など、CSSコーディングを悩ませるタネはいくつもありますが、今回はその中でも私がCSSで一番難しいと思う margin について書きます。 「marginはバグが多い」という声をたまに聞きます。 しかし話を聞いてみると、正常な動作をバグと間違って認識しているケースもあります。 marginを正しく理解することによって、効率的なレイアウトを構築できますので、基本的な内容ですが、読んで頂ければ幸
HTMLにimgタグで書くべき画像、CSSで表示させるべき画像 | アユダンテ株式会社
imgタグは画像のパスやalt属性のテキストなど、意外とファイルサイズを膨らませる原因となりやすかったりします。 SEOを意識してHTMLを最適化させる場合、HTMLのファイルサイズ軽減も一つの目標となります。その目標を達成するためにも、文書構造上「なくても文書として困らない画像」はHTMLのimgタグではなく、CSSのbackgroundプロパティなどで表示させましょう。 なんでimgタグをHTMLから削るの？ HTMLではなくCSSで表示させるべき画像 なんでimgタグをHTMLから削るの？ imgタグをHTMLに設置する場合、表示させる画像のパス（URI）や代替テキスト（alt属性）の設定など、意外と文字数を食うタグだったりします。 特に画像が大量に表示される商品一覧ページなどのHTMLを見ていただくと、imgタグだけでけっこうなボリュームがあるのがわかると思います。 文字数はそのま
画像の読込完了まで、ローディング画像を表示する方法 [ホームページ作成] All About
画像の読み込みが完了するまでの間、画像が表示される予定の領域に、右図のような「読み込み中」であることを示す「ローディング画像」を表示させてみてはいかがでしょうか。 ローディング画像が表示されていると、「そこに確実に何かが表示されるはずだ」ということが伝わり、表示の完了前に読み飛ばされてしまうことを防げるかもしれません。 このようなローディング画像の表示に、スクリプトは不要です。小さな画像を用意し、短いスタイルシートを記述するだけで簡単に実現できます。 画像が読み込み途中であることを示す「ローディング画像」を表示するには
![画像の読込完了まで、ローディング画像を表示する方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/fcf800f066d72666d184b9c3c1a775248262b4c1/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F3%2F1%2F0%2F5%2F3%2Ftopimg_large.jpg)
CSSになり損ねた言語たち | POSTD
TeXやMicrosoft Word、あるいはその他の汎用的なテキスト処理環境では簡単に実現できるような見た目に自分の文書を似せようと頑張る（文字どおり）無数の人たちに対して、 “悪いけど、うまくいかないよ” と繰り返し言い続けるのは、実際のところ、この1年間、私にとっては継続的な楽しみだった。- Marc Andreessen 1994年 Tim Berners-LeeによってHTMLが発表された1991年には、ページのスタイルを設定する方法はありませんでした。HTMLタグがどのように処理されるかはブラウザ次第で、多くの場合、ユーザの恣意的な入力が大きく影響しました。そうした事情から、ページがどのようなスタイルで処理されるかを”提案”するような標準的な方法を求める声が上がるようになりました。 しかし、CSSが導入されるのは5年先で、完全に実用化されるには10年の歳月を待たねばなりません。
スタイルの継承－CSSの基本
■スタイルの継承 親要素から子要素へのスタイルの継承 プロパティには、親要素に指定した値が子要素に継承されるものと継承されないものがあります。 継承されるものには文字色や文字サイズに関するプロパティなどがありますが、 例えば、以下のように文字色を指定した場合、子要素に文字色を指定しなくても親要素で指定した色が継承して適用されます。 例：値が継承されるプロパティ div.sample1 {color:blue;} <!--子要素のp要素にも値が継承される--> <div class="sample1"> ここの文字色は青です。 <p>ここの文字色も青くなります。</p> </div>
BEMをSassで快適に書く方法
BEMとはBEMの概要もうすでにいろんなブログやQiitaなどで書かれていると思いますが、自分の頭を整理するためにも書いておきます。BEMはロシアの検索エンジン大手のYandexにより以下を達成するために開発された「cssの記述方法論」です。CSSセレクタの「命名規則」とも言われています。 Block, Element, ModifierBEMは、セレクタの役割を「Block」「Element」「Modifier」の3つの概念に分けて考えるCSSの設計思想です。BEMのドキュメントによると、Block、Element、Modifierは、それぞれ以下のように定義されています。 Block「Block」は独立したエンティティ（実体）であり、アプリケーションを「構成するパーツ」です。Blockは単一で用いることも可能だし、他のBlockを含んで複合的に用いることも可能です。Block名は基本的
CSSでつくる透明なボーダーライン
Transparent Borders with background-clip - CSS-Tricksにおいて、CSSを使って透明なボーダーラインを描画する方法が紹介されている。透過になりそうだが透過にならない記述の説明、それを回避するためのダブルdivテクニック、さらにCSS3で導入されるbackground-clipを使った方法の3つのCSSが紹介されている。簡単に透過ボーダーを実現する方法として参考になる。紹介されているテクニックは次のとおり。 1. ボーダーに透過を指定する まず最初に考えつく方法が、ボーダーに対して透過の指定をすること。たとえば背景に白を指定して、ボーダーに「border: 20px solid rgba(0,0,0,0.3);」のように透過を指定する。これを描画すると右の図のようになる。期待しているような透過にはならない。これは、ボーダーを透過にしてもそれは
BEM とは - CHROMA
メンテナンスブルな CSS の設計の話で OOCSS や SMACSS ってのがあるけど、そのうちの一つで BEM というのがある。 http://bem.info/ BEM-Methodology Definitionsの日本語訳 を見てみると XJST とか BEMHTML とかいうテンプレートエンジンに関する内容（よくわかってない）も書かれてるんだけど、日本ではこの中の BEM を CSS 用に使いやすくした MindBEMding （日本語訳はこっち ）の命名規則が良いってことで流行ってるみたい。 また、今 BEM っていったら大体は MindBEMding のことを指してるみたい。 BEM-Methodology Definitions の内容全部をこれから理解しようとすると自分が知らない知識が多くてちょっとアレなので.. 、MindBEMding の内容を先に抑えておきたいと思
BEM-Methodology Definitionsの日本語訳。 - Sooey
BEM-Methodology Definitionsの日本語訳。 YandexのBEM-Methodologyが方法論としてあちこちで参照されているのを見かけることが増えてきて、ちょっと変わったCSSの命名規則、みたいな認識が持たれるようになってきた。 しかし、原典である「BEM-Methodologyとは一体何なのか」という情報はなかなか説明されず、このままだとBEMを導入するチーム内で齟齬が生まれることもあるだろう、ということで、HTML/CSSマークアップに適用する際のエッセンスとなりそうなDefinitionsというページだけ日本語に訳した。 https://github.com/juno/bem-methodology-ja 最初は本家サイトのリポジトリをforkして作業していたのだけど、どうもCMSというかHTML生成のプロセスがYandexの独自ツールを使っていて、表示確認
SMACSS 読んだ - CHROMA
Scalable and Modular Architecture for CSS (日本語) を読んだのでそのメモです。 CSSルールのカテゴライズ カテゴライズを行い、それに準じた命名をセレクタに付ける。 ベース レイアウト モジュール 状態（ステート） テーマ レイアウトには1つ以上のモジュールを保持する必要がある。 モジュールは最利用可能なパーツとする。 命名規則 レイアウト、状態（ステート）、モジュールにはプリフィックスを使用する。 レイアウトのスタイルにはlayout-を付ける。または、ドキュメントなどでコーディング規約をまとめてあるなら省略してl-と付けても良い。 状態（ステート）にはis-を付ける。 モジュールは作成される数が多いので、モジュールごとにプリフィックスを付ける。 /* Example */ .comment { } .comment-user { } ベースル
CSSガイドラインを翻訳してみた - 技術日記＠kiwanami
Harry Roberts氏によるCSSガイドライン(High-level guidelines from writing manageable, maintainable CSS)のドキュメントが素晴らしすぎたので、勢いで翻訳してみました。（ロシア語、中国語、フランス語に引き続いて4番目...） 一般 CSS 注釈、アドバイス、ガイドライン at github 個人的な主観で見所を選んでみると、以下のような感じです。 クラスの名前付け方法（ネーミングルール） セレクターの設計、考え方 !importantの使い所 最近見るようになって来たBEM命名法についても説明してあります。 そもそもWebのデザインをどうするかという問題は置いておくと、CSSを書くという事は、どうやってそのデザインを実現するかというHowTo的なものと、どうのように名前付けやエレメントの設計を行なってメンテナンス可能
[CSS] スマホ対応は超重要! 私が最低限やっている6つのこと | ヨッセンス
こんにちは! ヨス（プロフィールはこちら）です。 今現在、Google検索では「スマホ対応」がされているかどうかは超重要になっています。 具体的にいうと、PCの検索順位はスマホでの検索順位が適応されているのです！ 今回は、ブログのスマホ対応でのポイントをくわしく解説します。 スマホ対応で困った6つのこと 今回は私がスマホ対応のために最低限やっている6つを紹介するのですが、分かりやすいように「問題点」を見出しにして紹介しますね。 スマホで見たら画像がはみ出す?! まずはこちらの比較画像をご覧ください。 画像サイズ（左: 変更前・右: 変更後） スマホで見た時に、上画像の左側のような画像を見たことありませんか? これは画像サイズがパソコンのままになっているんですね。大きいのではみ出しています。 これをスマホで見た時は自動で上画像の右側のように縮小してほしいんです。 でも大丈夫! CSSの<im
![[CSS] スマホ対応は超重要! 私が最低限やっている6つのこと | ヨッセンス](https://cdn-ak-scissors.b.st-hatena.com/image/square/f65ab4b0dcf3e460e3895ac786ca89120feaa297/height=288;version=1;width=512/https%3A%2F%2Fyossense.com%2Fwp-content%2Fuploads%2Fcss-for-smartphone-300.jpg)
Ja - Scalable and Modular Architecture for CSS
大規模なプロジェクトにおいて最適な構造を見つけ出すために自分自身(そして自分の周りの人たち)のプロセスを分析してきたが、その結果、私が見つけ出したのはプロセスは規模の大小に関わらず大規模なサイトであっても小規模なサイトであっても同じように有効なプロセスだった。 プロジェクトやチームが大きくなるのに併せてCSSをより柔軟に、よりメンテナンスしやすいCSSを書くための構造について学んでいこう。 What is it? SMACSS (スマックスと発音する) は厳格なフレームワークというよりはスタイルガイドである。インストール、またはダウンロードするライブラリは本書にはない。SMACSSはデザインプロセスを分析するための手法であり、厳格なフレームワークを柔軟な思考過程とする手法だ。そしてCSSを使ったウェブサイトの開発に対する一貫したアプローチをドキュメント化する試みでもある。いったい誰が現在に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://geechs-magazine.com/tag/lifehack/20160513
クラスの階層 - 概念 - MATLAB & Simulink - MathWorks 日本
Summary of http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ エッセンスだけ訳。翻訳の正しさは微妙。
https://github.com/juno/bem-methodology-ja/blob/master/definitions.md
