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
CSSだけ！文字にグラデーションを付ける方法＆サンプルコード集 ｜ 向壁虚造
タイトルや見出しに視覚的な趣向を凝らしたいなら「グラデーション」がおすすめです。 例えば下図のような具合に、見出しにグラデーションをかけるだけで、ページ全体に華やかな印象が加わります。 HTML＆CSSで一工夫するだけで、彩り豊かなグラデーション文字を作ることができます。 今回は、HTML＆CSSで文字にグラデーションを付けるテクニックをご紹介したいと思います。 また、記事の後半ではコピペで実装できるサンプルデザインも掲載しているので、すぐにグラデーション文字を使いたい方はどうぞ。 １．CSSで文字にグラデーションを付ける手順 まず、CSSには一発で文字にグラデーションを付けるようなプロパティや値はありません。 グラデーション文字を作るには複数のコードを組み合わせる必要があります。 具体的には、以下の３つのプロパティ・値を使って、グラデーション文字を描画していきます。 background
CSSだけで作る超軽量ポップアップモーダルウインドウ（スマホ対応） - Qiita
スペースの限られたスマホサイトなどで注釈や解説を付けたい場合に重宝します LightboxのようなUIを目指しました 背景の半透明グレーのところをクリックするとウインドウが閉じます ポップアップの中の要素が枠の高さを超える場合、縦スクロールが出るので、長い内容でも見せることができます デモ jsbin html <div class="popupModal1"> <input type="radio" name="modalPop" id="pop11" /> <label for="pop11">クリックでポップアップ</label> <input type="radio" name="modalPop" id="pop12" /> <label for="pop12">CLOSE</label> <input type="radio" name="modalPop" id="pop13
表示領域にピタッと移動！CSSでスクロールスナップを実装しよう
2019年1月11日 CSS 画面領域いっぱいに広がるフルスクリーンレイアウト。近年ではよく目にしますね。スクロールした時に画面にピタッと各エリアを表示させたい時に使えるのが「CSSスクロールスナップ」です。JavaScriptなしでスクロール位置を調整してくれますよ！ ↑私が10年以上利用している会計ソフト！ スクロールスナップの基本 See the Pen scroll-snap basic demo by Mana (@manabox) on CodePen. スクロールすると、各エリアの中途半端な位置で停止せず、エリアがすべて見える位置でピタッと止まりますね！このデモの構成を見ていきましょう： HTML ピタッと移動させたい各要素を親要素で囲みます。この例では親要素に「container」、子要素に「area」というクラスをつけました。 <div class="container"
Get Started with the Google Fonts API | Google for Developers
Get Started with the Google Fonts API Stay organized with collections Save and categorize content based on your preferences. This guide explains how to use the Google Fonts API to add fonts to your web pages. You don't need to do any programming; all you have to do is add a special stylesheet link to your HTML document, then refer to the font in a CSS style. A quick example Here's an example. Copy
prefers-color-scheme を用いた Dark Mode 対応と User Preference Media Features | blog.jxck.io
Intro macOS Mojava は OS レベルで Dark Mode に対応した。 しかし、 Web コンテンツは依然として白背景黒文字ベースのデザインが多く、結果ブラウザの中だけ眩しいという問題がある。 Safari TP69 では、これにメディアクエリで対応するための prefers-color-scheme が実装された。 これを用いた DarkMode 対応と、本ブログの DarkMode 対応、および策定中の User Preference Media Features について解説する。 Update 画像の対応について追記した Code Block の対応について追記した 2019/1 に Chrome の Intents が出された。 Intent to Implement: Media Queries: prefers-color-scheme feature I
[CSSアニメーション]●●●CSSでタピオカ作ってふわふわ浮かせる●●● - Qiita
この記事について CSSアニメーションを使って複数要素をばらばらにふわふわさせる方法を覚えたので記事を書こうと思ったけど、特にふわふわさせたいものもなかったのでタピオカを作って浮かせてみたぞい。 タピオカはそんなに好きじゃないけど丸くてかわいいよな・・・(´・ω・`) See the Pen pozEpao by Mayu Mameuda (@mayu-mameuda) on CodePen. カップとかストローとかもCSSで作ってみた。 せっかくなのでカップとかのところも解説するぞ。 (アニメーションのやり方だけ知りたい人は「ついにタピオカ」まで飛んでくれ〜〜〜) 全国のタピオカ好きのみんなに見てほしい・・・・ カップのCSS カップを構成している要素は大きく全部で5つ。 ・カップ ・カップの蓋 ・カップの中身 ・ストロー ・タピオカ こんな感じにパーツを分けて作ったよ。 パーツごとに作
![[CSSアニメーション]●●●CSSでタピオカ作ってふわふわ浮かせる●●● - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/906db1b90be9801bc25f75431bb2d98811c6b740/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9JTVCQ1NTJUUzJTgyJUEyJUUzJTgzJThCJUUzJTgzJUExJUUzJTgzJUJDJUUzJTgyJUI3JUUzJTgzJUE3JUUzJTgzJUIzJTVEJUUyJTk3JThGJUUyJTk3JThGJUUyJTk3JThGQ1NTJUUzJTgxJUE3JUUzJTgyJUJGJUUzJTgzJTk0JUUzJTgyJUFBJUUzJTgyJUFCJUU0JUJEJTlDJUUzJTgxJUEzJUUzJTgxJUE2JUUzJTgxJUI1JUUzJTgyJThGJUUzJTgxJUI1JUUzJTgyJThGJUU2JUI1JUFFJUUzJTgxJThCJUUzJTgxJTlCJUUzJTgyJThCJUUyJTk3JThGJUUyJTk3JThGJUUyJTk3JThGJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0zYTBiMjhmMGU0MDUyZDU5NGRkNGM3YzlkZmJjMDhiMA%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwbWFtZV9oYXNoYmlsbCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NDliN2YwMGYxY2U3YjJkMjQ3MWU2MWFhNzAyMDRiNzQ%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Decfadd57a3dd29570ae6092cea568f09)
CSSでドット柄（水玉）を作る方法 | コトダマウェブ
円形グラデーションというのはこんな感じのグラデーションです。 ここでは円形のグラデーションをスタイルシートで実装する方法について見ていきます。 線形グラデーションについて知りたい方は下記の記事もご参照ください。 radial-gr... radial-gradient関数を理解していないと、この先の話がよく分からないと思いますので、気をつけてくださいね。 それでは、最初にドットをひとつだけ作ってみます。 See the Pen dot01 by kenichi (@ken81) on CodePen. まずは、分かりやすくするために要素のサイズとbackground-sizeの値を同じにしました。radial-gradientを使って中心の色を黄色に、外側の色を青に指定してあります。 余談ですが、正方形の要素にぴったり収まる円を作るには、radial-gradientでグラデーションの終了
CSSで複数の属性セレクタを指定する - Qiita
div[data-color="red"][data-size="small"]{ background-color: red; font-size: 10px; } var colorVal = 'red'; var sizeVal = 'small'; $('div[data-color="' + colorVal + '"][data-size="' + sizeVal + '"]').show(); Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up
★★CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）
HTML <header> <div id="nav-drawer"> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input"><span></span></label> <label class="nav-unshown" id="nav-close" for="nav-input"></label> <div id="nav-content">ここに中身を入れる</div> </div> </header> inputやらlabelやらが入っていて、何のことが分かりづらいかと思うので、少し解説をします。 解説 全体はheaderで囲んでいます。他にもサイトタイトルやロゴ画像を入れるのではないかと思います。<div id="nav-drawer">の中に
CSSでwebフォントの読み込みが遅い問題を改善する方法 - Qiita
💀 Webフォントの問題点 Webフォントに限らず、ブラウザでテキストを表示する過程には、フォントの読み込み作業が存在します。また、フォントを読み終えるまではテキストを表示させない機能1がブラウザには組み込まれています。 ローカル環境下のフォントであれば読み込みに時間はあまりかからないので問題ありませんが、webフォントの場合はローカルフォントと比べると読み込みに多くの時間を要してしまいます。 この機能の影響で、ページのロードをしてからテキストが表示されるまでの間、ユーザーはテキストを読むことができない為、不満や苛立ちを覚え、体験価値の低下やページの離脱を引き起こすと考えられます。 ⚔️ 'font-display'プロパティでこの問題に立ち向かう font-displayというCSSプロパティを用いることで、webフォントを読み終えるまではローカルフォントを代替的にロードし、テキストの
CSS Grid Layout を極める！（基礎編） - Qiita
0. はじめに CSS Grid Layout（グリッドレイアウト）は、2次元レイアウト を、HTML/CSS を使って簡単・自由に操作できる、CSSの新しい機能です。 格子状のマス目のグリッドに好きな順番に配置したり結合したりすることで、様々なレイアウトが可能になります。 例えば、こんな簡単なHTMLで・・・ <body> <h1>タイトル</h1> <article>記事1</article> <article>記事2</article> <article>記事3</article> <article>記事4</article> <nav>ナビ</nav> <footer>フッター</footer> </body> CSSをちょっと書けば、こんなレイアウトが出来てしまいます！ 当記事では、こんなレイアウトを可能にする CSS Grid Layout の解説をしていきます。 尚、CSS
ぼくの考えたさいきょうのCSSだけで2pxの縁取り文字【2017/7/28追記】 - Qiita
まずは1pxの縁取り CSSのtext-shadowのみを使って、白文字+黒の1px縁取りをしてみます。 考え方としては ぼかしを0pxにして塗りつぶしの影を作る 1pxずつずらして複数指定することで縁取りっぽく見せる LIGさんの記事で素晴らしい解説がありました。 2.テキストシャドウ使う方法 text-shadow: black 1px 1px 0px, black -1px 1px 0px, black 1px -1px 0px, black -1px -1px 0px; 引用元：IEでもキレイ！ブラウザ上でアウトライン（縁取り）を表現する方法 ▼1px四方向の出力サンプル▼ 1pxの縁取りであれば、上下左右の指定だけで結構いい感じになります。 2017/7/28追記 1pxでキレイな縁取り 上記の方法だと、右下、左上、左下、右上の4方向なので、上下左右に縁取りがないことになってまし
【CSS3】@keyframes と animation 関連のまとめ - Qiita
はじめに animation プロパティと @keyframes を使うと、CSSだけでアニメーションの設定ができます。 簡単にアニメーションの設定ができるので、覚えると楽しいです。 そもそもアニメーションって？ アニメーションの意味をググると動画と書かれていますが、動画というよりは、動きまたは変化という意味で捉える方が理解しやすいかと思います。 この記事でも、アニメーションという単語を用いて説明しますが、動きまたは変化という意味で読んでください。 最初は @keyframes について見ていきましょう。 説明するときに英語の読み方も記載していますが、参考程度に見てください。 keyframes について @keyframes は、アニメーション開始から終了するまでどのようなアニメーションをするのか指定できるCSSの文法です。 @keyframes は、@規則のため、@から始まり、波括弧内
CSS3のanimation（アニメーション）で春うららかな桜を降らせてみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもですよ、はやちですよ✌(´ʘ‿ʘ｀)✌ めっきり春ですね、ほかほかして春はなんとなくねむいです( ˘ω˘)ｸｿﾈﾐ 花を見に散歩したいところですが買い込んだゲームをクリアしなきゃいけないので、もうしばらくインドア生活になりそうです( ˘ω˘) そんなのはどうでもいいですね。 今回は春らしくCSS3のanimationで桜を降らしてみようと思います( ˘ω˘)☝ 【こちらもおすすめ】 ☞ 「CSS3とjQueryでオリジナル画像のスプライトアニメーションを実装する方法」 実装方法 それでは実装方法をご紹介いたします( ˘ω˘)☝ 画像の用意 まずは降らせる用の桜の画像を用意します。 今回はこんな感じなの用意しました( ˘ω˘)☞ html マークアップはこのようになります。 降らせたい桜には、あらかじめdivを複数用意します( ˘ω˘)☝ <section id="sakura"> <
【CSS3】話題のパララックス効果をスクリプト無しで実装する方法。
昨年、2013年度あたりから普及し始め、今年も大流行したウェブデザインのテクニックの１つである［パララックス・スクロール］をCSS3だけで実装する方法を紹介します。 パララックス（Parallax）とは日本語に訳すと「視差効果」を意味し、主にマウスの動きに合わせて特定の要素のスクロール量をコントロールして、ウェブサイトに奥行きや遠近感を表現する手法です。 「パララックス・スクロール」の他に、「パララックス・デザイン」や「パララックス・エフェクト」とも呼ばれています。 まずは動作のサンプルをご覧ください。 CSS3 パララックス・スクロール：動作サンプル 上記サンプルサイトでは、Internet Explorer 以外のモダンブラウザ（Safari、Google Chrome、Firefox、Opera等）をお使いの場合、「開発モード」のボタンをチェックするとレイヤーが3D化されるので構造を
日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の
CSS3 Flexbox 並べ方まとめ - Qiita
<div id="flex"> <div class="flex-item">A</div> <div class="flex-item">B</div> <div class="flex-item">C</div> <div class="flex-item">D</div> <div class="flex-item">E</div> <div class="flex-item">F</div> <div class="flex-item">G</div> </div> *{ margin: 0; padding: 0; } /* #flexを画面中央に配置 */ html,body{ height: 100%; display: flex; justify-content: center; align-items: center; } /* flex-container */ #fl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSグラデーションで作った背景パターンのサンプル - NxWorld
【CSS】input type=”text” に width 100% を指定するとはみ出る原因と対処方法 – 熊本のWEB制作SEO | poroaブログ