CSSの「display: block;」が「display: block flow;」になる、displayプロパティで2値構文がサポートされますCSSのdisplayプロパティはよく使用すると思います。値にflex, gridを設定したり、ブロックやインラインにしたい時にblock, inlineを設定します。 そんなdisplayプロパティで2つのキーワードを値として設定できる2値構文がサポートされます。すでにSafariとFirefoxにサポートされており、ChromeとEdgeは7月リリース予定の115でサポートされます。
画像で分かる、新しいCSS
この記事では、比較的新しいCSSプロパティやCSSの機能を画像で分かりやすく解説しています。 2021年にTwitterで「1枚の画像で新しいCSSがわかる」という連載をしていて、2023年に新しいブラウザーにあわせて再度連載していたのですが、その投稿内容をまとめて解説文などをブラッシュアップしたものです。 IE11のサポートが終了したことで、ほとんどのCSSプロパティやCSSの機能が利用可能になったので、ぜひ試してみてください。 画像・CODEPEN作成協力: emiさん backdrop-filter:blur() を使ったぼかし表現 backdrop-filter:blur()の中の数値を大きくするほど、強いぼかしをかけることができます。 以下のCODEPEN内の［CSS］をクリックすると、CSSを確認できます。 背景に写真を指定した .box 要素内に .blur を配置し、bac
IE終了後にWeb制作の現場で使えるHTML&CSSコード14選！おさえておきたいコードを集めてみた | Pulp Note
マイクロソフトから正式にInternet Explorer 11 デスクトップアプリケーションのサポートを終了する発表がありました。期限は2022年6月15日です。Webサイト制作者としては歓喜の出来事ですね。 ただ、IEを気にしなくてもいいという事は、IE対応をしてきたコードの見直しも必要となります。そこで今回は、IE未対応で泣く泣くスルーしてきた即戦力なHTMLやCSSコードを14個紹介します。2022年6月以降のために今から知識を蓄えておいてはいかがでしょうか。 ちなみに、『Windows10 LTSC』や『Windows Server上のInternet Explorer11 デスクトップアプリケーション』といった一部のIE11には影響はないとの事ですが、一般ユーザーが利用する『Windows10のInternet Explorer』はサポート対象外となりますので、これはIE終了と
新時代のCSS三角の作り方 clip-path 〜 さらば、すべての border 〜
CSSで三角を作る方法と言えば border でした。 私も三角を作りたい時は 「css 三角」 で検索、コピペして調整して作っていました。 ですが最近 clip-path というプロパティによってより分かりやすく三角が作れることを知ったので共有いたします。 ちなみに IE 以外では大丈夫そうです。逆を言うと IE 対応しなければいけない人は引き続き border で三角を作る必要があります。ここまでお読みいただきありがとうございました。 clip-path を使った三角の作り方 こう CSS を書くと .sankaku { background-color: blue; width: 16px; height: 20px; clip-path: polygon(0 0, 0% 100%, 100% 50%); } こうなります。 どこの点を結ぶかは clip-path で指定して、高さと
アコーディオンをCSSアニメーションとHTMLで実装する | Pulp Note
よくある質問でよく利用するアコーディオン機能をCSSアニメーションとHTMLで実装する方法です。JavaScriptは不要。IEのみ非対応なのですがPolyfillを使って機能させることができます。
CSS aspect-ratioプロパティの使い方、レスポンシブやレイアウトシフトで大活躍
先月アップデートされたChrome 88でaspect-ratioプロパティがサポートされ、FirefoxとSafariでもまもなくサポートされる予定となっています。 名前の通り、アスペクト比を定義できるCSSのプロパティですが、Webページやスマホアプリで実際にどのように使用すると便利なのか、その使い方を紹介します。 New aspect-ratio CSS property supported in Chromium, Safari Technology Preview, and Firefox Nightly by Una Kravets 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 アスペクト比とは object-fitプロパティ 古いハック: padding-topでアスペクト比を保つ aspect-ratioでアス
【CSS】CSSだけでタブ切り替えを作る方法 - bagelee（ベーグリー）
はじめに 今回はCSSだけでタブ切り替えを作る方法をご紹介します。 最近はCSSの使い方次第でできることが非常に多くなっているので、タブ切り替えなどちょっと動きがあるものでもJavaScriptを使わず作ることが可能です。 今回作成していくもの まずは、今回作成していくデモをご紹介します。 今回作成していくデモはこちらです。 See the Pen CSS tabs by Ayaka Sasaki (@ayausaspirit) on CodePen. HTML解説 では、中身のソースコードを見て行きましょう。 まず、今回の全体のHTMLはこのようになっています。 <div class="tabs"> <input id="all" type="radio" name="tab_item" checked> <label class="tab_item" for="all">総合</lab
CSSで二行目以降を1字下げる | MK2-BLOG～西宮のWEBデザイナー日記
注意書きが二行などになる場合、二行目からは1字下げて見た目を整えたい時がありますよね。 そんな時に使えるCSSです。注意書きだけじゃなく、箇条書きなどにも便利！ 結構使えるテクニックだと思います。 HTML <div class="att">※注意書きが二行などになる場合、二行目からは1字下げて見た目を整えたい時がありますよね。そんな時に使えるCSSです。注意書きだけじゃなく、箇条書きなどにも便利！</div> CSS .att { padding-left: 1em; text-indent: -1em; } ↑WEBデザインブログランキングです 良かったら応援お願いします♪ こちらの記事もチェックWEBデザイナーをやっててよかった！ 西宮のWEBデザイナ…ちゃんとCSSするためのスタイルガイド入門 先月、こちらの本の著…ホームページ制作実績 「ふぉるてぴあの音楽教室」様 ふぉるてぴあの
cssで縦方向中央に配置する方法（5つのケース＋1） | バシャログ。
iPhone 4Sが発売間近。 買おうか迷って一旦諦めたはずがまた迷い始めました、hakoishiです。 Siriに甘い言葉をささやきたい。英語できないけど。 さて、コーディングで縦中央にオブジェクトを配置したいことって少なくないですよね。 しかしながら、cssはそういうのちょっと苦手。 「ほら、あの時使ったアレだよアレ！」と過去のソースを掘り起こしてみても、状況が違ってて使えないケースも多かったり。 というわけで今回は、cssで縦中央配置するためのtipsを5つのパターンに分けてまとめました。 case1：画像の場合 上下方向中央を始点として画像を配置し、画像の縦サイズの1/2だけネガティブマージンで上に移動。 サンプル html <p class="case01"> <img src="http://dummyimage.com/100x100/000/fff.gif&text=img
CSS Buttons with Pseudo-elements | Codrops
In this tutorial, I’ll show you how to create buttons with a twist, using just one anchor tag per button and the great power of CSS. Hola, amigos. For the last month or so, I’ve been experimenting with the power of CSS pseudo-elements, specially when it comes to mixing them with buttons and that way recreating some great effects that were only possible to do with sprites, in the past. In this tuto
シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld
画像は使用せずにCSSだけでスタイリングしたタイトル（見出し）のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。 全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。 また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。 以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。 ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。
初心者がHTML/CSSを勉強するのにおすすめの入門記事・参考書 - Minimal Green
自動的に移動しない場合はをクリックしてください。
最新トレンドにも対応！コピペで使える実用性重視なCSSボタン９選
Web制作をする際に必ずと言っていいほど必要になるのが「ボタン」です。 今はCSSのみで作られているボタンが主流で、たくさんのライブラリやスニペットが出回っていますが、作っているサイトによってはアニメーションが過剰すぎたり、トーンが合わない場合も出てきます。 そこで今回は派手でかっこいいアニメーションというより、実用性や汎用性を重視したボタンに厳選して、コピペでお手軽に使用することができるCSSのボタンをいくつかご紹介します。少しお洒落にスタイリング・アニメーションしたいけど、そこそこでいい…と思っている方向けの厳選セレクションです。 コピペですぐ使える実用性の高いCSSボタン サイト上でカスタマイズするものより、もう少し高度なデザインをお求めの方は以下のサイトをご参考下さい。こちらは既に出来上がっているデザインのソースをダウンロードするタイプになりますので、カスタマイズには少々スキルが必
プロが実践するモダン CSS の書き方入門テクニック20選まとめ
海外サイトTutorialzineで公開された「20 Protips For Writing Modern CSS」の著者 Danny Markov より許可をもらい、翻訳転載しています。 この記事では、CSSスタイリングで実践したい、便利な20種類のテクニックをご紹介しています。CSSをはじめたばかりの初心者のひとにも合った内容も多く、あまり知られていない少しだけ高度で、より実践的なCSSテクニックまで学ぶことできます。これらのテクニックを利用することで、今後のウェブ制作をよりスムーズに、快適に行うことができるでしょう。 コンテンツ目次 1. 縦方向のマージン幅に気をつけよう。 2. レイアウトに Flexbox を利用しよう。 3. CSS リセットをしよう。 4. Border-box をすべてに適用しよう。 5. イメージファイルは背景に適用しよう。 6. リストテーブル用ボーダー
ituore.com - ituore リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ - NxWorld
ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時（メニューが展開しているときなどのアクティブ時）のエフェクトをCSSで実装したサンプルをまとめました。 よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。
CSS3の「フレキシブルレイアウト」使い方まとめ フラップイズム
どうも、くーへいです。 今回は「レスポンシブデザイン」での使用が想定される、「フレキシブルボックス」についてまとめてみたいと思います。 なお、本記事は「CSS Flexible Box Layout Module Level 1」の2014年5月22日付けの編集者草案（Editor’s Draft）を基に作成しています。 また、「CSS Flexible Box Layout Module Level 1」は未だに策定中であり、現在は2014 年3月25日付の最終草案（Last Call Working Draft）が最新仕様です。 2014年5月22日付けの編集者草案は、2014 年3月25日付の最終草案に微修正を加えたものです。 最初にブラウザの対応状況について注意点 「フレキシブルボックス」で検索すると、いくつかの素晴らしい記事が出てきますが、中には古い記事が多く含まれています。 「
[コピペで使える！CSSだけでアニメーションつきハンバーガーメニューアイコンを作ろう] 他 海外のCSS情報 | WEBデザインすーぷ
アニメーションするCSSのみのハンバーガーメニューアイコン Animating CSS-Only Hamburger Menu Icons Hamburger menu icons have become a staple in many websites and web apps, and whether you like them or not, they are becoming a familiar and recognizable UI action button. Users are associating this icon with the showing and hiding of menus, and its compact, space-saving nature makes it a desirable style, particularly on smaller
![[コピペで使える！CSSだけでアニメーションつきハンバーガーメニューアイコンを作ろう] 他 海外のCSS情報 | WEBデザインすーぷ](https://cdn-ak-scissors.b.st-hatena.com/image/square/9f2d61e0129fb5d5d02ed528b0f0d8f03fb010de/height=288;version=1;width=512/http%3A%2F%2Fi0.wp.com%2Fweb.html-css-javascript.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fi2.jpg%3Ffit%3D723%252C240)
[CSS]文字を選択した状態（反転状態）の際の背景色・文字色を変更する
WebページをPCで閲覧時、文字を選択した時の色（いわゆる「反転状態」）はデフォルトで決まっておりますが、それを変更するCSSの小ネタをメモ。 特にスタイルシートが設定されていないWebページにて文字を選択すると、こんな感じになりますね。（↑はSafari） これの色を変更してみましょう。 適宜、スタイルシートに↓を記述します。 [css] ::selection { background: #e9580f; /*背景色*/ color: #fff; /*文字色*/ } ::-moz-selection { background: #e9580f; /*背景色*/ color: #fff; /*文字色*/ } [/css] こんだけ。 すると 文字を選択した時このように色が適応されます:) すんごい簡単なのでやってみたい方はどぞ。 関連：角丸にドロップシャドウ、グラデーションにアニメーショ
![[CSS]文字を選択した状態（反転状態）の際の背景色・文字色を変更する](https://cdn-ak-scissors.b.st-hatena.com/image/square/cda1e5abc92a78f9b7d7882578b207b467402c0e/height=288;version=1;width=512/https%3A%2F%2Fozpa-h4.com%2Fwp-content%2Fuploads%2Fskitched-20130125-083548.jpg)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
FontAwesomeを使ってみよう – コピペで覚えるコーディング