このCSSなら簡単！フォームのチェックボックス・ラジオボタンとテキストをベースラインに揃えて配置
フォームの実装で面倒なのがフォーム要素とテキストを揃える、特にチェックボックス・ラジオボタンとテキストをベースラインに揃えることです。 flexboxでalign-item: baseline;を使用すると、チェックボックス・ラジオボタンとテキストを揃えるのは簡単に実装できます。複数行のテキストにも対応します。 <div class="flex-demo --start checkbox-input"> <label for="demo"><b>flex-start</b> 複数行の長いテキストでも大丈夫</label> <input type="checkbox" id="demo"> </div> <div class="flex-demo --center checkbox-input"> <label for="demo2"><b>center</b> 複数行の長いテキストでも大丈
ツクリンクのCSS設計と書き方
はじめに この記事はツクリンクのエンジニアを対象に、サービスで利用されているCSS設計の概要を知り、実際にマークアップできるようになるためのドキュメントです。 社外にも公開することで、CSS設計と運用の一例として参照していただいたり、改善意見の募集、今後ツクリンクで一緒に開発していただく可能性のある方に開発体制をよく知っていただくことも期待しています。 疑問点、改善点などあればお気軽にコメントしてください。 ※ここで紹介した設計、運用は執筆現在のものです。記事の更新状況によっては実際の運用と異なる可能性があります。 CSS設計の変遷 現状のCSS設計の詳細の前にこれまでどのようなCSSが書かれてきたのかを説明します。 v1, 規則無し 初回リリース時はid, clsss, 要素型セレクタなどを複数使ったマークアップをしていました。 一部の古いページ、SP版のレイアウトで極稀に残っている可能
早く言ってよ〜！CSSのtransformは同じ関数を複数回つかってもOKだった | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エンジニアのつっちーです。 .foo { transform: translateX(-50%) translateX(10px); } みなさんは、このCSSが有効であること、ご存じだったでしょうか。CSSのtransformプロパティでは、このように同じ関数を複数回使用できます。transformにはもう何年もお世話になってきたというのに、このことは最近になって初めて気が付きました……。「そんなことも知らなかったの？」という方がほとんどだとは思いますが、忘れてしまわないように記事に残しておきます。 たとえばこんなときに 複数の単位で移動距離を指定 See the Pen Multiple Transform Functions 1 by dsktschy (@dsktschy) on CodePen. See the Pen Multiple Transform Funct
gapの余白指定が便利！ gridとflexでできる新しいCSSレイアウト手法 - ICS MEDIA
CSSのgapプロパティーは余白を指定できる新しめの手法です。余白といえば、marginプロパティーやpaddingプロパティーを思い浮かべる方が多いと思いますが、CSS GridやFlexboxでgapプロパティーを使うと柔軟にレイアウトを組めます。もともとgapプロパティーはCSS Gridでのみ利用できていましたが、macOS Safari 14.1およびSafari on iOS 14.6からFlexboxでもgapプロパティーが使えるようになりました。 この記事ではFlexbox、CSS Gridで利用できるgapプロパティーを活用したレイアウト手法とそのメリットを紹介します。今までmarginプロパティーで要素間の余白を調整していたものもgapプロパティーで柔軟に対応できる場面もあります。なお、下記サンプルでmarginプロパティーは一切使っていません。 サンプルを別ウインドウ
Tailwind CSSのカスタマイズ方法を解説、基本的な機能を維持しつつ、スタイルを変更・追加するテクニック
Tailwind CSSはユーティリティクラスのフレームワークですが、すべてのスタイルは用意されていません。カラーを増やしたり、ブレイクポイントを増やしたり、マージンやパディングの値を増やしたり、カスタマイズ方法を紹介します。 また、Tailwind UIのUIコンポーネントをそのまま使用すると、似たデザインになってしまうことがあります。そんな時にもカスタマイズができると独自のデザインで実装できます。 Customizing Tailwind CSS by allround.io 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Tailwind CSSのカスタマイズの準備 スペースとブレークポイントをカスタマイズ ベースのスタイルを拡張 プリセットの使用と作成 終わりに はじめに Bootstrapの黄金期のように、T
新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました - ICS MEDIA
新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました アニメーションを作る時に、「思いついた演出をすぐに実装したい」「頭の中ではできているのに、コーディングするのが面倒」と思ったことはありませんか？アニメーション作成にはライブラリを使用することが多いと思いますが、使い方を調べて覚えて、ドキュメントからコピペしたり、ひたすらタイピングをして… 私はこれらの問題を解決するために、「Tween24」というライブラリを作りました。Tween24はメソッドチェーンで記述するのが特徴で、たった1行でアニメーションが実装できます。依存ライブラリもなく、単体で動作します。アニメーションライブラリの多くはオブジェクト型でプロパティを指定するためタイピングが多くなりがちですが、メソッドチェーンであればエディターのコード補完機能でスラスラと記述できます。 その他にも、メソ
無料で使えるかわいい8bitデザインのファミコン風CSSフレームワーク「NES.css」
ファミコン風デザインのウェブサイトを簡単に作れる無料CSSフレームワークが「NES.css」です。NES.cssはさくらインターネットのダーシノ氏が開発を行っており、ボタンや入力フォームといった基本的な要素から、SNSやキャラクターのアイコンまで用意されています。 NES.css - NES-style CSS Framework https://nostalgic-css.github.io/NES.css/# nostalgic-css/NES.css: NES-style CSS Framework | ファミコン風CSSフレームワーク https://github.com/nostalgic-css/NES.css ファミコン風CSSフレームワーク「NES.css」をリリースしました | Black Everyday Company https://kuroeveryday.blo
Tailwind CSSが私には合わなかった理由
ここ1,2年で、Tailwind CSSを使用する人が増えてきました。Tailwind CSSはユーティリティファーストのフレームワークで、いくつかのclassを組み合わせることでUIコンポーネントやレイアウトを簡単に実装できます。 Webデベロッパーによる、Tailwind CSSが私には合わなかった理由を紹介します。 Why Tailwind Isn't for Me by Jared White Tailwind CSSについて詳しく知りたい人は、以前の記事をご覧ください。 Tailwind CSSの便利な使い方、レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる CSSを書くのが劇的に楽になる！ユーティリティファーストのCSSフレームワーク「Tailwind CSS」 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得
全モダンブラウザ対応のCSS機能が爆増。Chromium版Edgeのもたらす次世代CSS表現 - ICS MEDIA
2020年初め、Chromium版のMicrosoft Edge（以下新Edge）がリリースされました。新Edgeは「Microsoft Edge Legacy」（以下Edge Legacy）と比べて多くの機能が使えるようになっており、Chrome・Firefox・Safariのモダンブラウザと遜色ないレベルになっています。 先日5月29日にリリースされた「Windows 10 May 2020 Update」では、Edge Legacyの開発が終了することもアナウンスされており（参考記事「Windows 10 features we’re no longer developing - Windows Deployment」）、今後のWindows標準ブラウザは新Edgeとなっていくでしょう。 ウェブ制作の面で嬉しいことは、多くのCSSやJavaScriptの機能が使えるようになったことで
CSSではじめるクリエイティブコーディング・パーティクルアニメーション | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして、2020年6月に入社したくりちゃんです。 前職でもフロントエンドエンジニアとして約1年ほど、おもにLPたまにコーポレートサイトを制作していました。Webのアニメーションやインタラクションをもっと実装したいなと思い、ご縁があってLIGに入社することになりました。 See the Pen Particle Rotation #03 by Hisami Kurita (@hisamikurita) on CodePen. プログラムで絵やアニメーションを作ったりすることが好きで、仕事でもプライベートでもよくCSS AnimationやCanvas 2D、three.jsを使って上記のようなものを作っています。個人で制作した作品はほとんどCodePenにあげているので、興味があれば見てみてください！ ということでLIGでの最初の記事は、上記のようなパーティクルアニメーションの作り方を
初めてのtailwindcss (Vue.js + PurgeCSS) - Qiita
この記事は CSS Advent Calendar 2019 21日目の記事です。 気になってたtailwindcssを、Vue.jsでやってみましたという記事です。 リポジトリはこちら→ https://github.com/hisako135/tailwindcss_vue_demo やったことは以下のような感じです。 Vue.js でのtailwindcssのセットアップ PurgeCSS でのファイル容量の削減 tailwindcssってなんぞ "Bootstrapをゴリゴリいじってカスタマイズしても良いのだが、そこに時間かけるんならCSSフレームワーク使う利点なくない...？ " などと思ったことがある人はいませんか...？ グリッドシステムとForm周りさえあればよくて、他の必要なコンポーネントは自分で作った方が楽だよな、とかゴニョゴニョ...(小声) そこでtailwindc
Googleフォントをサブセット化してページの読み込みをスムーズに
2023年6月8日 Webサイト制作, 便利ツール おしゃれなフォントが気軽に実装できるGoogleフォント。みなさん使っていますかね？登録やダウンロード不要なので便利ですが、日本語フォントはなかなか容量が大きくてページの読み込み速度に影響が出てしまいます。そこで必要なフォントのみを指定できるサブセット化をしてみましょう！ ↑私が10年以上利用している会計ソフト！ Googleフォントの設定 まずは通常通りGoogleフォントを設定しましょう。GoogleフォントのWebサイトから、今回は例として「Kosugi Maru」というフォントを設定したいので検索。一覧から「Kosugi Maru」をクリックします。 続いて見本の右側にある「Select this style」をクリック。 HTML 画面右側に選択したフォントが表示されます。「Embed」タブをクリックしてコードを取得しましょう。
令和元年ベストのfont-familyはこれだ / Better font-family 2019 in Japanese - Speaker Deck
🦠🦠🦠このスライドの内容の更新して記事にしたので、ICS MEDIAのほうを参照ください🦠🦠🦠 2020年に最適なfont-familyの書き方 - ICS MEDIA https://ics.media/entry/200317/ --- OSやブラウザのアップデートによりウェブサイトのフォントは影響を受けてきました。最近だとiOS 13 Safariでフォントが激太りを起こしたり、macOS CatalinaとChromeの組み合わせで明朝体化するウェブサイトが多発しました。 他にも「ＭＳ Ｐゴシック」の呪縛、「游ゴシック」の薄さ問題、アンチエイリアスの変化など問題はつきません。このライトニングトークでは、現代の最適解としてのフォント指定を紹介します。 Website fonts have been affected by OS and Browser updates. R
CSSで変数（カスタムプロパティ）を使ってみよう
2020年5月13日 CSS プログラミングではおなじみの変数。SassやLESSといったCSSプリプロセッサーをお使いの方もよく使うものですね。この一度定義しておけば繰り返し利用できる便利な変数が、CSSでも使えるようになりました！今回はCSS変数（カスタムプロパティ）の使い方と注意点をまとめていきます！ ↑私が10年以上利用している会計ソフト！ CSSカスタムプロパティとは？ 公式では「カスケード変数のためのCSSカスタムプロパティ（CSS custom properties for cascading variables）」としていますが、単に「CSSカスタムプロパティ」や「CSS変数」などとも呼ばれています。 変数は文字列や数値などを入れる箱のようなものです。例えば数学では「y = 3x」のような式があり、この y や x の中には自由に数字を当てはめられます。これが変数というもの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AtomicDesignとデザインシステム、CSS設計について
Animista - On-Demand CSS Animations Library
Tailwind Ink | AI color palette generator for Tailwindcss
CSS Donut Charts
CSS Donut Charts - Animated
DropCatch.com