Tailwind CSSですぐに実装できるUIコンポーネントのまとめ -tailblocks
Webページでよく見かけるUIコンポーネント、ヘッダ・フッタ・ヒーロー・ギャラリー・ステップ・お問い合わせなどをTailwind CSSですぐに実装できるコードをまとめたtailblocksを紹介します。 それぞれのUIコンポーネントにはさまざまなバリエーションもあり、スマホ・タブレット・デスクトップでの表示、ライトモード・ダークモード、テーマカラーの変更など、非常に便利です。 tailblocks -GitHub tailblocksの特徴 tailblocksのデモ tailblocksの特徴 tailblocksは、Tailwind CSSですぐに実装できるUIコンポーネントをまとめたものです。Tailwind CSSはUIコンポーネントをカスタマイズするためのユーティリティとなるclassを提供するCSSです。 参考: Tailwind CSSの便利な使い方、レイアウトやUIコンポ
はじめてのBEM 勉強会コンテンツ紹介｜yiio
社内で行なった勉強会のコンテンツまとめです。 対象・複数人チームでのWebフロント開発初心者 ・html, css, scss書いたことはある BEMとはなんぞやCSS設計、命名規則のひとつ。わりかしメジャーです。ベムとよみます。 そもそもCSS設計って色々あるけどその違いは？こちらのブログがめちゃわかりやすいです。わたしは小さいWebページならBEMでいいんじゃないかと思います。 BEMのメリット・ブロックは独立パーツなので他のパーツに汚されない ・他の人が書いたクラス名でもだいたいの意図を予測できる ・（BEMに限らないが）命名の方針があることで無駄な時間ロスしない ・ゴツすぎないので取り入れやすい 基本の考え方・Block：デカイくくり ・Element：くくった中にある要素 ・Modifier：上記2つに状態とかのバリエーションつけたいときに使う 例えばこんなかんじのリスト要素があ
See-SS
' sandbox="allow-same-origin" class="iframe__style--small-card" data-v-2fcdfb78> シンプルなフラットボタン
Sass：連番付きid・classをゼロパディング（ゼロ埋め）で出力する方法 - NxWorld
Sassを利用してて連番付きのidまたはclassを一気に出力したいときに、item1, item2, item3 ... のように単純に1から始まる連番をつけて出力するのではなく、item01, item02, item03 ... のようなゼロパディング（ゼロ埋め）な連番で出力させる方法です。 ゼロパディングとは ゼロパディングとは、足りない桁数の分だけ「0」を追加して埋めるというものです。 具体的な例としては、1, 2, 3, 4, 5という数字の場合であっても桁数を2桁にする必要があるときは01, 02, 03, 04, 05にするというものになります。 単純な連番付きで出力する 違いを見るために、まずは単純な連番付きで出力してみます。 今回はサンプルとして.item ＋ 連番のようなclassを出力するというもので、連番は1～10まで出したいという場合は@forを利用してSCSS
jQueryでレスポンシブ対応かつ切替可能なモーダルを作成する方法 | 株式会社チップディップ
今回は切り替えが可能なモーダルウィンドウの作成方法をご紹介します。 まずはデモページを用意したのでご覧ください。 今回はこれを作っていきたいと思います。レスポンシブにも対応していますので使い勝手は良いかと思います！ それでは早速、次項から詳しく説明していきたいと思います。 HTMLを記述 まずはHTMLを記述していきます。 HTMLを記述する <head> <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <script src="js/func.js"></script> </head> <body> <di
超便利！確認しておきたい最新CSSツール、リソースガイド厳選65個 2020年度
海外サイト Speckyboy.com で公開された Our 50 Favorite CSS Libraries, Frameworks and Tools from 2019 より許可をもらい、翻訳転載し、さらにオススメCSSツール15個を追加しています。 2020年がスタートし、ここ数年で急速な進歩を続けているCSSは、さまざまなオープンソースのツールがリリースされています。 CSSライブラリやフレームワーク、オンラインツールを利用することで、サイト制作の時間を節約、短縮できるだけでなく、新しいテクニックやプロパティなどに関しては、学習用ガイドラインも多数公開されています。 今回は、2020年に注目したい最新CSSツール、リソースガイド65個をまとめてご紹介します。これからCSSを本格的に学ぶひとも、普段からバリバリでCSSを使いこなしているひとも、一度は確認しておきたい内容となってい
令和元年ベストのfont-familyはこれだ / Better font-family 2019 in Japanese - Speaker Deck
🦠🦠🦠このスライドの内容の更新して記事にしたので、ICS MEDIAのほうを参照ください🦠🦠🦠 2020年に最適なfont-familyの書き方 - ICS MEDIA https://ics.media/entry/200317/ --- OSやブラウザのアップデートによりウェブサイト…
CSSを書くのが劇的に楽になる！ユーティリティファーストのCSSフレームワーク「Tailwind CSS」
日本でも、Tailwind CSSを使用する人が増えてきましたね。 フロントエンドの開発者がTailwind CSSを実際に使い始めたら、CSSを書くのが劇的に楽になった話を紹介します。 How I Stopped to Write CSS by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Tailwind CSSとは カードコンポーネントで実装の比較 BootstrapとTailwind CSSの比較 Bootstrapがそんなに恋しいですか？ BootstrapとTailwind CSSのどちらを使えばよいか？ CSSにかかる時間はかなり少なくなりました はじめに 私はCSSアーキテクチャにフォーカスしたフロントエンド開発者として、コードを書くために最高の方法を使いたいと思っています
CSSセレクタのチートシート｜37パターンを一覧で解説
CSSセレクタのチートシートでは、要素セレクタ / classセレクタ / idセレクタ / 属性セレクタ / 複数セレクタ / 子孫セレクタ / 兄弟セレクタ / 隣接セレクタ / 擬似クラス / 擬似要素 / 全称セレクターから37パターンのセレクタの説明と実際のコードで使い方サンプルを紹介しています。
CSS Lint
Errors (All) | (None) Beware of broken box sizing Require properties appropriate for display Disallow duplicate properties Disallow empty rules Require use of known properties Compatibility (All) | (None) Disallow adjoining classes Disallow box-sizing Require compatible vendor prefixes Require all gradient definitions Disallow negative text-indent Require standard property with vendor prefix Requi
gcss.info - Domain Name For Sale | Dan.com
Buyer Protection Program When you buy a domain name at Dan.com, you’re automatically covered by our unique Buyer Protection Program. Read more about how we keep you safe on our Trust and Security page. Next to our secure domain ownership transfer process, we strictly monitor all transactions. If anything looks weird, we take immediate action. And if the seller doesn't deliver on their part of the
レスポンシブWebデザインでテーブルを使う時の小技
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
擬似要素を使った見出しデザイン
このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。 HTMLはすべてHタグだけです。特に意味はありませんが今回のサンプルはh4タグを使っています。 「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「:before」「:after」疑似要素はIE7以下は非対応ですのでご注意ください。 今回のサンプルは別サーバにアップしていますのでご覧ください。 それでは今回8つのサンプルを紹介していきます。 1. 吹き出しのような見出し1 吹き出しの下の部分を:after擬似要素で作っています。三角形はボーダーで作っています。下の画像を見ると何となくイメージできるでしょうか。今回の場合は上の赤い部分のみ色を付
CSS で作るスマートフォン向け片手操作メニュー
ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。 久々にこの手のネタ書いた気がしますけども… ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。多分言葉で言っても伝わりにくいと思いますので実際のサンプルをまずは見てみてください。 CSS で作るスマートフォン向け片手操作メニュー サンプル 現在最新版の Firefox
インラインCSSで書かれたHTMLを一撃でCSSファイルと分割する「Cascader」
とある理由から、インラインでCSSが書かれているHTMLを、綺麗にCSSファイルと分割させたいというときもありますよね。 しかし、これを手作業で進めるのはとても手間がかかり、０から作り直したほうが速いことがほとんど。 今回は、そんなときに一撃でCSSファイルと分割できるサービスをご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! インラインCSSのHTMLをCSSファイルと分割する「Cascader」 「Cascader」は、インラインでCSSが書かれているHTMLファイルを、一発でCSSファイルと分割してくれるオンラインサービス。 ひとつひとつ分解しなくても、HTMLをコピペするだけで分割できてしまうのが非常に便利です。 HTMLタグを貼り付けるだけで分割 ↑たとえば、画像のようにイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今どきのスムーズスクロール(2019年版) - to-R Media
NES.css - NES-style CSS Framework
CSS Load.net - Loading CSS spinners and bars generator for AJAX & JQuery
SASSIENCE ～ 世界が嫉妬するCSSへ
CSSの知識をもっと深める30+2の小技テクニック集｜Webpark