この記事の概要 CSS Grid を使うと、スクリーンの幅にあわせて列数や列サイズを可変させて、簡単にレスポンシブな実装ができます。 しかし、margin や padding、gap といった余白関連のプロパティは固定値です。 そのアンバランスさを解消すべく記事を書きました。
CSS Grid で repeat auto-fit や minmax を使って可変サイズを実現しても余白は固定なのかあ……待てよ？ - Qiita
この記事の概要 CSS Grid を使うと、スクリーンの幅にあわせて列数や列サイズを可変させて、簡単にレスポンシブな実装ができます。 しかし、margin や padding、gap といった余白関連のプロパティは固定値です。 そのアンバランスさを解消すべく記事を書きました。
CSSで左下・右下にある画像を回り込ませたい！ ｜ Tips Note by TAM
左上や右上にある画像をfloatタグを使って回り込ませるのはよく使いますが、 下記のように画像が左下・右下にあった場合はどう組めばいいかを紹介します！ 画像が左下にある場合のソースです See the Pen JOaxmx by ayumi (@tam-takayama) on CodePen. 解説します この場合「#left-box」で全体をつつんでいて、float解除の為にoverflow:hiddenをつけています。もし、はみ出させたい要素があるなどの理由でoverflow:hiddenが使えない場合はclearfixを使ってください。 参考記事: もう一度、「clearfix」について考えてみた。 画像の上に「.space」をのせているイメージです。縦幅によって画像が上下しますのでお好みで数字を変えてください。「%」単位でも可能です。 「.img」で上に乗っている「.space」
CSSで固定背景画像をセクションごとに切り替えるパララックス実装
はじめに 実装したいのはこんなパララックスです。 各セクション間に背景画像が見えていて、セクションごとに異なる画像に切り替わります。 これを2通りの方法で実装してみます。 background-attachment: fixed で実装 position: fixed + clip-path で実装 先に書いておくと、background-attachment: fixed を使う方法はiOS Safariでうまく動かなかった（2024年9月時点）ため、実際のプロダクトでは後者の方法で実装しました。 必要に応じて前者は読み飛ばしてください。 1. background-attachment: fixed で実装 特筆ポイントは、background-imageを指定している要素にbackground-attachment: fixed;を指定している点です。 背景画像を固定してくれます。
実例で学ぶFlexboxとCSS Gridの使い分け – TAKLOG
タイムラインを見ていると「flexとgridの使い分けがよく分からないよ」という人が多く散見されるので、今回は僕が普段意識していることを皆さんに紹介します。 これから紹介することはあくまで僕のやり方で、絶対的な正解とかではないので参考程度に留めておいてください。実装において頻出するレイアウトをサンプルに、どのように考えてレイアウトを組んでいけばよいかを自分なりに説明できたらなと思います。 はじめに僕がレイアウトを組む上で大事にしていること、および意識していること。それは、レイアウトに変化が起こった際に崩れが生じないことはもちろん、将来的な変更に対して柔軟に対応できることです。 極論を言ってしまえばgridは使わなくても大抵のレイアウトは組めてしまいます。Internet Explorerに苦しめられていたあの頃を思い出してみてください。現在でもgridは難解だからflexだけ使用するって方
CSSのみで実装できる！テキストリンクのホバー時に、カラーをアニメーションで変更させる実装方法のまとめ
テキストリンクをホバーした際に、テキストのカラーをスライドのアニメーションで変更させるピュアCSSの実装方法を紹介します。 IEには対応してないけど実装が簡単な方法、IEに対応しているけど実装がちょっと面倒な方法など、プロジェクトの要件に適したテクニックをご利用ください。 4 Ways to Animate the Color of a Text Link on Hover by Katherine Kato 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. background-clip: text;を使ったテクニック 2. widthまたはheightを使ったテクニック 3. clip-pathを使用したテクニック 4. transformを使用したテクニック まとめ はじめに ホバー時にテキストリンクのカラー
CSSのclass名やJavaScriptの関数名を付けるときに役立つ単語リストのまとめ -Classnames
CSSのclass名やJavaScriptの関数名を付けるときに悩んだり、ネタ切れになったことはありませんか？ BEM, OOCSS, SMACSSで命名する場合はそれを使用すればよいのですが、特定のテーマ別にグループ化された単語のリストが必要になるときもあります。そんなときに役立つ単語リストをまとめたClassnamesを紹介します。 Classnames Classnamesは、CSSのclass名やJavaScriptの関数名を付けるときに便利な単語をリスト化したものです。MITライセンスで、商用プロジェクトでも無料で利用できます。
CSSのSubgridが全ブラウザ対応。Gridの入れ子の基本から応用までを完全理解する
2023/9/12にChrome 117、9/15にEdge 117がリリースされ、CSSのSubgridが全ブラウザに対応しました。 Subgridとは、CSS Gridで新しく使えるようになった機能の一つ。行列（グリッド）を入れ子にして、親行列の行や列に子行列を整列させることが可能です。 この記事では、Subgridの基本から応用までを具体的なデモを交えて詳しく解説します。CSS Gridが初めての人でもわかりやすいよう、CSS Grid自体の解説も盛り込んでいます。 前提知識: CSS Gridとは CSS Gridとは、行と列を使ったレイアウトのことです。行・列とは、次の方向を指します。 CSS Gridを使うと、次のようなことができます。 ■ エリア名を指定して配置できる ■ 行列を繰り返したり、隙間をつくる ■ 行・列数の自動変更、敷き詰め 複雑な行列の入れ子と、subgrid
scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する
scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する 2024.06.01 子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがクラシックスクロールバーの場合、スクロールバーの表示・非表示によりボックスの幅が変わるため、画面がガタつくことがあります。scrollbar-gutter プロパティを使うとスクロールバー用のスペースをあらかじめ確保でき、画面のガタツキを解消できます。 子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがどのように表示されるかは OS やブラウザの設定により異なりますが、大きく分けて以下
CSS filter generator to convert from black to target hex color
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 filter】svgをJSなし・インライン読み込みなしで自由に色を変更する方法！ | ブルーシュ
公開日：2021/10/25 13:57更新日：2022/9/15 15:53 ホーム > Tips > フロントエンド 【CSS filter】svgをJSなし・インライン読み込みなしで自由に色を変更する方法！ css, 軽量化, 画像, svg ※追記：2022年8月31日 mask-imageでも簡単に色を変えられます。ぜひこちらの新しい記事もご覧ください。 →【CSS mask-image】SVGなどのアイコン画像の色を変更する方法！ svg画像をCSSで制御して色を変えたりするためには、インラインで読み込みしなければいけません。 こうなる。 そうするとHTMLファイルがすごいことになります。少なくとも人間にとっては読みにくくなってしまいます。 それを回避するために、いろいろ方法がありますが、現時点で私が一番楽だと思う方法をご紹介。 SVG以外の形式でも使えるよ！ 1. SVGを黒
令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
Web制作者はダウンロードしておきたい！ CSS関連の最新版チートシートのまとめ
CSS GridやFlexboxで配置するプロパティ値は？ 先頭の3つだけを指定するセレクタは？ という「あれは何だっけ？」に役立つのが、チートシートです。 CSS GridやFlexboxの各プロパティ・値でどのように配置されるのか、セレクタやnth-child()やdisplayやposition、VS CodeやGitのコマンドがまとめられたチートシートを紹介します。 チートシートは高解像度版が用意されており、ダウンロードしておくと便利です。 CheatSheets -GitHub チートシートはすべて、「ご自由にダウンロードしてご利用してください」とのことです。チートシートは高解像度版を無料でダウンロードでき、モニターの壁紙や印刷して机の脇に貼っておいても便利です。 では、どんなチートシートがあるのか紹介します。 まずは、CSS Flexboxのチートシート。Flexboxの各プロ
UIデザインで中央配置がずれてしまう理由と解決方法
UIデザインには、至る所に中央揃えが使用されます。 しかし、アイコンとテキストが美しく揃わない、テキストがボタンの中央からずれている、そんなことはありませんか？ UIデザインで中央配置がずれてしまうときの理由、実装時にデベロッパーができること、デザイナーができること、数字的そして視覚的な調整方法などを紹介します。すぐに実装で試したくなることばかりです。 Hardest Problem in Computer Science: Centering Things by Niki Tonsky 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに フォントにおける中央揃え line-heightにおける中央揃え アイコンにおける中央揃え アイコンフォントにおける中央揃え 中央配置がずれているのは、スキルの問題 水平方向の中央揃え
少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集 – TAKLOG
少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。最近クローズドな場所で登壇を行ったのですが、そちらで話した内容を纏めたものにいくつか内容を追加したものとなります。 原則的にこのブログで取り入れられている手法だったり過去の記事で触れた手法を紹介したものです。 button要素には touch-action:manipulation を指定するiOS限定の話ではありますが、button要素をつい連続でタップすると画面が拡大表示されてしまい非常に煩わしいです。 ポストを別枠で表示する そのため、パンおよびズームのジェスチャーは有効にしつつダブルタップ時のズームなどの標準外の追加的なジェスチャーを無効にするtouch-action:manipulationを指定して誤作動を防止しておくと良いでしょう。
文章の折り返し指定のCSS最新版 - ICS MEDIA
文章の折り返しはウェブ制作において意外と難しいものです。URLが文章に含まれている場合、URLがレイアウトを突き抜けてしまった、という経験をみなさんはお持ちではないでしょうか？ この記事では、国内のウェブ制作において「開発者が考えることが少なくてよくなる」安全なCSS指定を紹介します。 結論から説明すると、以下の指定を提案します。 body { overflow-wrap: anywhere; /* 収まらない場合に折り返す */ word-break: normal; /* 単語の分割はデフォルトに依存 */ line-break: strict; /* 禁則処理を厳格に適用 */ } この記事では上記の指定にいたった理由と、折り返しの理解について必要なoverflow-wrapとword-breakプロパティを中心に解説します。 overflow-wrap overflow-wrapは
Webブラウザの日本語改行問題 -改行を実現するHTML/CSS-（1） - Qiita
日本語のWebサイト（ランディングページ等）をつくっていると、読みにくい所で改行されるパターンがありますよね？実際この記事もブラウザの横幅によって単語の途中なのに改行されています。普通に文章を読んでいる時には良いのですが、これがランディングページのヘッドラインで起きるとものすごいカッコ悪いです。 たとえばPhotoshopのページで「写真のレタッチ、合成、カラー変更」というヘッドラインが以下のようになってたらいかがでしょうか？この場合はできれば、「合成、」の後で改行されている方が自然で読みやすくなっています。（ちなみにこれは、Chrome Developer Toolsで編集して、わざと見にくくしたので、実際にはキレイに改行処理しています）。 よーしそれじゃあ<br>入れれば良いんだなと真っ先に思いついた方がいるでしょう。しかし今日はさまざまなデバイスが皆さんのWebサイトに訪れています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作の面倒におさらば、便利すぎるCSS時短ツールまとめ【2024年版】
2024年6月にXに投稿したCSSテクニックのまとめ – TAKLOG
【CSS】子要素が指定の数以下の場合にのみスタイルを適用する方法 - Qiita
CSSでマーカー（蛍光ペン）風の下線を引く（複数行・改行もOK）
