CSS で underline に animation をつける - Qiita
問題 CSS で underline に animation をつけたい。 解決策 ::after / :hover / display / transition / width を組み合わせることで実現できる。 例 結果は https://jsfiddle.net/666xcjhj/ . a { text-decoration: none; } /* reset default css */ a { display: inline-block; } a::after { content: ""; display: block; width: 0; transition: width 0.3s; border-bottom: 1px solid #f00; } a:hover::after { width: 100%; } 解説 ::after を underline として利用する。 t
他のCSS本とはかなり異なる！現在、主流の実装・設計方法が徹底解説された良書 -CSS設計完全ガイド
私のCSSはこのままでいいのだろうか、他の人はどのように取り組んでいるのか、CSSのスキルアップを考えているWeb制作者・デベロッパーに、ぜひ手に取ってほしい一冊を紹介します。 本書ではCSSのさまざまな設計手法を解説するだけでなく、最適解となるコードに至るまでの思考プロセスも非常に詳しく解説されています。デベロッパーの頭の中で考えていることが言語化されており、自分のCSSを見直したい人、より効率的なCSS開発を探究している人にお勧めです。 本書は、CSSの中・上級者向けの内容をていねいに詳しく解説したものです。初心者向けのブログやお店ページの例などは一切なく、モジュールベースのコンポーネントやレイアウトが主体で、プロジェクトレベルのCSS設計について解説されています。
カードデザインのポイントと実装方法
2018年5月18日 CSS, Webデザイン Pinterestがカードスタイルのデザインを取り入れてから、TwitterやFacebookをはじめ、多くのWebサイトで採用されているカードスタイルのデザイン。今回はそんなカードデザインの特徴やデザインのポイント、実装方法などをまとめてみます！ ↑私が10年以上利用している会計ソフト！ カードデザインとは 名前のとおり、カードのような四角形を並べたスタイルのデザインです。多くの場合、ひとつの項目に対して画像やテキスト、ボタン等、様々な要素が含まれています。ECサイトやコンテンツの多いWebサイトでよく見かけるスタイルですね。 Etsyは手作りの商品を販売できるECサイト。商品の画像を大きく打ち出し、その商品に関する情報が掲載されています。ログインしていれば、詳細サイトにいかなくてもお気に入り登録などが可能。ページ移動をしなくてもなにかしら
See-SS
' sandbox="allow-same-origin" class="iframe__style--small-card" data-v-2fcdfb78> シンプルなフラットボタン
emotionを使ったCSS-in-JS | dkrkのブログ
styled-components一強という流れの中、 地味に注目を集めているCSS-in-JSライブラリemotionを使ってみた。 注意点 emotionはReact向けに@emotion/coreや@emotion/styledパッケージが用意されていて、今回の記事はそちらを対象にしています。 通常のemotionとは異なる場合があります。 また現在@emotion/coreは、後述するPragmaの仕様により、v2.1以降のcreate-react-app --typescriptにおいて正常に使用できないことがあります。一応の対処法は記載していますが、根本的な解決に至っていないので注意してください。 emotionとは 公式ページ GitHub CSS-in-JSライブラリ。 後発ならではのいいとこ取りとパフォーマンスがウリ。 deprecatedになったglamorousという
Spacing
Spacing Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance. How it works Assign responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass
脱Bootstrapガイド 〜フルスクラッチCSS〜 - Qiita
2021/02/12 追記 この記事を執筆した当時、Bootstrapがどのサイトでも使われていました。 当時のBootstrapはjQueryと密結合していたり、いろいろと剥がす動機があったのですが、 現在のBootstrapは内部的にもflexboxになっていたりと改良されています。 まずは剥がす前に最新版への更新を検討してみてください。 一方で、TailwindやインラインスタイルCSSなど、Bootstrapを採用しづらい場面も増えてきています。 その場合にはやや記述は古いのですが本記事が役に立つ場面もあるでしょう。 ポイントは、腹をくくってFlexboxのプロパティについて真剣に学ぶことです。 追記終わり Bootstrapは便利ですし、デフォルトのスタイルもフラットでかっこいいですね。 デザイナーでなくてもそれなりに整った画面が作れるということで、大変便利なBootstrapで
Create a New Pen
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
よこ並びのCSS。
スマホサイトが優勢な昨今、要素をよこ並びにする機会は減ってきているのかもしれないけれど、大きい画面で見るサイトでは、ナビゲーションやタブや、商品一覧など、よこ並びにレイアウトする機会はまだまだあるんじゃないでしょうか。そんな「よこ並びにするためのCSS」も、やり方はさまざま。お馴染みのやつから、新参者まで、順番に見ていくことにします:)。 よこ並び？ そう、よこ並び。 例えばボタンを横一列に並べたり。商品の情報なんかだと、横に3つずつ並べて改行して、多段に並べる場合もありますね。偏（ひとえ）に「よこ並び」と言えど、CSSにはそのやり方がたくさんあるんです:o。 導入 この記事で紹介するよこ並びの方法は以下の通り。 CSSの歴史的な背景から、最初はfloatプロパティを使った方法を紹介します。 float（フロート） 要素を左右へ寄せるためのプロパティ。 後続する文章（テキスト）などのインラ
Documentation - Materialize
flash_on Speeds up development We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers. group User Experience Focused By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and an
もう迷わない、「@font-familyはこれでOK！」を色々考えてみた。 | unitopi - ユニトピ -
Macだから、Windowsだから、Androidだから… 端末それぞれの表示状態を気にしながらフォントを考えるのって大変ですよね。 とりあえずコレにしておけばいいや、というコピペ用テンプレが皆さん存在するのではないでしょうか？ 基本 font-family: sans-serif; sans-serif、つまりゴシック体であることを指定しています。 ただしそれ以上の指定ではないので、ブラウザ標準のものが使われます。WindowsであればメイリオとかMSゴシック系、Macであればヒラギノ角ゴシック系となります。 Windowsのことを考えると明瞭が由来でもあるメイリオがアンチエイリアスがかかって見やすいです。 しかし、Macの場合はヒラギノを優先させたいですよね。。 Macだと、多くのブラウザで日本語表記のフォント指定は無視されます。 つまり、“メイリオ”は読み込まれず、“Meiryo”と
CSS Navigation Bar
W3Schools offers a wide range of services and products for beginners and professionals, helping millions of people everyday to learn and master new skills. Free Tutorials Enjoy our free tutorials like millions of other internet users since 1999
CSSで要素を画面中央に配置する方法 | hT DESIGN blog
ある要素を画面の中央（縦横ともに中央）に配置したい。そんなとき使えるCSSテクニックについて書きます。※IE7以下のブラウザには対応していません。 要素を画面中央に配置するサンプル 水平方向（横位置）に対する中央揃えは、CSSで text-align: center; を使ったり、ブロック要素ならば margin: 0 auto; を使ったりして実現できます。しかしながら、垂直方向（縦位置）の中央揃えとなると、簡単に出来そうでなかなか上手くいかず、悩むところです。 tableタグによって実現することもできますが、あまりスマートなやり方ではありませんので、ここではCSSを使って中央に配置する方法を説明します。 <TABLE>タグをレイアウト目的で使用するケースがありますが、 <TABLE>タグは本来はテーブル（表）を作成するためのタグです。 レイアウト目的には、できるだけスタイルシートを利用
CSS3のWebフォントを使ってみよう
EOF形式以外のフォーマットへ変換したい場合には、「@font-face Generator」がお勧めです。さまざまなオプションがあり、文字を限定できるサブセット化の機能もついていますが、その分、ttf2eotより多少時間がかかります。 WOFF形式を優先して複数のフォーマットを指定する 先述したように、WOFF形式のフォントはWeb用に開発されており、データが軽く、著作権情報を盛り込むことができるというメリットがあります。Webフォントを使う上で、これから普及してくるフォーマットだと思われます。現状、ひとつのフォント形式だけで主要ブラウザのすべてをカバーすることはできませんが、WOFF形式を優先して指定しておくのが良いでしょう。 @font-faceのsrcディスクリプタでは、複数のフォントファイルをカンマで区切って指定できます。優先度は記述順になっており、その中から利用できるものが選択
50 Free CSS-Only Icons for Website Graphics - DesignM.ag
Modern CSS trends have blown up so quickly that it can be difficult to keep up with all the new stuff. Online projects which most surprise me involve pure CSS designs for layouts, animations, and icons. There is still plenty of use for icon sprite sheets in the right context. But why not try out modern trends for the users who have upgraded from legacy browsers? This gallery includes fifty example
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Neumorphism（ニューモーフィズム）のCSSはこれで簡単！スタイルシートを生成できるジェネレーター
Amazon.co.jp: デザインサンプルで学ぶCSSによる実践スタイリング入門: WINGSプロジェクト宮本麻矢 (著), 山田祥寛 (監修): Digital Ebook Purchas
Amazon.co.jp: CSS3 スタンダード・デザインガイド【改訂第２版】 ［固定レイアウト版］: エ・ビスコム・テック・ラボ: Digital Ebook Purchas
https://developers.google.com/web/tools/setup/workspace/setup-devtools
<textarea> with horizontal rule
