その他 これは便利！HTMLのdialogタグでのモーダルウインドウ実装とアニメーション設定方法
モーダルウインドウ機能を実装するのに古い方法で作成していませんか？古い方法とは次のようなやり方です。オーバーレイ（モーダルの背景）用のdivタグを用意モーダルの実体用のdivタグを用意cssもしくはjsでpositionやopacity、d...
その他 
その他 jsでもっとちゃんとタブUIを実装する（jQuery不使用）- ページ更新してもタブがリセットされないやり方
WEBサイトに一般的なタブのUIを追加したい時、インターネットで実装のサンプルコードを探すことがあると思います。たくさんの記事が検索でひっかかりますが「とりあえず動けば良い」というようなコードも少なくありません。タブを押せて該当するコンテン...
その他 意外と簡単！WSL2にCentos9Streamをインストールする方法
はじめに最近CentOS9Streamを操作する必要が発生しましたがいきなり本番系で操作するのも不安なのでまずWSLにインストールして試してみようと思いました。ただUbuntuはMicrosoftStoreでボタン一つで簡単にインストールで...
その他 iPhone、safariでボタンの文字が青くなる原因と対処方
はじめにWEBサイトのコーディングも終盤にかかりいざ実機確認を行った際、「iPhoneでリンクじゃないボタン（buttonタグ）の色が黒じゃない…」という状態になったことはないでしょうか？Windowsの端末で作業している人は特に。Boot...
javascript jsカルーセルswiperでキャッチ画像は見切れてテキスト部分は見切れないレイアウトを実現する方法
はじめにカルーセル（スライダー）をWEBサイトに導入するときにおそらく第1候補に上がってくるだろうプラグインswiper.jsの利用サンプルです。▼Swiper今回作りたいカルーセルの仕様記事のリンクを想定しています。上側は記事のサムネイル...
css grid-areaプロパティでレスポンシブレイアウトをもっと楽に自由に！cssのgridレイアウトの活用方法
はじめにレスポンシブレイアウトを構築するとき、どのようにCSSを設定するのがよいのでしょうか？display:flex、display:gridのどちらかで設定を行うのがセオリーとなっています。どちらを使うかは条件によって分かれます。例えば...
css 知っておくとかなり使える！複数行の文字を丸めるcssプロパティline-clamp
はじめにあるブロック範囲内にテキストを収めたい場合、cssプロパティtext-overflow: ellipsis;を設定するとはみ出した文字は…（３点リーダー）として表示されます。WordPressなどの記事の抜粋を表示するサイト制作の際...
stylus レスポンシブフォントサイズをstylusで関数化。サンプルコードはこちら
はじめにレスポンシブのサイトを作る際にフォントサイズの指定はどのようにしているでしょうか？この記事ではメディアクエリを使用せず画面幅に合わせたフォントサイズを指定するコードを紹介します。CSSではなくnode製altcssのstylusのコ...
javascript スタイルガイドジェネレーターfractalでHandlebarsではなくNunjucksを使用する方法
はじめにサイトやWEBアプリなどの見やすいスタイルガイドを作成できるジェネレーターのひとつに「Fractal」というツールがあります。FractalFractalは何も指定しなければテンプレートエンジンに「Handlebars」を使用します...
HTML inputに入力された全角数字を半角数字にリアルタイム変換するjavascriptとその仕組み（jQuery不使用）
はじめにフォームで入力欄に全角数字だけを入力してほしいときがあります。javascriptでリアルタイム変換が可能なのでひと手間かけて処理を追加しておくと間違いが減ってよりよいフォームになるでしょう。今回はjQueryは使用しないで処理を行...
HTML ちょっと待って！！知っていますか？input type=numberの落とし穴
はじめにユーザーに何かを入力してもらいたい画面を作成する場合にinputタグのtypeは何にしていますか？数字を入力してほしい場合にtype属性の値をnumberにするべきだと安直に考えてはいけません。input type=numberには...
javascript ReactをCDNで利用した場合のuseState、useEffectの書き方
はじめにReactをCDNから利用することは以前の記事で書きました。▼過去の記事はこちらReactに限らずjavascriptのフレームワークでは状態管理が便利です。Reactの状態管理useStateとuseEffectですが、npmで構...
javascript これなら簡単！cdnでreactとjsxを呼び出してサイトに組み込む方法
はじめにjavascriptの人気ライブラリ「React」ですが使用方法を調べるとnpmでインストールする方法にたどりつくと思います。それも良いのですが既にReactなしで出来上がったサイトに組み込みたい時や気軽にReactの良いとこどりを...
その他 npm-scriptsでprettierが動かない！バージョンを変えると直ると思っていたら実はgitignoreが関係したという話
はじめにnpmを使用してサイト制作をする際にコード自動整形ツール「prettier」を使用しています。prettierのバージョンが3にあがってから自動整形されなくなってしまいました。バージョンのバグかと思っていましたがただの設定ミスだった...
javascript tailwindcssの使い方をさくっと説明 – ざっくり入門したい人向け
tailwindcssはcssフレームワークです。他のCSSフレームワークとの違いはtailwindcssはユーティリティークラスの集まりだということです。CSSフレームワークの代表的な存在の「Twitter Bootstrap」はユーティ...
WordPress Vscode＋wsl2でWordPressコード規約をもとにした自動整形を実現する方法 – 後の作業をもっと楽に
今最も人気のあるコードエディタといえばMicrosoftのVisual Stuido Codeではないでしょうか？拡張機能を使えばコーディング規約に基づき自動整形をしてくれる等とても効率的に開発を行えます。PHPの自動整形も同様です。しかし...
javascript 新しいページトップボタンの処理の書き方。【CSS】scroll-behaviorと【JS】scrollIntoViewを使ったスムーズスクロール
WEBサイトの定番部品の「ページトップへ戻るボタン」。だいたいのWEBサイト、ランディングページ（LP）で必要なので使い回している人も少なくないはずです。jQueryのanimateを利用している人、そのコードもう古いかもしれません。IE1...
WordPress tailwindcssをWordPressにマッチさせる方法 – テーマ開発における相性の悪さをカバーしよう
tailwindcssというCSSフレームワークが人気です。非常に便利なのでWordPressテーマ開発に導入して見たところ相性について思うことがありましたのでお伝えします。tailwindcssとはユーティリティーベースのCSSフレームワ...
javascript jQueryなしでも大丈夫！Ajax処理を生のjavascriptで行う方法
AjaxとはAsynchronous + JavaScript + XMLの頭文字を使用した非同期処理のことです。jQueryで書くと楽に書くことができます。jQueryでの書き方は以下の記事に書きました。jQueryを使う書き方の記事が多...
javascript Ajaxでjsonファイルを読み込んでhtmlを更新する簡単な方法（jQuery使用）
WEBサイトで部分的に更新できるようにしたい場合、そのためにWordPressやMovableTypeなどのCMSを用意するのは少し大がかりすぎるなと思うケースがあります。そんなときにはjsonデータなどの外部ファイルをAjaxで取得して表...