CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する
2021年12月28日 CSS 大きさの異なる複数のボックスを隙間なく並べてタイル状に表示したい！そんな時もありますよね。モザイクレイアウト、Masonryレイアウト、Windows 8 Metroスタイルレイアウト…などなど、さまざまな呼び方のあるこのレイアウト。今回は display: grid という新しい配置方法を使ってレイアウトを組んでみますよ！もちろんレスポンシブにも対応させたいと思います！ ↑私が10年以上利用している会計ソフト！ CSSグリッドの基本の書き方は動画で確認！ 基本的な記述方法は動画でも紹介しています。初めてCSSグリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう！ 1. どんなレイアウトにするか書き出す グリッドレイアウトは少し複雑で、何も考えず組んでいくとどこの要素がどうなっているのか…こんがらがってきちゃいます。ご利用は計画的に！慣れるま
【可変対応】中のテキストをはっきり表示させたまま、ブレンドモード（mix-blend-mode）を使おう！
【可変対応】中のテキストをはっきり表示させたまま、ブレンドモード（mix-blend-mode）を使おう！ 『乗算』などを再現できるcssのブレンドモード（mix-blend-mode）。 大変便利なのですが、背景色だけ乗算をして文字はそのまま…ということが工夫をしないと地味に難しかったりします。 上の画像のように表現をしたかったのに、何も考えずに背景色と一緒にブレンドモード（今回は乗算）を設定すると以下のような感じになってしまいます。 See the Pen ブレンドモード（テキストが埋もれる） by kkdd (@kk8kk) on CodePen. 要はテキストも一緒に乗算になっているので想定したデザインのようになりません。 ということでひと工夫が必要です。 例えばabsoluteを使って固定の幅・高さで設定したらあっという間にできます。 が、可変に対応できずいまいち汎用性がありませ
祝解禁！IEがなくなって使えるようになった便利なCSS 8選
2022年6月16日、IEのサポートが切れました。フロントのエンジニアにとっての念願が叶った、記念すべき日です。IE6の頃から苦しめられてきた私ももちろんのこと浮かれています。 ただ、IEを除外することによって使用できるCSSが大幅に増え、勉強しなければならないこともまた増えました。少しずつ慣れていきましょう。 今日は使用できるようになったCSSで、頻度が高そうなものからいくつかご紹介したいと思います。 object-fit 今までは、画像をアスペクト比を維持したまま領域一杯に表示したい時は、backgroundに設定する必要がありました。object-fit を使えばimgタグとして使用できます。 今まで divなどの要素にbackgroundを指定しました。これではSEOやアクセシビリティの観点から良くありません。 ＜HTML＞
改行を自動で！CSSで文字列を折り返しする方法【初心者向け】現役Webデザイナーが解説
折り返す書き方 CSSを使って、1つの要素の中で文章を折り返して表現する方法として以下の2つがあります。 overflow-wrap（文章が領域の端に来た時に、単語の途中で改行するかどうかの設定） word-break（長い単語が領域の端に来た時に、単語の途中で改行するかどうかの設定） CSSの公式ドキュメントを見ると、このように記載されているはずです。 注意してほしいのは、ここで言う単語 というのは、英文における英単語のこと。 そして、実際に辞書に登録されている英単語かどうかは関係ありません。 英文でスペースなどの記号で区切られている一つのかたまりを、英単語と捉えて動作します。 単語の区切りとして解釈される記号は「スペース」「？」「-」「、」「。」などがあります。 そして日本語は、「単語」や「文章」で説明されている上記の動きとは、まったく異なります。 それぞれ詳しく見ていきましょう。 o
【2023年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例
この記事では、フォントを指定するためのCSSプロパティ「font-family」の書き方について一から詳しく解説します。font-familyを設定したことが無い方でも、正しくフォントが指定できるように、プロパティの書き方から、OSごとの設定の違い、おすすめのフォント設定例などもご紹介します。 「font-familyはいつもコピペしている…」なんて方も、正しい知識が有るか無いかは大きな違いです。ぜひこの機会に、font-familyの正しい設定方法をマスターしてください。 ※本記事は、各OSの標準インストールフォントや、ブラウザのアップデート状況などを踏まえて、なるべく最新の情報をお届けできるように、内容を随時更新しています。著者の調査した情報に基づいて執筆しているため、内容に間違いや不備のある可能性もあります。（最終調査日：2023年7月） font-familyの役割とは CSSのf
どの環境でも綺麗なゴシック体、明朝体のフォントを指定する | GRAYCODE HTML&CSS
ブラウザやOSによって異なるフォントですが、どの環境でも綺麗に表示されるゴシック体／明朝体を指定する方法について解説します。 この記事のポイント 様々な閲覧環境におけるフォントの表示を確認する どの環境で閲覧しても近い見た目のフォントを選ぶ Windows環境でも綺麗な明朝体を表示する 閲覧者の環境によって見え方が異なるフォント HTMLのフォントはfont-familyプロパティで指定することができますが、サイトを閲覧する人のOSやブラウザによって表示はかなり異なります。 それでも制作の都合上、可能な範囲で表示を同じように見えるよう整えたいものです。 そこで今回は、環境ごとのフォントの見え方を確認しつつ、ゴシック体や明朝体に整える方法について解説していきます。 Webフォントについては、別記事「Webフォントを使う」をご覧ください。 環境ごとのフォントの表示例 まずは、font-fami
【リセットCSSとは？】７つのリセットCSSを比較検証！ - WEBCAMP MEDIA
「リセットCSSが何か知りたい」、「リセットCSSはたくさんあるけど、どれを選べばよいわからない」という方にぜひ読んで頂きたい記事です。 この記事では、7つのリセットCSSを反映したHTMLファイルの実行結果を比較検証します。 （リセットCSSのコードはコピペで使えるので、ぜひ参考にしてください。） 記事の結論部分には、各リセットCSSの特徴とオススメ度をまとめた表も載せているので、結論だけ気になる方はそちらを参照してみて下さい。 また、DMM WEBCAMPではCSSを最短1か月で習得することができます。 「独学でつまづいている」「自分一人では学習が不安…」という方はまずは無料カウンセリングへ！ リセットCSSの基礎知識 まずはじめに、「リセットCSSとは何か？」を解説します。 リセットCSSとは？なぜ必要なのか？ リセットCSSとは、ブラウザがデフォルトで持っているCSSを打ち消すCS
Background-image(背景画像)を透過させるCSS｜おがわ
マーケティングトレースを行った次の日は、CSSの初歩的でもないお話です。 CSSのBackground-imageを透過させたい、というのは、Webページ作ってりゃ誰しも思うことです。 img要素やdiv要素であればopacityを設計すればおわりです。 しかしこれがbackground-imageを使うときは、若干話が変わってきます。 というのも、background-imageにはOpacityが適用されません。 まあ、当然と言えば当然です。background-imageは要素じゃないもん。 透過したいからと言って「opacity」でググっても、img要素やdiv要素を投下させる方法ばっか。そりゃそうですよ。background-imageにはopacityが効かないのですから。 サルワカくんもdivとimgのopacityしか説明してくれません。 解決方法があるにはあるのですが、透
How do I set distance between flexbox items?
To set the minimal distance between flexbox items I'm using margin: 0 5px on .item and margin: 0 -5px on container. This seems like a hack. Is there another property or method intended to accomplish this goal? #box { display: flex; width: 100px; margin: 0 -5px; } .item { background: gray; width: 50px; height: 50px; margin: 0 5px; } <div id='box'> <div class='item'></div> <div class='item'></div> <
CSS Device Adaptation (Editor's Draft)
CSS Viewport Module Level 1 W3C First Public Working Draft, 25 January 2024 More details about this document This version: https://www.w3.org/TR/2024/WD-css-viewport-1-20240125/ Latest published version: https://www.w3.org/TR/css-viewport-1/ Editor's Draft: https://drafts.csswg.org/css-viewport/ Previous Versions: https://www.w3.org/TR/2016/WD-css-device-adapt-1-20160329/ History: https://www.w3.o
iframeのレスポンシブ対応はもの凄く簡単 - Webデザイン・プログラミングオンライン個別指導のAkros
今日は、意識してあまり使わない要素でもある「iframe」要素についてのお話しになります。 html5になってからも少ないですが、使われる機会があるiframe要素ですが、皆さんはどんな時に使ったりしますか？ よくある例としては、Google MapやYoutube動画の埋め込みがあると思いますが、そのときのレスポンシブ対応について、実はものすごく簡単に対応できますので、知らない方に向けての記事になります！ iframeは固定？ Google Mapを例にiframe要素を見てみると、「埋め込みサイズ」を決める必要があります。 そのため、レスポンシブ（＝デバイス幅による動的変化）はできないかも？と思ってる方が意外と多いようです。 確かに、属性でサイズを指定しただけですと「固定」となりますが、CSSを使うことによってレスポンシブ対応は可能です。 ブラウザによって多少異なるかもしれませんが、基
[CSS]テキストに影を落とすCSS3 のプロパティ「text-shadow」
テキストに影を落とすCSS3 のプロパティ text-shadow についてまとめました。 前回紹介させていただいた、ボックスに影を付ける box-shadow プロパティと使い方は似ています。 text-shadow の記述方法 以下、text-shadow の基本的な使い方です。 p { -moz-text-shadow:5px 5px 5px #ccc; -webkit-box-shadow:5px 5px 5px #ccc; box-shadow:5px 5px 5px #ccc; } ※Firefox向け、Safari や Chrome向けのベンダープレフィックスも付けておきます。 text-shadow の値 text-shadow の値は以下のようになります。 1番目
![[CSS]テキストに影を落とすCSS3 のプロパティ「text-shadow」](https://cdn-ak-scissors.b.st-hatena.com/image/square/38292673eca1b9185cfd803dac63b56f05653fca/height=288;version=1;width=512/https%3A%2F%2Fwww.webantena.net%2Fwp-content%2Fuploads%2F2013%2F02%2Ftextshadow.png)
コンテンツ幅より大きい画像を中央位置に配置する
メインビジュアルなどでたまにやるのですが、コンテンツ幅より幅の広い画像を中央配置にして、タブレットなどのコンテンツ幅で表示する場合には左右が切れた状態、幅の広いブラウザではコンテンツ幅より大きな状態で見せたいときの方法です。 サンプルコード HTML <div id="visual"> <div id="visual-image"><img src="img.jpg" width="1600" height="500" alt="" /></div> </div> CSS #visual { width: 100%; min-width: 960px; overflow: hidden; } #visual-image { position: relative; left: 50%; /* 画像の左端が画面中央にくる */ margin-left: -800px; /* 画像幅1600px
aspect-ratio - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
IE では main 要素の display は inline なので注意する
HTML5 から追加された要素 main ですが、レイアウトに導入するには注意が必要です。 IE9 ~ IE11(開発者ツール上は Edge 表記)では、main 要素の display プロパティの規定値は inline です。 したがって、ページ全体の構成を main 要素で指定する場合には、main 要素に display:block を指定する必要があります。 Chrome や FireFox などは、main 要素の display プロパティの規定値は block ですから、重複する指定になりますが、IE のために回避できません。 main 要素に対して margin や padding が効かないときや、float や width が期待したとおりに動作しないときは、 main 要素の display プロパティを確認します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
display: grid;を使ってレスポンシブ時に要素の順番が変わるレイアウトを攻略する
CSS Nesting | Can I use... Support tables for HTML5, CSS3, etc
マイナポイントの申請方法！ポイントの付与期限や注意点についても解説｜お金と暮らしの相談カフェ
iPhoneのSafariでフォントサイズが勝手に変わる際の対処法
SCSSの変数と、CSS3のcalc()を併用するには - Qiita
