投稿者: 工藤

マークアップ

疑似クラス:has()を活用してみよう!

CSSの疑似クラスである:has()がようやく全ブラウザに対応してくれました! 「:has()ってなんだ?」という方もいらっしゃるかもしれません。 例えば通常は水色のボックスである『#abc』の中に『.xyz』が現れると『#abc』の背景をピンクにする、ということができます。 これまでは親要素に対して子要素が影響を与えることはJavaScriptなどに頼る必要があり、cssのみでは困難でした。 けれど:has()すべてを解決してくれます。 活用方法-チェックボックスの装飾 個 […]

マークアップ

【CSSのみ】スムーススクロール+アンカーリンク時の固定ヘッダーのずれを調整

今までの流れで、何となくスムーススクロールやアンカーリンク時の固定ヘッダーのずれをjsなどで処理していませんか? 実はCSSのみで対応できるようになっています。 主要なブラウザには対応していて、なおかつ簡単にできるので、ぜひ使っていきましょう。 CSSだけでスムーススクロールをする まずはcssだけでスムーススクロールをする方法についてご紹介します。 といっても1行書くだけです。 このようにhtml要素に対してscroll-behavior: smooth;と指定するだけです […]

Webデザイン

【Photoshop】生成塗りつぶしを使ってみよう【AI】

Photoshop 2024(ver.25)から本格的にAIによる生成機能が追加されました。 今回はどんなことができるか、基本的なものをご紹介していきます。 対象のものを削除したい ではまず、対象のものを削除する方法です。 Photoshop 2024(ver.25)で生成塗りつぶしに使いたい画像を開きましょう。 画像を開いたら、削除をしたいものを選択ツールを使用して範囲選択します。 範囲を選択したらコンテキストタスクバーが表示されるので、『生成塗りつぶし』をクリックします。 […]

マークアップ

実際のサンプルでアニメーション解説 [オープンキャンパス特設サイト]【CSS/JS】

WEBサイト作成時にこのアニメーションがよくわからない…ということがあると思います。 今回は弊社で作成した『受験生向け女子大学のオープンキャンパス特設サイト』のサンプルを使用しながら解説していきます。 初歩的なアニメーションの知識はある、という方向けの記事です。 参考にするサンプルサイトはこちらから inview.jsを読み込ませる 今回は場所によっては『inview.js』というライブラリを読み込ませて、使用しています。 これを使うとスクロールをして表示領域に入った時にイベ […]

マークアップ

実際のサンプルでアニメーション解説 [焼肉用のお肉ネット通販特設サイト編]【CSS/JS】

