2023年モダンCSSの最新トレンド鹿野さんに聞く！2023年モダンCSSの最新トレンド https://findy.connpass.com/event/278449/ で発表した資料です。 各リンクはこちらから参照 https://tonkotsuboy.github.io/20230413_findy_css/
上下中央揃えのCSSまとめ。Gridだと2行、Flexboxだと3行で実現可能 - ICS MEDIA
CSSでブロック要素を上下中央揃え（天地左右の中央に配置）する方法はいくつかありますが、CSS Gridを使う方法が現在では一番手軽です。CSS Gridレイアウトを使うと、たった2行で上下中央揃えができます。 ▼ CSS .container { display: grid; place-items: center; } デモを別ウインドウで再生する ソースコードを確認する ※CSS GridだとIE 11に対応できません。しかし、IE 11は2022年6月にサポートを終了しているので、ウェブ制作者が気にする必要はないでしょう。 Flexboxだと3行 対して、Flexboxでも上下中央は実現できます。Flexboxの場合、中央揃えしたい要素の親に対してたった3行記述するだけです。モダンブラウザはもちろん、Internet Explorer 11（以下、IE 11）でもベンダープレフィッ
Webページでよく使用されるレイアウトに役立つCSS Gridの実装テクニックのまとめ
CSS Gridを使用して、Webページでよく使用されるレイアウトやコンポーネントの実装で起きる問題を解決する実装テクニックを紹介します。 Modern CSS grid solutions to common layout problems by Kevin Pennekamp 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 動的な中央揃えのレイアウト レスポンシブ対応のマルチコラムのグリッドシステム 2方向のカードレイアウト まとめ はじめに レイアウトと構成は、CSSにおいて最も難しいポイントに一つです。特にレスポンシブを考慮する場合は、なおさらです。最近では、メディアクエリを使用しない実装が増えています。これはさまざまなブレイクポイントを使用することで、CSSの保守性が低くなるからです。 しかし、CSS Gri
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 の中には自由に数字を当てはめられます。これが変数というもの
[CSS]タイプライターのように一文字ずつアニメーションで表示するスタイルシート
JavaScriptは使用しないで、CSS3アニメーションでタイプライターのように一文字ずつ表示するスタイルシートを紹介します。 デモページ 実装 両デモの実装方法を紹介します。 HTML HTMLは共通で、h1要素でテキストを実装するだけです。 <h1>Typing animation by Lea Verou.</h1> CSS:モダンブラウザ対応版 CSS3のsteps()を使用して一文字ずつ順番に表示します。 フォントはアニメーションのタイミングを同じにするため等幅（monospaceなど）で。 Pure CSS3 typing animation with steps() @-webkit-keyframes typing { from { width: 0 } to { width:16.3em } } @-moz-keyframes typing { from { width
良くあるメニュー・アイキャッチのアイコンに使えそうなFontAwesomeのまとめ
たくさんのWEBアイコンフォントが使えるFontAwesomeですが、種類が豊富故に『あのアイコン使いたいけど名前なんだっけ・・・』ということも増えてきました。 htmlコードと、擬似要素で使いたい場面もあると思うのでcontentで指定する文字コードもまとめていきます！ 5.0とは合わないようですが、検索のコツは同様に学ぶことができます。 FontAwesomeの使い方まとめようかと思いましたが、こちらのサイト様より丁寧にできる自信がありません！ 使い方については↓を！ http://h2ham.net/font-awasome おんなじWEBアイコンフォントはGenericonsを使っていたのですが、いまいち文字とのベースラインが合わないのが気になって、最近はAwesomeをよく使っています。 Genericonsについての記事はこちらをどうぞ！ Twenty Fourteenに標準装
モバイル対応も万全のLightbox 『fancyBox3』の使い方とオプション
Lightboxなどに代表される、画像やビデオをページを推移せずにオーバーレイ表示させる機能は、昨今のwebサイトでは必須の技術と言っても良いでしょう。 現在、jQueryプラグインとしてさまざまなオーバーレイ プログラムが提供されていますが、中でも設定の簡単さとオプションの充実度、そしてスマートフォンにもレスポンシブも万全さという面でお勧めしたいのが今回解説する『fancyBox3』です。 その名の通り以前から公開されているfancyBoxシリーズの3世代目となる同プラグイン。その設置手順を動作デモ付きで解説していきます。 『fancyBox3』の主な機能と特徴 まずはfancyBox3の主な機能と特徴をピックアップしてみましょう。 モバイルファースト設置、設定が簡単分かりやすくて便利なUIYouTubeやVimeoやGoogleマップ、Instagramなどの対応画像はもちろん、inl
マーカー - CSS Dencitie
HTMLでは li要素 の手前に、黒い点や数字が自動で付きます。それをマーカーと言います。それを独立させて考えようというのが、このマーカーボックスという考え方です。マーカーボックスは、'display: marker'で生成します。 マーカーボックスを使うと、今まで出来なかった背景やボーダー、文字の大きさなど、各種指定が出来ます。 例えば、このような事を書くと、 li { display: block; } li:before { display: marker; content: counters(mycount, lower-roman) "."; counter-increment: mycount; } 以下のHTMLが <ol> <li>これが1つ目の項目。</li> <li>これが2つ目の項目。</li> <li>これが3つ目の項目。</li> </ol> こんな具合に表示され
BEMとSMACSSを融合させる最も簡単な方法 - Qiita
+ ここで紹介している方法は、一部Sassの使用を前提としています。 + ここでいうBEMは命名規則や概念としてのBEMであり、Yandex社が開発しているBEMツールについては言及しません。 BEMは素晴らしいアイデアであり、SMACSSもまた素晴らしいガイドラインです。 これらの特徴を組み合わせて最高のCSS設計を構築したい、と思った私はさまざまな方法でこの2つの融合を試みましたが、失敗の連続でした。 しかしながら、ようやくいくつかの結論を導けるようになってきました。 今回はそんないくつかの方法論の内、 BEMの命名ルールをそのまま生かしつつ、最もシンプルにSMACSSと融合させる方法 を紹介したいと思います。 実は、SMACSSとBEMをそのまま組み合わせることはできません。 お互いのルール同士が衝突するからです。 とくに注意したい部分は、CSSのカテゴライズだといえるでしょう。 S
Specificity Calculator
A visual way to understand CSS specificity. Change the selectors or paste in your own. Specificity Calculator was built by Keegan Street. The specificity calculator JavaScript module is available on GitHub or via npm install specificity. Specificity Calculator is built for CSS Selectors Level 4. Care has been taken to ensure results are accurate. If you find a defect, please report it.
ブラウザのCSS解釈方法についての衝撃事実 - Qiita
上記のようなコードがあったとき、以下の順序でブラウザは解釈・実行していると思っていました。 1. sampleクラスを見つける 2. 1の子孫のtable要素を見つける 3. 2の子孫のtd要素を見つける 4. 文字色を赤くする 正しい見解 上記のようなコードがあったとき、以下の順序でブラウザは解釈・実行しているらしいです。 1. 全てのtd要素を見つける 2. 1の先祖要素にtable要素が存在するかを確認 3. 2のtable要素の先祖要素にsampleクラスが存在するかを確認 4. 文字色を赤くする このように、CSSセレクタは右から左へと照合されていきます。 ※一番右側のセレクタは、キーセレクタと呼ばれるらしいです 何が問題か？ 例えば、以下のようなHTMLコードがあったとします。 上記のCSSコードでsampleクラス配下の表の文字色を赤くしようとすると、まずDO
safariのみに適用させるcssハックが効かないときに試す最新の記述方法【2017年】 - SublimeなLife日記
i-block-chromeのsafari向けcssハックは効かない 化石のような旧時代のhtmlのページの修正をしていて、どうしてもsafariのみに適用させるcssハックが必要になりました。 しかし、2017年2月現在、検索で上位に出てくる以下のようなハックは効かないです。 @media screen and (-webkit-min-device-pixel-ratio:0) { ::i-block-chrome, .css_selector { background-color: red; } } safariのみに適用させるcssハック 最新のsafari向けのcssハックは以下のような書き方です。 _::-webkit-full-page-media, _:future, :root .css_selector { background-color: red; }いろいろと調べ
5000兆円欲しい！.css
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-
5000兆円欲しい！.css
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-
背景色(background-color)を透過させて文字色は不透明にする方法とhtml,slim,css,scssでの記述方法 - Qiita
背景色(background-color)を透過させて文字色は不透明にする方法とhtml,slim,css,scssでの記述方法HTMLCSSscssslim 今回は、背景色(background-color)は透過させたいけど文字は不透明(そのまま)にする方法をご紹介します。どちらも簡単なので、ぜひ参考にしてください(>ω<) ポイントは色をカラーコードではなく、rgbaで指定することです。 今回は赤い半透明の背景色をつけてみたいと思います。 ※rgbaに簡単に変換してくれている便利なサイトをみつけました rgba r=red(赤)、g=green(緑)、b=blue(青)、a=alphachannel(アルファ)を表します。 アルファチャンネルは透明度を表します。 アルファチャンネルを指定しないと不透明な赤色の背景色がつきます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSで実装する次のコンテンツへと促すスクロールダウンボタン 10 - NxWorld
MUSUBii
https://blog.mismithportfolio.com/web/20160105slidebarsjs
ol,li,リストで括弧付の数字を作る方法 | Webお役立ちネタ帳
ごめんなさいね。 - Lopan.jp
