toya

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

toya

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

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

scroll-snap-typeプロパティを使用した、フリック操作に対応したカルーセルの作成方法です。scroll-snap-typeを使用すればcssのみで実現可能です！ HTML <div class="con…

toya
toya
2年前
4

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

Android 10やiOS 13以降機能として実装されたダークモード。 ダークモードに切り替えた時、WEBサイトをCSSでダークモードに対応させる方法の覚え書きです。 1.書き方メデ…

toya
toya
2年前
3

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

横並びや、上下左右の中央揃えなど、要素の配置をフレキシブルに行えるflexbox。 多くのプロパティがありますが、下記のようなWEBサイトを例に、個人的に現場でよく使うfle…

toya
toya
2年前
7

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

iOS 15.4がリリースされて、Safariで疑似クラス:has()のサポートが追加されていたので、使い方のメモです。 バージョン15.4以上のSafari以外の主要ブラウザでは、サポート…

toya
toya
2年前
7

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

擬似クラス:is()が主要ブラウザでサポートされていたので、使い方のメモです。 1. :is()とは 複数のセレクタを、簡潔に1つにまとめて書くことができる擬似クラスです。 2…

toya
toya
2年前
4

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

WEBデザインのまとめサイトを見ていて、気になるサイトは、どうなってるんだろう～とソースやスタイルをチェックすることがあるのですが、知らないプロパティがちらほら、…

toya
toya
2年前
7

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

ボタンの縁がグラデーションの角丸ボタンを作りたかったのですが、border-imageとborder-radiusを一緒に指定する単純なことでは無かったので、その対処法です。 基本のマ…

toya
toya
2年前
7

【CSS】Color関連のTipsまとめ

CSSだけでこんなこともできるようになってたのか、、と最近知ったカラー関連のTIPS（一応）2021年編です。 1.テキストにグラデーション HTML <h1>Hello, world</h1> CS…

toya
toya
2年前
5

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

WordPressのフォームを設置するためのプラグインContact Form 7のスパムメール対策のため、Googleが提供する「reCAPTCHA v3」を導入したときの備忘録です。 reCAPTCHAとは…

toya
toya
2年前
5

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

Qiitaやユニクロのサイトのようにスマホのアドレスバーの色がテーマカラーなどにカスタマイズされたサイトをちらほら見かけます。 このような感じ↓ Qiita URL:https://q…

toya
toya
2年前
8

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

画像や動画のアスペクト比（縦横比）を設定するaspect-ratioプロパティが、主要ブラウザでサポートされるようになったため、気兼ねなく使用できるようになりました。 1.画…

toya
toya
2年前
8

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

スライダーを作成するためのプラグイン「slick」のcenterModeを使って、実装イメージのように中央に2枚配置し、画像の余白を不均等にすることが一筋縄ではいかなかったので…

toya
toya
3年前
7

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

雑誌など紙媒体のレイアウトでよく見かける、円形画像の形に添ってテキストを回り込ませる方法です。 1.実装サンプル HTML <div class="content"> <ul class="shape-out…

toya
toya
3年前
8

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

強調したい文字の上に打つ点、傍点を付ける方法です。 1.疑似要素を使用 メリット ・傍点の大きさ、位置を調整できる デメリット ・1文字ごとに<span></span>で囲む必要…

toya
toya
3年前
12

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

CMSを使用した記事の一覧ページでサムネイル画像とタイトル等を並べて表示させることがあります。 複数人で記事を更新する場合など、ユーザーによってはトリミングする環…

toya
toya
3年前
9

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

ひょうたんのアテンドとして2日間参加してきました。 デザフェスvol.52に続き2度目の参加です。 緊急事態宣言発令中だったので、出店、来場者少ないんだろうな...と思って…

toya
toya
3年前
4
toya

toya

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

【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>ITEM

もっとみる
toya

toya

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

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

Android 10やiOS 13以降機能として実装されたダークモード。
ダークモードに切り替えた時、WEBサイトをCSSでダークモードに対応させる方法の覚え書きです。

1.書き方メディア特性の「prefers-color-scheme: dark」内にダークモード時のスタイルを書きます。

