-
WordPressでAjax処理を行う時の簡単な方法と流れ
※このページはプロモーションを含みます はじめに WordPressでオリジナルテーマやプラグインでAjax通信を設定する流れの備忘録です。 これらのキーワード…
-
Astro FrameworkにReactを導入する流れ – フレームワークAstro.jsで静的サイト制作
※このページはプロモーションを含みます はじめに フレームワークAstro.jsではReactを導入して部分的にインタラクティブなページを構築することができます…
-
【CSS】floatした画像を文章の右下に回りこませる方法
※このページはプロモーションを含みます はじめに デザイナーから渡されるデザインカンプで画像が右下の回り込んでいるパターンを見たことがある人はどれだけいるのでし…
-
入力内容に応じて高さを自動調整するtextareaの作り方（Javascript、CSS<field-sizing>、jQuery、ライブラリを使った各方法）
※このページはプロモーションを含みます はじめに WEBサイトで長い文字列を入力可能にするtextareaタグですがデフォルトのままだと行が増えていくと初期の高…
-
Astro Frameworkで生成フォルダをdistから任意のフォルダ名にする方法 – フレームワークAstro.jsで静的サイト制作
最新のWEBフレームワーク「Astro.js」で静的サイトを作成するために覚えておくとよいこと第2弾です。 今回はビルドコマンドで生成されるフォルダをデフォルト…
-
Astro Frameworkを相対リンクにする方法 – フレームワークAstro.jsで静的サイト制作
はじめに ウェブフレームワークAstro（Astro.js）を利用して静的サイトを作成する際に各画像パスだったりサイト内リンクが相対リンクだと便利です。この記事…
-
これは便利！HTMLのdialogタグでのモーダルウインドウ実装とアニメーション設定方法
※このページはプロモーションを含みます モーダルウインドウ機能を実装するのに古い方法で作成していませんか？ 古い方法とは次のようなやり方です。 この記事はdia…
-
jsでもっとちゃんとタブUIを実装する（jQuery不使用）- ページ更新してもタブがリセットされないやり方
※本ページはプロモーションを含みます WEBサイトに一般的なタブのUIを追加したい時、インターネットで実装のサンプルコードを探すことがあると思います。たくさんの…
-
意外と簡単！WSL2にCentos9Streamをインストールする方法
※本ページはプロモーションを含みます はじめに 最近CentOS9Streamを操作する必要が発生しましたがいきなり本番系で操作するのも不安なのでまずWSLにイ…
-
iPhone、safariでボタンの文字が青くなる原因と対処方
※本ページはプロモーションを含みます はじめに WEBサイトのコーディングも終盤にかかりいざ実機確認を行った際、「iPhoneでリンクじゃないボタン（butto…
-
jsカルーセルswiperでキャッチ画像は見切れてテキスト部分は見切れないレイアウトを実現する方法
※本ページはプロモーションを含みます はじめに カルーセル（スライダー）をWEBサイトに導入するときにおそらく第1候補に上がってくるだろうプラグインswiper…
-
grid-areaプロパティでレスポンシブレイアウトをもっと楽に自由に！cssのgridレイアウトの活用方法
※本ページはプロモーションが含まれています はじめに レスポンシブレイアウトを構築するとき、どのようにCSSを設定するのがよいのでしょうか？ display:f…
-
知っておくとかなり使える！複数行の文字を丸めるcssプロパティline-clamp
※本ページはプロモーションが含まれています はじめに あるブロック範囲内にテキストを収めたい場合、cssプロパティtext-overflow: ellipsis…
-
レスポンシブフォントサイズをstylusで関数化。サンプルコードはこちら
※本ページはプロモーションを含みます はじめに レスポンシブのサイトを作る際にフォントサイズの指定はどのようにしているでしょうか？ この記事ではメディアクエリを…
-
スタイルガイドジェネレーターfractalでHandlebarsではなくNunjucksを使用する方法
※本ページはプロモーションを含みます はじめに サイトやWEBアプリなどの見やすいスタイルガイドを作成できるジェネレーターのひとつに「Fractal」というツー…
-
inputに入力された全角数字を半角数字にリアルタイム変換するjavascriptとその仕組み（jQuery不使用）
※本ページはプロモーションが含まれています はじめに フォームで入力欄に全角数字だけを入力してほしいときがあります。 javascriptでリアルタイム変換が可…
-
ちょっと待って！！知っていますか？input type=numberの落とし穴
※本ページはプロモーションを含みます はじめに ユーザーに何かを入力してもらいたい画面を作成する場合にinputタグのtypeは何にしていますか？ 数字を入力し…
-
ReactをCDNで利用した場合のuseState、useEffectの書き方
はじめに ReactをCDNから利用することは以前の記事で書きました。 ▼過去の記事はこちら Reactに限らずjavascriptのフレームワークでは状態管理…
-
これなら簡単！cdnでreactとjsxを呼び出してサイトに組み込む方法
はじめに javascriptの人気ライブラリ「React」ですが使用方法を調べるとnpmでインストールする方法にたどりつくと思います。 それも良いのですが既に…
-
Day.jsの使い方と活用方法
はじめに javascriptで日付処理を扱うことは大変なのでライブラリを使用することが多々あります。特に有名なjavascriptの日付ライブラリ「Day.j…