Bootstrap バージョン 5 の始め方（実行可能サンプルあり）
この記事では、Bootstrap の概要を紹介し、Bootstrap 5 の初期化方法を紹介します。実行可能サンプルも公開しているので、ダウンロードして手元で動かして…
Web 開発
全 42 件の記事
※本ページには広告・PR が含まれます。
ロリポップ：MySQL + PHP + React の連携方法（サンプルあり）
本稿では、ロリポップの MySQL データを PHP の Web API 経由で React アプリケーションに表示する方法を紹介します。
ロリポップに Vue.js 3 アプリケーションを公開する（デプロイ用サンプルあり）
この記事では、ロリポップに Vue.js（Vue 3）アプリケーションを公開する方法を紹介します！Vue.js を使ったポートフォリオサイト作成の参考にしていただければと思います。
FileZilla Portable を利用したロリポップ FTP 接続とファイルのアップロード方法
FileZilla Portable を利用した、レンタルサーバーへの FTP 接続と、ファイルのアップロード方法を紹介します。
Bootstrap navbar + dropdown サンプル（実行可能サンプルあり）
Bootstrap navbar と dropdown を組み合わせたヘッダーナビゲーションメニューの実装例を示します。
Bootstrap: 要素の下側に罫線を表示する方法
border-bottom クラスを利用することで、要素の下側に罫線を表示することができます。ヘッダー navbar の下罫線を表示する際に重宝します。
Bootstrap: 要素の上側（上部）に罫線を表示する方法
border-top クラスを利用することで、要素の上側（上部）に罫線を表示することができます。フッターの上罫線などを表示する際に重宝します。
Bootstrap: マージンを設定する方法
Bootstrap でマージンを設定する方法を紹介します。通常の CSS のプロパティ表記と異なり、省略形が使われているので、省略のルールを示します。
Bootstrap: img-fluid による画像のレスポンシブ対応
Bootstrap では、img-fluid クラスを適用することで、画像のレスポンシブ対応を行うことができます。bootstrap-responsive-image.html.zip サンプル内の img タグの sr…
【ロリポップで簡単】WordPress サイトの構築方法
ロリポップでの、WordPress サイトの構築方法を紹介します。この記事の手順に従うことで、だれでも WordPress サイトを構築することができます。
【すべて教えます！】WordPress による会員サイト作成方法
会員サイトを作る方法を考えた場合、大きく分けて次の３つがあります。１はある程度のソフトウェア開発スキルが必要となります。
WordPress 管理者画面左上の WordPress アイコンを非表示にする方法
functions.php に次のコードを追加します。
WordPress 管理者画面で投稿者に他ユーザーの投稿やメディアを表示させない方法
こちらのプラグインをインストール・有効化で対応できます。PublishPress Permissions: Control User Access for Posts, Pages, Categories, Tags –…
PublishPress Permissions: WordPress 管理画面で他ユーザーのメディアを表示しない方法
WordPress で複数ユーザーがログイン・記事執筆をする運用をしている場合、他ユーザーのメディアを非表示にしたい状況はよくあります。
jQuery extend メソッドによるオブジェクトの結合
jQuery の extend メソッドを利用することで、複数のオブジェクトを結合することができます。
Bootstrap のリンクの下線を消す方法（サンプルあり）
Bootstrap 5 でリンクの下線を消すクラスを紹介します。本稿下部に、ダウンロード可能なサンプルも用意しております。
JavaScript 配列の要素を並べ替える
JavaScript の配列の要素を並べ替えるには、sort() メソッドを使うことができます。sort() メソッドは、引数無く呼び出すと、値をアルファベット順で並べ替えます。
Flexbox を利用してレスポンシブなレイアウトを実現する
Flexbox を利用して、レスポンシブレイアウトを実現する例です。PC などの幅の広い画面では、サイドメニューがメインコンテンツの左側に表示されています。
CSS: flexbox で固定フッターを表示（サンプルコードあり）
コンテンツの量に関わらず、常に画面下部にフッターを表示する例です。こちらの記事で紹介している実装と比較し、３箇所ほど追加することで対応することができます。
flexbox でフッターを表示する
css の flexbox を使い、フッターを表示します。ページの body には、min-height で高さを明示しておきます。
jQuery - window オブジェクトに登録されているイベントを取得する方法
次の実装で、window オブジェクトに登録されているイベントを取得することができます。$.\data() の第一引数には検証対象の要素を指定します。
JavaScript String.includes メソッド
JavaScript の String.includes メソッドを利用することで、文字列に任意の文字列が含まれているかを判定することができます。
Flexbox を利用して要素を中央と右端に表示
Flexbox を利用して、要素を中央と右端に表示してみます。parent クラスで display: flex としているので、justify-content に center とすることで、子要素（メインアイテム）…
Flexbox を使って要素を並べる
Flexbox を利用して、要素を横並び、縦並びにする方法です。リストの親要素(div class="list") の display に flex を指定します。
要素を画面の下部に表示する方法
HTML と CSS で、要素を画面の下部に表示する方法です。CSS で position を fixed、bottom に 0px とします。
TypeScript input 要素の入力値を div 要素に反映する
タイトルの通り、input 要素に入力された値を div 要素にも表示する例です。入力要素：input (id: titleInput, contentInput) 反映対象：div(id: titleArea, c…
JavaScript でページ表示時に処理を実行（DOMContentLoaded）
JavaScript でページ表示時に処理を実行するコードです。document オブジェクトに DOMContentLoaded イベントを登録します。
XAMPP Lite の Apache 設定（IIS との共存）
IIS をインストールしている環境だと localhost:80 は先に使われているので、XAMPP には localhost:8080 を利用するように変更します。
innerText と textContent の違い
例えば、下記の HTML があった場合の innerText と textContent の取得結果を比較してみましょう。
xampp for linux コントロールパネル表示方法
このコマンドで開きます。 cmd sudo /opt/lampp/manager-linux-x64.run
localStorage への JSON データ保存と復元
cookie 以外でブラウザ側にデータを保存することの出来る localStorage があります。ここでは簡単に localStorage へ JSON データを保存し、復元する例を紹介します。
JavaScript Date（日付） データを yyyy/MM/dd 形式にフォーマットする
本稿では、JavaScript の Date オブジェクトをフォーマットする方法を紹介します。JavaScript の Date 型データはデフォルトでは下記の形式生成されます。
jQuery nth-child による子エレメント取得
jQuery の nth-child を利用してエレメント内に含まれる子エレメントを取得する方法です。nth-child では引数にインデックス、奇数、偶数、等間隔で子エレメントを取得することができますが…
jQuery table に含まれている要素を取得する
今回は jQuery で table に含まれている要素を取得してみます。table の構造はセルであれば、table > tr > td と階層化しています。
jQuery：on と off によるイベント登録と登録解除
jQuery でイベントを登録する方法です。バージョンに応じて様々な方法がありますが、ここでは on と off を使ってイベントを登録する実装例を紹介します。
jQuery val() メソッドによる値の取得と変更
val() メソッドはエレメントの value 属性を取得、変更します。
jQuery ページ初期表示時に処理を実行（サンプルあり）
jQuery を使ってページが読み込まれるタイミングで処理を行う場合、以下の方法で処理を呼び出すことができます。匿名関数を初期化する方法です。
jQuery：div 要素の横スクロールを同期させる
jQuery を利用して div 要素の横スクロールを同期することができます。Synchronized scrolling using jQuery?
jQuery：リストから最大値を取得する
jQuery を（一部）使ってリストの中から最大値を取得するコード例です。Math ライブラリなどを使えばもっと省コードで記述できると思いますが、読みやすいしまずはこれから。
JavaScript 名前空間の定義
JavaScript で名前空間を定義して、その中にクラスと関数を作成してみましょう！JavaScript では名前空間を扱う仕組みが用意されていないので、名前空間は名前空間として利用される専用のオブジェクトです。
JavaScript：setTimeout を使った処理の遅延
クライアントサイドプログラミングをしている時、特に jQuery でアニメーション効果が有効になっていると、イベント発生時にターゲットとなる HTML エレメントが生成されていなくて思い通りのロジック実装ができない・・・…
JavaScript - C# String.Contains メソッドの代わり
注意：ES5 では、includes メソッドを利用して同じ要件を達成することができます。詳しくは、下記記事を参照ください。