/*通常時*/body{ background-color: #fff ; color: #000 ;}/*

もっとみる
toya

toya

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

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

横並びや、上下左右の中央揃えなど、要素の配置をフレキシブルに行えるflexbox。
多くのプロパティがありますが、下記のようなWEBサイトを例に、個人的に現場でよく使うflexboxの使用例を紹介します。

＜参考サイト＞

1.ヘッダーレイアウト

ロゴとメニューを両端揃えで横に並べ、メニューはロゴの高さに対して天地中央に配置します。

▼実装サンプル
HTML

<header> <div c

もっとみる
toya

toya

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

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

iOS 15.4がリリースされて、Safariで疑似クラス:has()のサポートが追加されていたので、使い方のメモです。
バージョン15.4以上のSafari以外の主要ブラウザでは、サポートされていないため（2022年3月31日現在）、まだまだ現場では使用できるのは先になりそうですが、便利そうなので覚えておくと良さそうです！

1. :has()とは()内に指定した要素と一致する要素にスタイルが適

もっとみる
toya

toya

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

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

擬似クラス:is()が主要ブラウザでサポートされていたので、使い方のメモです。

1. :is()とは
複数のセレクタを、簡潔に1つにまとめて書くことができる擬似クラスです。

2.書き方▼サンプル1

/*クラスtitleが指定された<h1>–<h6>の見出し要素のフォントの太さをboldにする*/h1.title,h2.title,h3.title,h4.title,h5.title,h6.t

もっとみる
toya

toya

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

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

WEBデザインのまとめサイトを見ていて、気になるサイトは、どうなってるんだろう～とソースやスタイルをチェックすることがあるのですが、知らないプロパティがちらほら、、

今年、個人的に覚えて使っていきたいプロパティ一覧です。ここでは、詳しく追及せず、次回の記事から深掘りしていきたいと思います。

1.CSS変数:root { --main-bg-color: #000 ;}.element { bac

もっとみる
toya

toya

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

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

ボタンの縁がグラデーションの角丸ボタンを作りたかったのですが、border-imageとborder-radiusを一緒に指定する単純なことでは無かったので、その対処法です。

基本のマークアップHTML

<div> <a href="#" class="btn"> <span>button</span> </a></div>

CSS

div{ display: flex; align-

もっとみる
toya

toya

【CSS】Color関連のTipsまとめ

【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: t

もっとみる
toya

toya

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

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

WordPressのフォームを設置するためのプラグインContact Form 7のスパムメール対策のため、Googleが提供する「reCAPTCHA v3」を導入したときの備忘録です。

reCAPTCHAとは
スパムbotなどの自動攻撃からWebサイトを保護してくれる、Googleが提供する不正検知サービスです。月100万回の呼び出しまでは無料で利用できます。月100万回を超える場合は、reC

もっとみる
toya

toya

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

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

Qiitaやユニクロのサイトのようにスマホのアドレスバーの色がテーマカラーなどにカスタマイズされたサイトをちらほら見かけます。

このような感じ↓

Qiita URL:https://qiita.com/

ユニクロ URL:https://www.uniqlo.com/jp/ja/

コスモポリタン URL:https://www.cosmopolitan.com/jp/

方法やり方を調べて

もっとみる
toya

toya

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

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

画像や動画のアスペクト比（縦横比）を設定するaspect-ratioプロパティが、主要ブラウザでサポートされるようになったため、気兼ねなく使用できるようになりました。

1.画像対応数か月前に書いたこちらの記事
【CSS】異なるサイズの画像をサイズを揃えてキレイに配置する方法

画像の縦横比を保つため、画像の親要素にpadding-topを指定していました。（画像の比率を16:9にしたので、9 /

もっとみる
toya

toya

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

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

スライダーを作成するためのプラグイン「slick」のcenterModeを使って、実装イメージのように中央に2枚配置し、画像の余白を不均等にすることが一筋縄ではいかなかったので、その備忘録です。

<実装イメージ>

1.問題点・centerModeでは中央に配置する枚数は奇数値推奨。
・centerModeでは画像間の余白は均等になるようになっている。
・中央配置された時に付与されるclass、

もっとみる
toya

toya

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

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

雑誌など紙媒体のレイアウトでよく見かける、円形画像の形に添ってテキストを回り込ませる方法です。

1.実装サンプル

HTML

<div class="content"> <ul class="shape-outside"> <li> <h2>セロ弾きのゴーシュ#1</h2> <figure class="circle"><img src="img01.png" alt=""

もっとみる
toya

toya

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

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

強調したい文字の上に打つ点、傍点を付ける方法です。

1.疑似要素を使用

メリット
・傍点の大きさ、位置を調整できる

デメリット
・1文字ごとに<span></span>で囲む必要があるので、傍点をつけるテキストが長い場合は大変...

▼実装サンプル
HTML

<p class="text01">テキストに<span class="emphasis01">傍</span><span cla

もっとみる
toya

toya

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

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

CMSを使用した記事の一覧ページでサムネイル画像とタイトル等を並べて表示させることがあります。

複数人で記事を更新する場合など、ユーザーによってはトリミングする環境がなくスマホで撮った画像をそのままサムネイルに指定したり、サイズが異なる画像が配置され、レイアウトが崩れてしまうことがあります、、

異なったサイズの画像がサムネイルに指定されても、縦横比を維持し、表示サイズを揃えて表示させる方法です

もっとみる
toya

toya

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

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

ひょうたんのアテンドとして2日間参加してきました。
デザフェスvol.52に続き2度目の参加です。

緊急事態宣言発令中だったので、出店、来場者少ないんだろうな...と思っていたのですが、想像以上に人通りが多く、前回より賑わっているように感じました。

参加しての気づきや、実感したことを書きたいと思います。

グッツ編

チェキ大人気！

ひょうたんを撮影したチェキ（ブロマイド的な）や、その場で、

もっとみる