Custom bullets with CSS ::marker | Articles | web.devWeb Platform Dive into the web platform, at your pace.
A (more) Modern CSS Reset
Pre-orders for Mindful Design are now open. Save £100 for two weeks only! 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 wholepermali
The Many Ways to Link Up Shapes and Images with HTML and CSS | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. 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 wa
堅牢で保守的な最低限度の CSS 設計 - Qiita
CSS 設計でいう保守性とは、新しいルールの追加・更新のしやすさ をあらわす。保守性を高めるためには、変更の局所化、他のルールへの副作用を最小にするアーキテクチャ を採用します。 CSS 設計 設計思想は FLOCSS ベースの ECSS + rscss + Tailwind CSS のいいとこ取り 命名規則は MindBEMding （以降、BEM） 開発言語は Sass + PostCSS コンポーネント粒度 FLOCSS ではプロジェクトにおいて繰り返されるビジュアルパターンをすべて Object として定義します。Object には、Component と Project のレイヤーがあり、この 2 つの判別において Atomic Design のコンポーネント粒度の考えを拝借します。具体的には、 Component：Atoms Project：Molecules に分類します。
535
スクロールバーのデザインをCSSだけでカスタマイズする方法を具体例を挙げながらまとめていきます。すごく、簡単です。 普通にブラウザの右側に出てくるスクロールバーはまだいいですが、コンテンツの中でスクロールさせる要素のスクロールバーがダサすぎて、なんとかしたい人向けです。 ちなみに、今回メモするTipsは、-webkit系でのみ有効です。ご了承ください。 Firefoxでは、スクロールバーをCSSでカスタマイズすることは現状できないようですね。 -webkit-scrollbarでスクロールバーをカスタマイズできる -webkit-scrollbarというプロパティを指定することで、スクロールバーのデザインはカスタマイズ可能です。 簡単なカスタマイズには簡単な知識だけしか必要ないと思うので、実際に私が扱った要素だけ紹介します。 ::-webkit-scrollbar::-webkit-scr
CSSのクラス名を決めるときに使うリストをつくりました
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? CSSは設計手法も大事ですが、どういう単語で名前をつけていくかも大事だと思っています。 個人個人でばらつきが出るところでもありますし、「単語名 英語」で検索をして探した単語を使ったけど若干意味合いが違ったといったこともあると思います。 クラス名を決めるためのリストを見かけることもありますが、英単語の読みは書かれていても意味合いが書かれていることは少ないように思います。 自分の確認用と、チームで製作するさいの基準になるようなものを作りたいと思い、単語とその意味を短くまとめてGitHubにあげています。 CSS クラス名リスト | GitH
【CSS3】Transform（変形）関連のまとめ - Qiita
はじめに この記事は、HTMLとCSSの基礎知識がある方向けの内容です。 CSS3から要素の変形が指定できる、transform（トランスフォーム）プロパティが追加されました。 transformプロパティを使うことで、要素に対して移動、回転、伸縮、傾斜の変形を加えることができます。 ボタンにマウスカーソルを乗せたときに、移動したり、大きさを変えたりするのに使われるプロパティです。 jQueryやJavaScriptを使って似たようなことができますが、CSSを使う方がヌルヌル動きます。 transform（変形）には、2D（ XY 方向）と 3D（ XYZ 方向）があり、3D 表示するには複数のプロパティを指定する必要があります。 解説の都合上、プロパティは順番に説明しているため、記事の途中で 3D 表示を試しても意図した 3D 表示がされません。 検証する場合は、一読して全てのプロパティ
Zurb Foundation 導入前の予備知識 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 個人的に、最強のCSS/JSフレームワークだと思っているZurb Foundation（以下、Foundation）について書いていきます。 日本ではBootstrapを使う人が多いですが、それぞれの細かい部分を比較すると、いわゆる「Webサイト」を制作するのには総合的にFoundationのほうが向いているんじゃないかな、と思っています。 比較についてはまたの機会にするとして、この記事では、Foundationを利用する上で知っておきたい諸々について記しておきます。 #Zurbという企業 Foundationは、アメリカはカリフォルニ
Foundation6を使ってみる。導入編 | みずかず
Foundation6を使ってみよう。導入編 Bootstrapに続いて人気の高いCSSフレームワークのZURB社の「Foundation」。 WordpressのテーマにFoundationのフレームワークを使用したものも多数ありますね。 Foundation と Bootstrap どちらが良いのか。 Bootstrap は機能が豊富だし、テーマなんかも結構あります。使い方の説明をされているサイトが多いので、最初に覚えるにはやはり Bootstrap でしょう。 Foundation はよりデザイナー向けとか、グリッドの柔軟性があるとか聞きます。機能も Bootstrap と同じくらいあります。ただ使い方に関しての文献は少ないです。 Foundation 公式サイトを見ると様々な企業が使っているよと宣伝もされていますね。 Bootstrapで cssフレームワークを覚えたなら、次は F
HTMLとCSSクラスでよく使う命名について - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? HTMLとCSSクラスの命名について 命名で使用する単語に迷います。どうしたらいいですか。 基本単語のみをつかって命名すればいいんだ！！ ブロックなど親要素で使えそうなclass名 container : コンテナ main : メイン global : グローバル home : ホーム hero : でかいブロック。bootstrapのサンプルにある inner : 中味。 outer : 囲っているもの。親。wrapperと同じ。 wrapper : 囲っているもの。親。 例えば、facebookのidだとおおまかに home >
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
:only-child - CSS: カスケーディングスタイルシート | MDN
[自由編集可] 次世代 Web カンファレンス 2019 CSS セッション (#nwc_css)![[自由編集可] 次世代 Web カンファレンス 2019 CSS セッション (#nwc_css)](https://cdn-ak-scissors.b.st-hatena.com/image/square/d15dd7eaddc5b1e82710fc665c6f006c94ad517a/height=288;version=1;width=512/https%3A%2F%2Fs.tgstc.com%2Fogp3%2Faaab0858cfe23efd3a3093fabe7125f0-1200x630.jpeg)
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
