toya

平日はコーディング、週末は子供と公園を走り回っています。

toya

平日はコーディング、週末は子供と公園を走り回っています。

【CSS】フリック操作に対応したカルーセルの作成方法

scroll-snap-typeプロパティを使用した、フリック操作に対応したカルーセルの作成方法です。scroll-snap-typeを使用すればcssのみで実現可能です！ HTML <div class="container"> <ul> <li>ITEM01</li> <li>ITEM02</li> <li>ITEM03</li> <li>ITEM04</li> <li>ITEM05</li> </ul></div> CSS .container ul

toya

    • 【CSS】WEBサイトをダークモードに対応させる

      Android 10やiOS 13以降機能として実装されたダークモード。 ダークモードに切り替えた時、WEBサイトをCSSでダークモードに対応させる方法の覚え書きです。 1.書き方メディア特性の「prefers-color-scheme: dark」内にダークモード時のスタイルを書きます。 /*通常時*/body{ background-color: #fff; color: #000;}/*ダークモード時*/@media (prefers-color-scheme: d

      toya

      • 【CSS】制作現場でよく使うFlexbox使用例

        横並びや、上下左右の中央揃えなど、要素の配置をフレキシブルに行えるflexbox。 多くのプロパティがありますが、下記のようなWEBサイトを例に、個人的に現場でよく使うflexboxの使用例を紹介します。 ＜参考サイト＞ 1.ヘッダーレイアウト ロゴとメニューを両端揃えで横に並べ、メニューはロゴの高さに対して天地中央に配置します。 ▼実装サンプル HTML <header> <div class="logo">ロゴ</div> <nav> <ul> <li><

        toya

        • 【CSS】新しい擬似クラス:has()の使い方

          iOS 15.4がリリースされて、Safariで疑似クラス:has()のサポートが追加されていたので、使い方のメモです。 バージョン15.4以上のSafari以外の主要ブラウザでは、サポートされていないため（2022年3月31日現在）、まだまだ現場では使用できるのは先になりそうですが、便利そうなので覚えておくと良さそうです！ 1. :has()とは()内に指定した要素と一致する要素にスタイルが適用されます。 例えば...このような感じ。 /*<a>要素の直下に画像が含まれ

          toya

        【CSS】フリック操作に対応したカルーセルの作成方法

        toya

        • 【CSS】WEBサイトをダークモードに対応させる

          toya

        • 【CSS】制作現場でよく使うFlexbox使用例

          toya

        • 【CSS】新しい擬似クラス:has()の使い方

          toya

          【CSS】新しい擬似クラス:is()の使い方

          擬似クラス:is()が主要ブラウザでサポートされていたので、使い方のメモです。 1. :is()とは 複数のセレクタを、簡潔に1つにまとめて書くことができる擬似クラスです。 2.書き方▼サンプル1 /*クラスtitleが指定された<h1>–<h6>の見出し要素のフォントの太さをboldにする*/h1.title,h2.title,h3.title,h4.title,h5.title,h6.title { font-weight: bold;} :is()を使用すると.

          toya

          【CSS】新しい擬似クラス:is()の使い方

          toya

          【CSS】覚えておきたい新しいプロパティ2022年編

          WEBデザインのまとめサイトを見ていて、気になるサイトは、どうなってるんだろう～とソースやスタイルをチェックすることがあるのですが、知らないプロパティがちらほら、、 今年、個人的に覚えて使っていきたいプロパティ一覧です。ここでは、詳しく追及せず、次回の記事から深掘りしていきたいと思います。 1.CSS変数:root { --main-bg-color: #000;}.element { background-color: var(--main-bg-color);} 参

          toya

          【CSS】覚えておきたい新しいプロパティ2022年編

          toya

          border-imageとborder-radiusの相性が悪かった話

          ボタンの縁がグラデーションの角丸ボタンを作りたかったのですが、border-imageとborder-radiusを一緒に指定する単純なことでは無かったので、その対処法です。 基本のマークアップHTML <div> <a href="#" class="btn"> <span>button</span> </a></div> CSS div{ display: flex; align-items: center; justify-content: center;}

          toya

          border-imageとborder-radiusの相性が悪かった話

          toya

          【CSS】Color関連のTipsまとめ

          CSSだけでこんなこともできるようになってたのか、、と最近知ったカラー関連のTIPS（一応）2021年編です。 1.テキストにグラデーション HTML <h1>Hello, world</h1> CSS h1{ background: linear-gradient(90deg, #e14fad 0%, #f9d423 100%); -webkit-background-clip: text;/*背景をテキストの中に切り取って表示*/ color: transpa

          toya

          【CSS】Color関連のTipsまとめ

          toya

          【WordPress】Contact Form 7のスパムメール対策

          WordPressのフォームを設置するためのプラグインContact Form 7のスパムメール対策のため、Googleが提供する「reCAPTCHA v3」を導入したときの備忘録です。 reCAPTCHAとは スパムbotなどの自動攻撃からWebサイトを保護してくれる、Googleが提供する不正検知サービスです。月100万回の呼び出しまでは無料で利用できます。月100万回を超える場合は、reCAPTCHA Enterpriseにアップグレードする必要があります。 導入方

          toya

          【WordPress】Contact Form 7のスパムメール対策

          toya

          【HTML】スマホのアドレスバーの色をカスタマイズする方法

          Qiitaやユニクロのサイトのようにスマホのアドレスバーの色がテーマカラーなどにカスタマイズされたサイトをちらほら見かけます。 このような感じ↓ Qiita URL:https://qiita.com/ ユニクロ URL:https://www.uniqlo.com/jp/ja/ コスモポリタン URL:https://www.cosmopolitan.com/jp/ 方法やり方を調べてみたらめちゃくちゃ簡単でした、、 headタグ内にmetaタグを１行追加するだけ

          toya

          【HTML】スマホのアドレスバーの色をカスタマイズする方法

          toya

          【CSS】アスペクト比の設定をaspect-ratioにアップデート

          画像や動画のアスペクト比（縦横比）を設定するaspect-ratioプロパティが、主要ブラウザでサポートされるようになったため、気兼ねなく使用できるようになりました。 1.画像対応数か月前に書いたこちらの記事 【CSS】異なるサイズの画像をサイズを揃えてキレイに配置する方法 画像の縦横比を保つため、画像の親要素にpadding-topを指定していました。（画像の比率を16:9にしたので、9 / 16 × 100=56.25%） .blogList li figure {

          toya

          【CSS】アスペクト比の設定をaspect-ratioにアップデート

          toya

          SlickのcenterModeで中央に2枚配置する方法

          スライダーを作成するためのプラグイン「slick」のcenterModeを使って、実装イメージのように中央に2枚配置し、画像の余白を不均等にすることが一筋縄ではいかなかったので、その備忘録です。 <実装イメージ> 1.問題点・centerModeでは中央に配置する枚数は奇数値推奨。 ・centerModeでは画像間の余白は均等になるようになっている。 ・中央配置された時に付与されるclass、slick-active / slick-center / slick-curr

          toya

          SlickのcenterModeで中央に2枚配置する方法

          toya

          【CSS】円形画像に沿ってテキストを回り込ませる方法

          雑誌など紙媒体のレイアウトでよく見かける、円形画像の形に添ってテキストを回り込ませる方法です。 1.実装サンプル HTML <div class="content"> <ul class="shape-outside"> <li> <h2>セロ弾きのゴーシュ#1</h2> <figure class="circle"><img src="img01.png" alt=""></figure> <p class="text">音楽は別の練習楽長

          toya

          【CSS】円形画像に沿ってテキストを回り込ませる方法

          toya

          【CSS】傍点（テキストの上に点）をつける方法

          強調したい文字の上に打つ点、傍点を付ける方法です。 1.疑似要素を使用 メリット ・傍点の大きさ、位置を調整できる デメリット ・1文字ごとに<span></span>で囲む必要があるので、傍点をつけるテキストが長い場合は大変... ▼実装サンプル HTML <p class="text01">テキストに<span class="emphasis01">傍</span><span class="emphasis01">点</span>をつけて<span class=

          toya

          【CSS】傍点（テキストの上に点）をつける方法

          toya

          【CSS】異なるサイズの画像をサイズを揃えてキレイに配置する方法

          CMSを使用した記事の一覧ページでサムネイル画像とタイトル等を並べて表示させることがあります。 複数人で記事を更新する場合など、ユーザーによってはトリミングする環境がなくスマホで撮った画像をそのままサムネイルに指定したり、サイズが異なる画像が配置され、レイアウトが崩れてしまうことがあります、、 異なったサイズの画像がサムネイルに指定されても、縦横比を維持し、表示サイズを揃えて表示させる方法です。 1.実装サンプル横に4記事並べる場合のサンプルです。 HTML <ul

          toya

          【CSS】異なるサイズの画像をサイズを揃えてキレイに配置する方法

          toya

          デザフェスvol.53に出展しました

          ひょうたんのアテンドとして2日間参加してきました。 デザフェスvol.52に続き2度目の参加です。 緊急事態宣言発令中だったので、出店、来場者少ないんだろうな...と思っていたのですが、想像以上に人通りが多く、前回より賑わっているように感じました。 参加しての気づきや、実感したことを書きたいと思います。 グッツ編 チェキ大人気！ ひょうたんを撮影したチェキ（ブロマイド的な）や、その場で、ひょうたんとチェキで撮影ができる券を100円で販売したのですが、予想をはるかに上

          toya

          デザフェスvol.53に出展しました

          toya