Custom bullets with CSS ::marker | Articles | web.dev
Custom bullets with CSS ::marker Stay organized with collections Save and categorize content based on your preferences. CSS ::marker lets you change the content and some of the styles of bullets and numbers in HTML lists. Examples of bullet styles. View Source Introduction to pseudo-elements A pseudo-element represents a part in the document that isn't represented in the document tree. For example
A (more) Modern CSS Reset
I know I also have a terrible record with open source maintenance, so I thought I’d archive the original and just post this instead. Do with it what you want! To be super clear, this is a reset that works for me, personally and us at Set Studio. Whenever I refer to “we”, that’s who I’m referring to. The reset in wholepermalink /* Box sizing rules */ *, *::before, *::after { box-sizing: border-box;
The Many Ways to Link Up Shapes and Images with HTML and CSS | CSS-Tricks
Different website designs often call for a shape other than a square or rectangle to respond to a click event. Perhaps your site has some kind of tilted or curved banner where the click area would be awkwardly large as a straight rectangle. Or you have a large uniquely shaped logo where you only want that unique shape to be clickable. Or you have an interactive image that responds differently when
堅牢で保守的な最低限度の CSS 設計 - Qiita
CSS 設計でいう保守性とは、新しいルールの追加・更新のしやすさ をあらわす。保守性を高めるためには、変更の局所化、他のルールへの副作用を最小にするアーキテクチャ を採用します。 設計思想は FLOCSS ベースの ECSS + rscss + Tailwind CSS のいいとこ取り 命名規則は MindBEMding （以降、BEM） 開発言語は Sass + PostCSS コンポーネント粒度 FLOCSS ではプロジェクトにおいて繰り返されるビジュアルパターンをすべて Object として定義します。Object には、Component と Project のレイヤーがあり、この 2 つの判別において Atomic Design のコンポーネント粒度の考えを拝借します。具体的には、 Component：Atoms Project：Molecules に分類します。 単語間の区切り
:only-child - 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 の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
535
スクロールバーのデザインをCSSだけでカスタマイズする方法を具体例を挙げながらまとめていきます。すごく、簡単です。 普通にブラウザの右側に出てくるスクロールバーはまだいいですが、コンテンツの中でスクロールさせる要素のスクロールバーがダサすぎて、なんとかしたい人向けです。 ちなみに、今回メモするTipsは、-webkit系でのみ有効です。ご了承ください。 Firefoxでは、スクロールバーをCSSでカスタマイズすることは現状できないようですね。 -webkit-scrollbarでスクロールバーをカスタマイズできる -webkit-scrollbarというプロパティを指定することで、スクロールバーのデザインはカスタマイズ可能です。 簡単なカスタマイズには簡単な知識だけしか必要ないと思うので、実際に私が扱った要素だけ紹介します。 ::-webkit-scrollbar::-webkit-scr
CSSのクラス名を決めるときに使うリストをつくりました
CSSは設計手法も大事ですが、どういう単語で名前をつけていくかも大事だと思っています。 個人個人でばらつきが出るところでもありますし、「単語名 英語」で検索をして探した単語を使ったけど若干意味合いが違ったといったこともあると思います。 クラス名を決めるためのリストを見かけることもありますが、英単語の読みは書かれていても意味合いが書かれていることは少ないように思います。 自分の確認用と、チームで製作するさいの基準になるようなものを作りたいと思い、単語とその意味を短くまとめてGitHubにあげています。 CSS クラス名リスト | GitHub 以下投稿時の内容です。 名前をつけることは難しいですが、とても重要なことです。 CSSには設計思想が必要ですが、実践するにあたり、名前と機能の意味がとおり、名前のつけ方にブレがないようにするべきです。 このドキュメントでは、CSSでよく使われる単語を分
[自由編集可] 次世代 Web カンファレンス 2019 CSS セッション (#nwc_css)
これからの CSS について真剣に議論する
![[自由編集可] 次世代 Web カンファレンス 2019 CSS セッション (#nwc_css)](https://cdn-ak-scissors.b.st-hatena.com/image/square/9bac5133881850aa80484656339df8323fbed3bb/height=288;version=1;width=512/https%3A%2F%2Fs.togetter.com%2Fogp2%2Faaab0858cfe23efd3a3093fabe7125f0-1200x630.png)
【CSS3】Transform（変形）関連のまとめ - Qiita
はじめに この記事は、HTMLとCSSの基礎知識がある方向けの内容です。 CSS3から要素の変形が指定できる、transform（トランスフォーム）プロパティが追加されました。 transformプロパティを使うことで、要素に対して移動、回転、伸縮、傾斜の変形を加えることができます。 ボタンにマウスカーソルを乗せたときに、移動したり、大きさを変えたりするのに使われるプロパティです。 jQueryやJavaScriptを使って似たようなことができますが、CSSを使う方がヌルヌル動きます。 transform（変形）には、2D（ XY 方向）と 3D（ XYZ 方向）があり、3D 表示するには複数のプロパティを指定する必要があります。 解説の都合上、プロパティは順番に説明しているため、記事の途中で 3D 表示を試しても意図した 3D 表示がされません。 検証する場合は、一読して全てのプロパティ
Zurb Foundation 導入前の予備知識 - Qiita
個人的に、最強のCSS/JSフレームワークだと思っているZurb Foundation（以下、Foundation）について書いていきます。 日本ではBootstrapを使う人が多いですが、それぞれの細かい部分を比較すると、いわゆる「Webサイト」を制作するのには総合的にFoundationのほうが向いているんじゃないかな、と思っています。 比較についてはまたの機会にするとして、この記事では、Foundationを利用する上で知っておきたい諸々について記しておきます。 Zurbという企業 Foundationは、アメリカはカリフォルニア州に所在するデザインカンパニーで、創立は1998年とのこと。2011年に、Foundationの最初のバージョンをオープンソースとして公開しています。（最初のバージョンですが、2.0というバージョンでリリース）これは、Bootstrapとほぼ同じ時期です。
Foundation6を使ってみる。導入編 | みずかず
Foundation6を使ってみよう。導入編 Bootstrapに続いて人気の高いCSSフレームワークのZURB社の「Foundation」。 WordpressのテーマにFoundationのフレームワークを使用したものも多数ありますね。 Foundation と Bootstrap どちらが良いのか。 Bootstrap は機能が豊富だし、テーマなんかも結構あります。使い方の説明をされているサイトが多いので、最初に覚えるにはやはり Bootstrap でしょう。 Foundation はよりデザイナー向けとか、グリッドの柔軟性があるとか聞きます。機能も Bootstrap と同じくらいあります。ただ使い方に関しての文献は少ないです。 Foundation 公式サイトを見ると様々な企業が使っているよと宣伝もされていますね。 Bootstrapで cssフレームワークを覚えたなら、次は F
HTMLとCSSクラスでよく使う命名について - Qiita
HTMLとCSSクラスの命名について 命名で使用する単語に迷います。どうしたらいいですか。 基本単語のみをつかって命名すればいいんだ！！ ブロックなど親要素で使えそうなclass名 container : コンテナ main : メイン global : グローバル home : ホーム hero : でかいブロック。bootstrapのサンプルにある inner : 中味。 outer : 囲っているもの。親。wrapperと同じ。 wrapper : 囲っているもの。親。 例えば、facebookのidだとおおまかに home > globalContainer > content > mainContainer ブロックや子要素で使えそうなclass名 article : articleタグがあるのであまり使いたくない。 block : 囲っているもの。 card : カード cel
ID使っても別に問題ない
CSSでID使うの良くない……どころか、ID使うのはゴミクズカスみたいな風潮で辛い。その根拠はいくつかあり、それらはCSSだけをただそのまま書く場合には納得出来ないこともないかなーと思うので余計に辛い。特にOOCSSのようなアプローチではIDは混ぜるな危険。だからといってIDを使わないのがベスト・プラクティスなわけじゃない。 CSS Lintの利用が広まり、これがID使うなって怒るのも原因の一端な気がする。Disallow IDs in selectorsではIDの問題点として以下のようなものを取り上げている。 However, IDs have a downside: they are completely unique and therefore cannot be reused. つまりユニークなため再利用できないというマイナスの面がある、と。確かに再利用できない。でもこれはマイナス
CSS Grid in IE: Duplicate area names now supported! | CSS-Tricks
CSS Grid in IE: Duplicate area names now supported! Autoprefixer is now up to version 9.3.1 and there have been a lot of updates since I wrote the original three-part CSS Grid in IE series — the most important update of which is the new grid-areas system. This is mostly thanks to Bogdan Dolin, who has been working like crazy to fix loads of Autoprefixer issues. Autoprefixer’s grid translations wer
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SVG gradient using CSS
Chrome : Text blurry when skew back : skew(-10deg) -> skew(10deg)
游ゴシックのfont-family指定方法！@font-faceは絶対NG！WindowsのChromeでかすれる問題徹底検証 | WEMO
CSSアニメーションを使った状態変化パターンの提案
GitHub - cssanimation/css-animation-101: Learn how to bring animation to your web projects
NES.css - NES-style CSS Framework
