2021-10-08【Sass】PCのみHover効果を有効にするmixinを紹介！モバイルもHover効果の有無を選択可能CODEcssのPCとモバイルのHover制御は面倒ですよね？PCのHoverスタイルをモバイルで打ち消したりなど、そう面倒だと思いこのhover mixinを作成しましたので紹介します。CSS
2020-09-16静的サイトで共通部分のh1をトップページと下層ページで切り替える方法CODEWEB制作をしているとシステム無しの静的サイトを作ることがあるかと思います。その静的サイトで共通部分のh1をトップページと中ページで切り替える方法を紹介します。PHP
2020-06-27CSSで親要素を無視（突き抜ける）して画面幅いっぱいに広げる方法CODE特定のセクションのみ横幅いっぱいに背景があるデザインって多くないですか？今回はそんなデザインのコーディング時のテクニックをご紹介します。CSSHTML
2020-06-17スクロール位置でナビのカレント状態が変化するJS【ページ内リンク】CODE縦長のページでよくスクロールすると位置でナビゲーションの状態が変化するサイトをみたことがありませんか？状態としてはページの現在地を知らせるためのUIが多いですね。この記事ではそのJSの作り方をご紹介します！JavaScript
2020-05-31【バグ】Safariでborder-radiusがhoverアニメーション中に効かない場合の対応CODE以前案件で「iPhoneで丸くトリミングしてる画像が一瞬四角の画像になるんだけど？」と言われて調べたところiPnoneではなくSafariでborder-radiusが効かない場合があることがわかりました。この記事ではその対処法を紹介します。CSSHTML
2020-05-08JavaScriptでローディング画面を作成する方法（画像を監視）CODE様々なサイトで実装されているローディング画面を実装したいと思ったことはありませんか？この記事ではJavaScriptを使用してローディング画面を実装する方法をご紹介します。JavaScript
2020-03-25LocalbyFlywheelでインストールしたWordPressのディレクトリを変更CODELocalbyFlywheelでインストールしたWordPressをサブディレクトリに移動したいと思ったことはありませんか？この記事ではLocalbyFlywheelでサブディレクトリにWordPressを移動する方法をご紹介します。WordPress
2020-03-21WAI-ARIAに対応したタブを作ってみた（作成方法）【ES6】CODE最近業務でタブを久々に実装することがあったのでアクセシビリティーも考慮したいと思いWAI-ARIAに対応ものを作成してみました。この記事ではその作成したタブをご紹介します。HTMLJavaScript
2020-03-19【UAParser.js】ユーザーエージェントを取得してbodyに情報をclassとして付与する方法CODE画面の幅以外でPCなのかスマホなのかを判定したい場合があるかと思います。そんな時に有効なのがユーザーエージェントです。この記事では僕が使用しているユーザーエージェントを取得してbodyに`ua-sp`や`ua-pc`など情報をclassとして付与する方法をご紹介します。HTMLJavaScript
2020-03-13JavaScriptで一文字ずつspanで囲む方法【主に一文字ずつのアニメーションに使用】CODE文字を一文字ずつアニメーションさせようとする場合は一文字ずつspanタグで囲んでcssでアニメーションさせるのが一般的だと思いますが、そのアニメーションさせる文字数が5文字程度であれば手作業でspanタグで囲んでもいいのですが20や30文字と文字数が多くなるにつれてその作業は大変になります。この記事では文字を span タグで手作業で囲む作業を JavaScript を使用して楽にする方法を紹介します。CSSJavaScript
