レスポンシブ対応にメディアクエリなしで、CSSの関数で定義！border-radiusの値を変えるテクニック
border-radiusの値をデスクトップとスマホで変える、例えばビューポートが大きくてマージンがある場合は8pxで角丸にし、ビューポートが小さくてマージンがない場合は0pxで矩形にする。 メディアクエリで簡単に実装できると思うかもしれません。しかし、ビューポートのサイズが小さく、マージンがある場合に8pxの角丸になりません。 この難しい条件をCSSの関数で実装するテクニックを紹介します。 Conditional Border Radius In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに border-radiusの値をスマホとデスクトップで変えるテクニック 実装方法の解説 なぜ、9999を使用するのか 終わりに はじめに 私はデベロッパーがどのようなCSSを書いている
<easing-function> - CSS | MDN
/* キーワードによる線形イージング関数 */ linear /* linear(0, 1) */ /* カスタム線形イージング関数 */ linear(0, 0.25, 1) linear(0, 0.25 75%, 1) /* キーワード 3 次ベジェイージング関数 */ ease /* cubic-bezier(0.25, 0.1, 0.25, 1) */ ease-in /* cubic-bezier(0.42, 0, 1, 1) */ ease-out /* cubic-bezier(0, 0, 0.58, 1) */ ease-in-out /* cubic-bezier(0.42, 0, 0.58, 1) */ /* カスタム 3 次ベジェイージング関数 */ cubic-bezier(0.25, 0.1, 0.25, 1) /* キーワード段階イージング関数 */ step-
Codejump | 作って学ぶコーディング学習サイト（HTML、CSS、JavaScript、WordPress）【旧 Codestep】
1冊でスキルが身につく！ Amazonで発売中 書籍特設サイト 【HTML / CSS】コーディング練習課題 ＿入門編 プロフィールサイト フォトサイト フォトサイト2 レシピサイト／トップページ レシピサイト／レシピページ ブランドサイト（ジュエリー） ＿初級編 ポートフォリオサイト ストアサイト（書店） ECサイト コーポレートサイト（Web制作） ストアサイト（和菓子） ＿中級編 ストアサイト（インテリア） ＿上級編 ブログサイト ストアサイト（カフェ） コーポレートサイト（ハウスメーカー） ＿応用編 ランディングページ メディアサイト ギャラリーサイト ＿実践編（Codejump Pro） 実務をモデルにしたコーディング案件 ＿番外編（HTML/CSS） 疑似要素の練習 positionの練習 行数が異なる画像の横並びの練習 画像を斜めに表示する練習 ドロップダウンメニューの練習
CSS flexboxで実装する、レスポンシブ対応のステップのコンポーネントを解説
Webページで使用されるステップのコンポーネント、サークルに囲まれた1,2,3と各ステップを繋ぐ中央のラインを実装するCSSのテクニックを紹介します。 レスポンシブ対応、そしてライト・ダークモード対応、水平・垂直に配置されたステップだけでなく、数字ではなく日時を繋いだタイムラインにも応用できます。 Building A Stepper Component by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 実装: 水平ステップ 1 ステップの前後にスペースがあるバージョン 実装: 水平ステップ 2 実装: 垂直ステップ 1 実装: 垂直ステップ 2 終わりに はじめに 私は先日、レスポンシブ対応のステップのコンポーネントの実装方法とそれらを繋ぐ中央のラインの扱い方について質問を受けました。
CSSコピペで完成！押したくなるWebボタンデザインまとめ
この記事では、ウェブサイトを訪れたひとが思わず押したくなるボタンデザインをまとめてご紹介します。どのボタンをHTMLとCSSのみで作成されているので、手軽にコピペで利用でき、カスタマイズも自由自在となっています。 JSもつかったよりクリエイティブなボタンエフェクトもあるので、プロジェクトに合ったボタンデザインを探してみましょう。 ボタンをデザインするときに気をつけたいポイントをチェックしておけば、より効果的なボタンの使い方ができますよ。有名サイトのボタンをコピペできるサービスもおすすめです。 現在37種類のボタンデザインが揃い、今後も定期的にアップデートしていきます。 CSSコピペで完成！押したくなるWebボタンデザインまとめ ユラユラと揺れる波ウェーブボタン まるで水面が揺れているようなエフェクトが特長のボタンエフェクト。 See the Pen Creative Wave Button
実装の仕組みが分かれば簡単！画像の一部を切り取るカットアウトを実装するCSSとSVGのテクニック
Webページやアプリで見かける、通知や注目の役割を担うカットアウト（画像の一部を切り取る）を実装するCSSとSVGのテクニックを紹介します。 画像に小さなバッジをつけたり、画像をグループ化する際に重ねたり、ヘッダやヒーローで画像を重ねたり、さまざまなUIで見かけます。 Thinking About The Cut-Out Effect: CSS or SVG? by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 カットアウトとは アバター画像で見かけるカットアウト カットアウトの実装 1: clip-pathを使用する カットアウトの実装 2: CSSのマスク カットアウトの実装 3: SVGのマスク アバター画像を重ねるカットアウト カットアウトの実装 1: clip-pathでマスク カットアウ
これからはこの実装がオススメ！ iOSの100vhでアドレスバーがあっても高さいっぱいに表示するCSSのテクニック
高さいっぱいに表示したい時、古くはheight: 100%;、そしてmin-height: 100%;で実装していたと思います。現在ではビューポートの単位min-height: 100vh;が使用できるようになりました。 しかし、iOSでは100vhを使用してもアドレスバーが表示されていると下がその分隠れて表示されてしまい、高さいっぱいになりません。JavaScriptを使用するというやり方もありますが、CSSのみで対応できるので、そのCSSを紹介します。 Chromeにも対応しています。
【HTML】知っておくと便利！短いHTMLコードで実装できる小技テク17選
この記事では、あまり知られていないHTMLの小技20個を実例サンプルと一緒にご紹介します。 CSSやJavaScriptなども使わずに、わずかなHTMLコードだけで実装可能な便利テクニックで、手軽に利用できるのもポイントです。 先日紹介したCSS小技テクと一緒に活用してみてはいかがでしょう。 【CSS】知っておくと便利！短いコードで実装できるCSS小技20選 たった1行のCSS！よく見かけるWebレイアウトを実現する凄技テクニック10個 そもそもHTMLってなに？ HTML（Hypertext Markup Language）は、Webブラウザで表示するための基本となる標準的なマークアップ言語です。また、CSS（Cascading Style Sheets）などの技術や、JavaScriptなどのスクリプト言語によってサポートされることもあります。 ホームページを作るときは、まずHTMLを
【CSS】知っておくと便利！短いコードで実装できるCSS小技20選
この記事では、あまり知られていないCSSの小技20個を実例サンプルと一緒にご紹介します。 わずかなコードで実装可能なテクニックばかりで、ウェブ制作でも気軽に活用することができます。 HTMLの小技テクと一緒に活用してみてはいかがでしょう。 【HTML】知っておくと便利！短いHTMLコードで実装できる小技テク17選 そもそもCSSってなに？ CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、HTMLなどのマークアップ言語で書かれた文書の表示方法を記述するためのスタイルシート言語です。CSSは、HTMLやJavaScriptと並んでWebの主要な技術です。 CSSは、レイアウトや配色、フォントなど、デザインとコンテンツを分別することを目的としています。これによって、コンテンツのアクセシビリティの向上、デザインの柔軟性やコンテンツの制御しやすさ、関連
フォントのサイズ設定は役に立たない、問題点と解決方法
WebページやOSのUI、エディタなどのソフトウェアでフォントのサイズや行の高さを設定した際に起こる問題点と解決方法を紹介します。 Font size is useless; let's fix it by Niki Tonsky 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに フォントのサイズにおけるポイントとは emスクエアとは font sizeにおける問題点 解決方法 line height（行の高さ）もめちゃくちゃです 予測が可能なline height（行の高さ） 終わりに はじめに あなたのお気に入りのエディタに、"font_size": 32を設定するとどうなりますか？ お伝えしたいことがあるので、聞いてくれたら嬉しいです。 実際にやってみました。 私はmacOSでSublime Textを使っています
【保存版】CSS Flexboxでレスポンシブ対応のレイアウトを実装するHTMLとCSSのシンプルなコードのまとめ
CSS Flexboxで実装するWebページでよく見かけるレスポンシブ対応のレイアウト、カードレイアウト、ナビゲーションバー、サイドバー、聖杯レイアウトなどのHTMLとCSSのコードを紹介します。 コードは非常にシンプルなので、テンプレートやスニペットとして再利用できます。 Master CSS Flexbox 2021 🔥- Build 5 Responsive Layouts🎖️|| CSS 2021 by Joy Shaheb 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxの構造・各プロパティと値 実装の準備 Level 1: シンプルなカードレイアウト Level 2: ナビゲーションバー Level 3: サイドバー Level 4: 少し複雑なカードレイアウト Level 5: Holy Grai
CSSで画像の上に表示するテキストをより読みやすく、より美しくするテクニック・実装方法のまとめ
画像の上にテキストを配置する際に、より読みやすく、より美しくするCSSのテクニックを紹介します。 CSSで画像上にテキストを表示する際に起こる問題に対するさまざまなアプローチと解決するための実装方法を解説。また、最近見かけた素晴らしいテクニック、便利なツールなども紹介します。 Handling Text Over Images in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テキストを読みやすくするためのさまざまなテクニック グラデーションのオーバーレイを使ったテクニック イージングのグラデーションを使ったテクニック 水平方向のグラデーションを使ったテクニック ソリッドカラーとグラデーションの混合 グラデーションのオーバーレイとtext-shadow グラデーションのオー
CSSのブレンドモードが素敵！ mix-blend-modeを使いこなそう - ICS MEDIA
mix-blend-modeというCSSのプロパティ。これはDOM要素を重ねた時の見え方を指定するCSSプロパティです。デザイナー視点だとブレンドモードはごく当たり前に使う機能のひとつ。mix-blend-modeはウェブの表現手法が広がり、デザインの自由度が広がる注目すべきCSSプロパティです。本記事はmix-blend-modeの魅力と使い方をデモを交えて紹介します。 そもそもブレンドモードとは？ ブレンドモードは、クリエイティブな表現を作るうえでの基本機能のひとつです。Adobe PhotoshopやIllustrator、After Effects、Figmaなどのデザインツールにも搭載されています。ツールによって名称や選択肢、グループ内での合成方法は異なりますが、レイヤーを重ねたときの見え方を制御する考え方は共通しています。本記事ではCSSの名称にあわせてブレンドモードと記載して
Webページやアプリで使用されるさまざまなアニメーションを簡単に実装できるCSSの超軽量ライブラリ -AnimXYZ
ページが表示された時に要素をアニメーションで表示させたり、ギャラリーで画像を出し入れするようにアニメーションで表示させたり、モーダルやタブをアニメーションで気持ちよく表示させたり、Webページやスマホアプリで使用されるさまざまなアニメーションを簡単に実装できるCSSのライブラリを紹介します。 CSSの外部ファイルとして利用できるだけでなく、Sass、VueやReactのコンポーネントも用意されており、さまざまなプロジェクトですぐに利用できます。 AnimXYZ AnimXYZ -GitHub AnimXYZの特徴 AnimXYZのデモ AnimXYZの使い方 AnimXYZの特徴 AnimXYZは、Webページやスマホアプリで使用されるさまざまなCSSアニメーションを簡単に実装できるMITライセンスのライブラリです。 アニメーションの実装が簡単 アニメーションを作成するのは非常に簡単。例え
Web制作者が知っておくと便利なCSSの小ネタ
CSSの進化はすごいですね🚀 一昔前はJavaScriptが必要だったり、トリッキーなCSSで記述しないとできなかったことが、1行もしくは数行のCSSで簡単に実装できるようになりました。 Web制作者が知っておくと便利なCSSの小ネタを紹介します。 CSS Tips by Marko Denic 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スムーズなスクロールはたった1行のCSSで CSSだけでテキストを省略 複数行のテキストも省略できます 水平と垂直方向のすべてに中央揃え 影を画像のコンテンツのみに与える CSSでカーソルをSVGに変更 CSSだけでタイピングのエフェクト テキストのハイライトカラーを変更 どんな要素でもサイズを変更 CSSで実装するモーダル サイズ指定にcalc()関数が便利 空の要素をスタイ
CSSにおけるマージンの相殺を徹底解説
CSSにおけるマージンの相殺は何か、どういう条件で起こり、どのように相殺されるのか、また相殺を回避する方法などを紹介します。 下と上のマージンの相殺は単純ですが、マージン値が異なる場合、入れ子の場合、複数の場合、同方向の場合、負のマージンの場合、パディングやボーダーがある場合など、実装に伴うさまざまな例を解説します。 この記事を読むと、マージンの相殺がどのように機能するかがよく分かるようになり、悩むことはなくなります。 The Rules of Margin Collapse by Josh W. Comeau 下記は各ポイントを意訳したものです。 デモは元記事ではインタラクティブですが、Gifアニメにしています。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 垂直マージンのみが相殺される 隣接する要素のみが相殺される より大きなマージンが勝つ 入れ子は
CSS Flexboxでどのように配置されるかをまとめたチートシート
Flexboxでよく使用するプロパティと値をまとめたチートシートを紹介します。 コンテナ内にアイテムがどのように配置されるかを図やイラストで掲載しており、楽しく直感的にFlexboxの使い方を学べます。 FlexBox Cheat Sheets in 2021 by Joy Shaheb 同じ作者のCSS Gridのチートシートも翻訳しました。 CSS Gridでどのように配置されるかをまとめたチートシート 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxの構造 Flexboxの各プロパティと値 flex-directionプロパティ justify-contentプロパティ align-contentプロパティ align-itemsプロパティ align-selfプロパティ flex-grow | shrink
CSS Animo
div{display:inline-block;width:13px;height:13px;background:#f39c12;border-radius:50%;animation:bouncing-loader .6s infinite alternate}.animoBouncingLoader::after,.animoBouncingLoader::before,.animoBouncingLoader>div{content:''}.animoBouncingLoader>div{margin:0 5px}.animoBouncingLoader>div{animation-delay:.2s}.animoBouncingLoader::after{animation-delay:.4s}@keyframes bouncing-loader{to{opacity:.1;t
【CSS】vw、vh、vmin、vmaxとは？基本的な使い方
実際にはどんな感じで使うの？これまで解説してきましたが、あまり使用イメージが湧かないという人もいるのではないでしょうか。実際にCSSのサンプルを見ながら理解していきましょう。 vw、vhのサンプルSee the Pen vw,vh by JAJAAAN Dev.01 (@jajaaan_dev01) on CodePen. 100vwは、表示領域の横いっぱいに拡がっているのが分かります。 100vhは、表示領域の高さいっぱいに拡がっているのが分かります。 10vwは、表示領域の横幅十分の1のサイズになっています。 10vhは、表示領域の高さ十分の1のサイズになっています。 つまりビューポートの横幅1000pxであった場合、10vwは100pxになります。 vmin、vmaxの使用例vw、vhはわかりやすいですが、vmin、vmaxこそ使用イメージがわかりにくいと思います。サンプルを見てみま
CSSの変数（カスタムプロパティ）の基礎知識、便利な使い方を詳しく解説
CSSの変数（カスタムプロパティ）の基礎知識、便利な使い方を詳しく解説します。Webページやスマホアプリのレイアウト、コンポーネントなど、実際の使用例がたくさんあるので、実用的なテクニックが満載です。 CSS Variables 101 by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの変数（カスタムプロパティ）とは 変数名の付け方 CSSの変数のスコープ CSSの変数のフォールバック CSSの変数の効果的な使用例 インラインでCSSの変数を定義 メディアクエリでCSSの変数を定義 CSSの変数の継承 CSSの変数のバリデーションの仕組み CSSの変数の興味深い発見 デベロッパーツールで使用できる便利なテクニック 終わりに はじめに CSSの変数（別名: カスタムプロパティ）がブ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
