javascript

JavaScriptやjQueryで特定の表示状態を持つ要素の中のインデックスを取得する方法 – display: none の要素は数えないで！

1. はじめにJavaScriptを使用して、特定の表示状態を持つ要素の中でインデックスを取得する方法について解説します。例えば、display: none; の要素を除外して、表示されている要素だけのインデックスを取得したい場合があります。この記事では、jQueryを使用する方法とバニラJavaScript（純粋なJ...
2025.02.04
javascript
css

box-shadowを特定の方向だけに適用する方法 – 影を横には出さずに縦だけに出したいんです

CSSである要素に強調を持たせるために、プロパティbox-shadowは非常に有用な機能です。しかし、特定の方向だけに影を適用したいと思っても実際には不要な方向にも弱い影が出てしまうことがあります。この問題を回避するためのテクニックをご紹介します。box-shadowの基本box-shadowはCSSで影を指定するため...
2025.01.23
css
その他

2手で完了!? Astroフレームワークにtailwindcssを追加する方法

はじめに静的サイトジェネレーターAstroフレームワークにCSSフレームtailwindcssを導入する方法を記します。tailwindcssの導入によってクラス名に悩んだりメディアクエリを無駄に増やすことを避けられて制作がスムーズに進められます。前提node.jsは既にインストールされている状態を想定しています。※n...
2024.11.23
その他
WordPress

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

はじめにWordPressでオリジナルテーマやプラグインでAjax通信を設定する流れの備忘録です。wp_localize_scriptwp_ajax_、wp_ajax_nopriv_javascriptこれらのキーワードをこの順番で覚えておくと良いと思われます。各処理の詳細は下記になります。①Ajax通信用のjavas...
2024.11.17
WordPress
Astro

Astro.jsにReactを導入する完全ガイド｜Astro×Reactでインタラクティブなサイトを作る

Astro.jsは超高速な静的サイトジェネレーターとして注目されていますが、Reactと組み合わせることで、柔軟でインタラクティブなサイト制作が可能になります。本記事では、AstroとReact の組み合わせによる開発手順を、初心者にもわかりやすく解説します。公式 チュートリアルは体系的に学べるのが良いのですがサッと見...
2024.11.10
Astro
css

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

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

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

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

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

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

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

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

意外と簡単！WSL2にCentos9Streamをインストールする方法

はじめに最近CentOS9Streamを操作する必要が発生しましたがいきなり本番系で操作するのも不安なのでまずWSLにインストールして試してみようと思いました。ただUbuntuはMicrosoftStoreでボタン一つで簡単にインストールできるのに対してCentOSはMicrosoft Storeにありません…。ネット...
2024.03.05
その他
その他

iPhone、safariでボタンの文字が青くなる原因と対処方

はじめにWEBサイトのコーディングも終盤にかかりいざ実機確認を行った際、「iPhoneでリンクじゃないボタン（buttonタグ）の色が黒じゃない…」という状態になったことはないでしょうか？Windowsの端末で作業している人は特に。BootstrapなどのCSSフレームワークを使用していれば基本要素には全部ノーマライズ...
2024.02.29
その他
javascript

jsカルーセルswiperでキャッチ画像は見切れてテキスト部分は見切れないレイアウトを実現する方法

はじめにカルーセル（スライダー）をWEBサイトに導入するときにおそらく第1候補に上がってくるだろうプラグインswiper.jsの利用サンプルです。▼Swiper今回作りたいカルーセルの仕様記事のリンクを想定しています。上側は記事のサムネイル、下側は記事のテキスト情報を表示します。さらにテキスト情報には以下の内容が入りま...
2024.02.27
javascript
css

grid-areaプロパティでレスポンシブレイアウトをもっと楽に自由に！cssのgridレイアウトの活用方法

はじめにレスポンシブレイアウトを構築するとき、どのようにCSSを設定するのがよいのでしょうか？display:flex、display:gridのどちらかで設定を行うのがセオリーとなっています。どちらを使うかは条件によって分かれます。例えば…＜条件1＞スマホは1列、デスクトップは4列、要素は左詰めでOK＜条件2＞スマホ...
2024.02.25
css
css

知っておくとかなり使える！複数行の文字を丸めるcssプロパティline-clamp

はじめにあるブロック範囲内にテキストを収めたい場合、cssプロパティtext-overflow: ellipsis;を設定するとはみ出した文字は…（３点リーダー）として表示されます。WordPressなどの記事の抜粋を表示するサイト制作の際にとても役にたつプロパティなのですがtext-overflow:ellipsis...
2024.02.23
css
stylus

レスポンシブフォントサイズをstylusで関数化。サンプルコードはこちら

はじめにレスポンシブのサイトを作る際にフォントサイズの指定はどのようにしているでしょうか？この記事ではメディアクエリを使用せず画面幅に合わせたフォントサイズを指定するコードを紹介します。CSSではなくnode製altcssのstylusのコードになります。各要素に気軽に設定できるようにmixinになっています。styl...
2024.01.10
stylus
javascript

スタイルガイドジェネレーターfractalでHandlebarsではなくNunjucksを使用する方法

はじめにサイトやWEBアプリなどの見やすいスタイルガイドを作成できるジェネレーターのひとつに「Fractal」というツールがあります。FractalFractalは何も指定しなければテンプレートエンジンに「Handlebars」を使用しますが設定次第でそれを「nunjucks」に変更することができます。今回はFract...
2023.11.21
javascript
HTML

inputに入力された全角数字を半角数字にリアルタイム変換するjavascriptとその仕組み（jQuery不使用）

はじめにフォームで入力欄に全角数字だけを入力してほしいときがあります。javascriptでリアルタイム変換が可能なのでひと手間かけて処理を追加しておくと間違いが減ってよりよいフォームになるでしょう。今回はjQueryは使用しないで処理を行うスクリプトです。コードのサンプル早速コードのサンプルです。①"oninput"...
2023.11.12
HTMLjavascript
HTML

ちょっと待って！！知っていますか？input type=numberの落とし穴

はじめにユーザーに何かを入力してもらいたい画面を作成する場合にinputタグのtypeは何にしていますか？数字を入力してほしい場合にtype属性の値をnumberにするべきだと安直に考えてはいけません。input type=numberには落とし穴があります。input type=numberの落とし穴Chromeでs...
2023.11.07
HTML
javascript

ReactをCDNで利用した場合のuseState、useEffectの書き方

はじめにReactをCDNから利用することは以前の記事で書きました。▼過去の記事はこちらReactに限らずjavascriptのフレームワークでは状態管理が便利です。Reactの状態管理useStateとuseEffectですが、npmで構築する時と書き方が少し変わってきます。今回はCDNでuseState、useEf...
2023.11.06
javascript
javascript

これなら簡単！cdnでreactとjsxを呼び出してサイトに組み込む方法

はじめにjavascriptの人気ライブラリ「React」ですが使用方法を調べるとnpmでインストールする方法にたどりつくと思います。それも良いのですが既にReactなしで出来上がったサイトに組み込みたい時や気軽にReactの良いとこどりをしたい時はnpmは使用せずcdnを利用するのも良い選択かもしれません。この記事で...
2023.11.02
javascript
次のページ