WEBサイト作成時にこのアニメーションがよくわからない…ということがあると思います。 今回は弊社で作成した、[焼肉用のお肉ネット通販特設サイトのサンプルを使用しながら解説していきます。 初心者向けの記事です。 参考にするサンプルサイトはこちらから 動画再生 メインビジュアルで動画を再生させています。 JSなどで再生させる方法もありますが、今回はCSSだけで対応してみます。 HTML CSS とりあえずvideoタグで動画を設置します。 #mainVisualで大元を括ります。 […]

マークアップ

実際のサンプルでアニメーション解説 [ホームセキュリティ編]【CSS/JS】

WEBサイト作成時にこのアニメーションがよくわからない…ということがあると思います。 今回は弊社で作成した、ホームセキュリティサイトのサンプルを使用しながら解説していきます。 初心者向けの記事です。 参考にするサンプルサイトはこちらから inview.jsを読み込ませる 今回は場所によっては『inview.js』というライブラリを読み込ませて、使用しています。 これを使うとスクロールをして表示領域に入った時にイベントを発生させることができます。 一緒にjqueryの読み込みも […]

マークアップ

実際のサンプルでアニメーション解説 [採用サイト編]【CSS/JS】

WEBサイト作成時にこのアニメーションがよくわからない…ということがあると思います。 今回は弊社で作成したサンプルを使用しながら解説していきます。 初歩的なアニメーションの知識はある、という方向けの記事です。 参考にするサンプルサイトはこちらから inview.jsを読み込ませる 今回は場所によっては『inview.js』というライブラリを読み込ませて、使用しています。 これを使うとスクロールをして表示領域に入った時にイベントを発生させることができます。 一緒にjqueryの […]

マークアップ

Intersection Observer APIを使って要素をアニメーションをさせてみる【初めての人向け】

今回はIntersection Observer APIを使用してのアニメーションの方法をご紹介します。 正直この記事を書いている私も今手探りの状態なので、完全に初心者の方向けの記事です。 一緒に勉強していきましょう。 Intersection Observer APIってなに? まずIntersection Observer APIってなに?という方もいると思います。 日本語交じりで言うと『交差オブザーバー』。 上記仕様書から抜粋すると 交差オブザーバー API (Inte […]

マークアップ

スクロールバーをCSSで装飾しよう!【chrome・edge・Firefox】

CSSでのスクロールバーの装飾。 以前はchromeとあたりの対応だけだったのが、いつの間にかFirefoxも対応していたので今更感もありますがまとめておきます。 chrome・edge・safari まずは手始めにchrome・edgeの方法をご紹介します。 See the Pen Untitled by kkdd (@kk8kk) on CodePen. コードとしてはこんな感じです。注釈で書いてある通りですが ::-webkit-scrollbar ここでスクロールバー […]

プログラミング

ChatGPTを使って文章を作ってもらう時のアイディア

今まで何となく触っていただけのChatGPT。ちょっと色々と文章を作成してみる機会があったので、私なりのアイディアやコツなどを書いてみます。 もう少しシステム的な記事はこちらをご確認ください。 ChatGPTに登録をする とりあえず登録していない人のために手順をご紹介します。 1.ログイン/サインアップページを開く まずはログイン/サインアップページを開きましょう。 『Sign up』をクリックして、登録画面を開きます。 2.登録するメールアドレスなどを入力・選択する 登録の […]

マークアップ

hoverや時間経過などでグラデーションをアニメーションさせよう!

webサイトのサイトデザインでもよく使うようになったグラデーション。 例えばボタンに使った時にhoverしたとき、背景に使用したときなどにグラデーションの色をアニメーションさせながら変化させることができます。 hoverしたときにグラデーションが動く hoverしたときにグラデーションが左の方に流れていくようなイメージです。 それでは実際のHTML・CSS、動作を見てみましょう See the Pen グラデーションボタン by kkdd (@kk8kk) on CodePe […]

WordPress

【WordPress】カスタムフィールドを使って記事をピックアップ表示しよう

WordPressで記事をピックアップして掲載したいということがあるかと思います。 そんな時はカスタムフィールドを使うと便利です。 カスタムフィールドを用意しよう カスタムフィールドを用意する方法はなんでもいいですが、今回はAdvanced Custom Fieldsを使います。 Advanced Custom Fieldsをインストールしたら管理画面のサイドメニューに『ACF』というメニューができているので設定をしていきましょう。 今回は『真偽』を使用します。 チェックボッ […]

マークアップ

cubic-bezierを使ってアニメーションの雰囲気を変えてみよう!

cssをよく使う人なら既におなじみ、transitionプロパティによるアニメーション。 例えばhoverをしたとき、スムーズに画像を拡大等してくれます。 コードの例 使用比較 See the Pen デフォルトアニメーション by kkdd (@kk8kk) on CodePen. これでもアニメーションが滑らかになって十分ではあるのですが、アニメーションをがっつり使うならcubic-bezierというイージング(動きの加減速)をさらに細かく自分で指定できる関数を使用した方 […]

マークアップ

色が敷かれてから画像やテキストが表示されるアニメーションを作ってみよう!

Webサイトを見ると最初に色が敷かれてから画像などが表示、そのあと敷かれた色は非表示に…というアニメーションをよく見かけると思います。 言葉にするとややこしいですが図にすると下のような感じです。 これは、CSSのアニメーショと少しのjsで対応できます。 早速作り方の詳細を見ていきましょう。 実際にアニメーションを作ってみよう とりあえず実際に作成したデモと、これから使用するコードをまとめておきます。 js CSS HTML 上記のものを使用して解説していきます。 jquery […]

スマホアプリ

アプリ初回起動時などに特徴や使い方などを解説する『ウォークスルー画面』のデザインを見てみよう!

初めて入れるアプリは起動時に「どういうアプリなんだろう…?」と恐る恐る使うことがたまにあります。 そんな気持ちを少しでも和らげてくれるのが『ウォークスルー画面』です。 アプリ初回起動時などに特徴や使い方などを解説してくれる画面て見覚えがありませんか? それを『ウォークスルー画面』と呼びます。 今回はそんないろんなアプリの『ウォークスルー画面』を集めてみましたので、デザインなどの参考にどうぞ。 GO LINE 公式アカウント SODA しまむら タイミー Ponta みてね も […]

WordPress

【WordPress】記事の一覧を過去一定期間内のものだけ表示しよう

WordPressで一覧表示をする時、例えば現在から1週間以内、1か月以内、1年以内…など一定期間内のものだけ表示させたいということがあるかと思います。 そんな時はWP_Queryの引数内の『date_query』を使用してうまく表示できるようにします。 投稿の一覧表示に『date_query』を使う まずは通常の投稿のループを記述して、その中に『date_query』を追加していきます。 今回は現在から、という指定なのでbeforeについてはnowを指定しています。 aft […]

WordPress

WordPressのユーザー権限を『User Role Editor』を使って管理しよう

WordPressには 購読者 寄稿者 投稿者 エディター 管理者 といった5つの権限がデフォルトで存在します。 これは記事を登録できる人、記事は登録できず閲覧だけできる人…などの設定がされています。 ただ、運用での条件に合った権限がないという場合もあります。 そんな時は『User Role Editor』という自分の好きなように権限を割り振ることのできるプラグインを使います。 まずはプラグインをインストール まずはプラグインのインストール画面から『User Role Edi […]

WordPress

Smart Custom Fieldsなどのプラグインを使ったときにメディアでPDFなどが一覧で表示されないときの対処法【WordPress】

カスタムフィールドのプラグインとして便利な『Smart Custom Fields』。 無料ながら繰り返しフィールドも使えたり重宝しているのですが、『メディア』を使用するときに「メディアを絞り込む」の部分が「すべてのメディア」になっているにも関わらず画像だけが表示される現象が起きます。 絞り込みを切り替えたら表示されるのですが、PDFなどをメインで登録したいときなどは若干不便です。 今回は「すべてのメディア」で画像以外のメディアがきちんと表示される方法をご紹介します。 とはい […]

マークアップ

【css】borderにグラデーションをかけよう!

borderにグラデーション、いざやってみようと思うとあれ?borderプロパティに対してグラデーションをかけたらいいのかな?と少し戸惑います。 ちょっとしたコツさえつかめばすぐに再現できますので、ためしてみましょう! 実際にやってみよう というわけで実際にやってみましょう。 See the Pen グラデーションborder by kkdd (@kk8kk) on CodePen. はい、できました。 cssだけで見てみましょう。 まずは通常のborderを指定します。ベー […]

WordPress

【WordPress】カテゴリーをチェックボックスからラジオボタンにしよう!

WordPressではカテゴリーがデフォルトだとチェックボックスになっています。 運用の都合で複数にチェックをつけさせたくないな…という場合があるので、そんな時はチェックボックスをラジオボタンにしましょう。 functions.phpに記述をしていこう ※必ずfunctions.phpのバックアップを取りつつ作業をしてください。 通常の『投稿』の場合 通常投稿のカテゴリーの場合は、以下のようにfunctionsに記述を行います。 まずはチェックボックス部分、『#categor […]

マークアップ

『clamp()』関数を使ってフォントサイズを可変にしよう!

様々なデバイス対応をしなければいけない昨今、フォントサイズの指定は悩みどころだったりしますね。 そこで『clamp()』関数を使用すれば1行でフォントサイズの最小値、基準値、最大値を指定することができ、使いようによってはメディアクエリで細かく指定する手間が省けます。 clamp()を実際に使ってみよう では実際の挙動を見てみましょう。 例えば2vwを基準値としたいとき、PCぐらいの表示だと大きすぎるので最大値を20pxに、スマホぐらいの表示だと小さくなりすぎないように最小値を […]

Webサービス

Youtubeなどの動画作成に!フリー素材15選【2022年版】

YouTubeなどに投稿する動画で必要になる素材。 今回は基本的にフリーで手に入れられる素材を提供してくださっているサイトをご紹介します。 ※サイトや素材自体によって規約は変わるので、きちんと確認してからのご使用をお願いします! YouTuberのための素材屋さん 名前の通りYouTuberのためのような動画素材を配布してくれているサイトです。 mp4を配布してくれているので、Adobe Premiere Proなどのクロマキー機能で背景を透過して使用しましょう。 動画AC […]

マークアップ

レスポンシブでのクリッカブルマップ対応は『image-map-resizer』を使おう!

忘れた頃にごく稀に使うことになるクリッカブルマップ。 レスポンシブでは設定したエリアがずれてしまうので『image-map-resizer』というjsに頼ります。 jQuery非依存で結構簡単に導入できます。 画像とHTMLを用意 とりあえずクリッカブルマップに使用する画像を用意します。 HTMLについては『HTML Imagemap Generator』さんを使用します。 画像をドラッグ&ドロップしましょう。 あとは右側のツールを使って図形をなぞるだけです。大変便 […]

マークアップ

iOSのSafariで100vhを使うとはみ出てしまうときはsvh,lvh,dvhを使おう!

iOSで100vhを使った場合、大きいviewportを基準にするため、小さいviewportの時はアドレスバーの分はみ出てしまったりステータスバーで予想外に隠れてしまったり…ということがあったりしますよね。 そんな時は新しい単位『svh』『lvh』『dvh』を使いましょう。 ちなみにこちらはiOS15.4以上から対応している単位なのでandroid対応も含めご注意ください。 『svh』について 『svh』では小さいviewportの方に合わせてくれます。 たぶんsmall […]

Webデザイン

素敵な配色パターンを知りたい!おすすめ配色ツールのまとめ【2022年版】

初心者だと何を選んだらいいのかわからなくなったり、そこそこ経験のある人でも同じようなものを選んでしまったりで悩んでしまう『配色』。 今回はそんな配色のヒントを得られるサイトをご紹介します。 Color Drop 4つの色の組み合わせがずらっと用意されているサイトです。 気になる色をクリックすると右側にカラーコードが発行されるので、あとはコピーするだけ。 用意されている色に限りはありますが、シンプルなものを求めている方におすすめです。 実は地味に画像から色を抽出したりカラーコー […]

1 2 3 8