WordPress

WordPressでAjax処理を行う時の簡単な方法と流れ

はじめにWordPressでオリジナルテーマやプラグインでAjax通信を設定する流れの備忘録です。wp_localize_scriptwp_ajax_、wp_ajax_nopriv_javascriptこれらのキーワードをこの順番で覚えてお...
Astro

AstroフレームワークにReactを導入する流れ – Astro.jsで静的サイト制作

はじめにフレームワークAstro.jsではReactを導入して部分的にインタラクティブなページを構築することができます。公式 チュートリアルは体系的に学べるのが良いのですがサッと見て思い出したいときのために記事に残しておこうと思います。まっ...
css

【CSS】floatした画像を文章の右下に回りこませる方法

はじめにデザイナーから渡されるデザインカンプで画像が右下の回り込んでいるパターンを見たことがある人はどれだけいるのでしょうか?画像が回り込んでいる部分の幅や高さが固定値ならばそれほど困らないのですが画面幅によって見た目が変わるレスポンシブデ...
HTML

入力内容に応じて高さを自動調整するtextareaの作り方(Javascript、CSS<field-sizing>、jQuery、ライブラリを使った各方法)

はじめにWEBサイトで長い文字列を入力可能にするtextareaタグですがデフォルトのままだと行が増えていくと初期の高さを超えた時に上部の文字が見えなくなってしまいます。スクロールバーが出現してスクロールをすることによって見ることができはし...
Astro

Astroフレームワークで生成フォルダをdistから任意のフォルダ名にする方法 – Astro.jsで静的サイト制作

最新のWEBフレームワーク「Astro.js」で静的サイトを作成するために覚えておくとよいこと第2弾です。今回はビルドコマンドで生成されるフォルダをデフォルトの「dist」から任意の名前に変更する方法です。なぜ任意のフォルダ名にしたいか既存...
Astro

Astroフレームワークを相対リンクにする方法

はじめにウェブフレームワークAstro(Astro.js)を利用して静的サイトを作成する際に各画像パスだったりサイト内リンクが相対リンクだと便利です。この記事を読むとAstro.jsでの相対リンクのプラグインの設定方法がわかります。Astr...
その他

これは便利!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;を設定するとはみ出した文字は…(3点リーダー)として表示されます。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にあがってから自動整形されなくなってしまいました。バージョンのバグかと思っていましたがただの設定ミスだった...