HTMLやCSSを学び始めたばかりの人にとって、「float」というプロパティはどこか古くさく、難しそうに感じられるかもしれません。 でも実は、floatは今でも“画像の回り込み”などで役立つ現役のレ
HTML・CSS・WordPress・PHPなどWEB制作における役立つ知識や小ネタを集めました。
https://web-create-kokusyo.com/
ウェブ開発において、コメントアウトはコードの可読性やメンテナンス性を高めるための重要な技術です。HTMLだけでなく、PHPでもコメントアウトは頻繁に使用されます。本記事では、HTMLおよびPHPでのコ
Webページを作成する際、テキストの改行は非常に重要です。<br>タグを使うことが一般的ですが、他にもさまざまな方法があります。この記事では、<br>タグ以外のHTMLでの改行
WordPressトラブル解決の決定版！「クイックレスキュー」が安心サポート！
クイックレスキュー 【よこやま良平】が立ち上げた即日対応サービス「クイックレスキュー」は、低価格で迅速なサービスを提供します。調査料やキャンセル料は一切かからず、修復・復旧作業は最短30分で完了します
スクロールバーがあると画面ががたつく スクロールバーは役立ちますが、デザインやユーザー体験に悪影響を与えることがあります。例えば、スクロールバーがあることで画面ががたつくように見えることがあります。こ
ウェブサイトやアプリケーションでユーザーから情報を収集する際、長いフォームはユーザーを圧倒させ、入力を途中で放棄させてしまう可能性があります。 そんなときに役立つのが「ウィザード形式」のフォームです。
JavaScript非同期処理の完全ガイド：基本から応用まで
この記事では、setTimeoutを用いて非同期処理で起こり得る順序の問題を模擬し、どのようにしてこれを理解し管理するかを解説します。非同期処理をどのようにコントロールするか、具体的な手法としてコール
クリックできない！は「pointer-events: none」で解決
pointer-events: none とは何か？ pointer-events プロパティは、要素がポインティングデバイス（マウス、タッチスクリーンなど）のイベントにどのように反応するかを制御しま
JavaScriptで文字列を効果的に切り出す方法【正規表現】
JavaScriptでの文字列操作は、データ処理やUI開発において欠かせないスキルです。この記事では、基本的な文字列の切り出し方法から、少し変わったテクニックや便利な小ネタまで幅広くカバーします。具体
モダンなWebデザインのためのHTMLタブ切り替えテクニック【jQueryなし】
ウェブサイトやアプリケーションにおいて、コンテンツを整理し、ユーザーにフレンドリーなナビゲーションを提供するための一般的な方法として、タブ切り替え機能がよく利用されます。この記事では、JavaScri
モダンなWebデザインのためのHTMLタブ切り替えテクニック【jQueryなし】
ウェブサイトやアプリケーションにおいて、コンテンツを整理し、ユーザーにフレンドリーなナビゲーションを提供するための一般的な方法として、タブ切り替え機能がよく利用されます。この記事では、JavaScri
【完全版】ページ内リンクが反応しない！原因と解決策の総まとめ
ウェブサイトのナビゲーションにおいて、ページ内リンクはユーザビリティの向上に不可欠です。しかし、これらのリンクがうまく機能しないことがあり、サイト訪問者にとっては大きな不便をもたらします。本記事では、
HTMLとJavaScriptで実現する画像クリック拡大機能【コピペ可】
ウェブサイトやブログで、コンテンツをより魅力的に見せる方法の一つに、クリックによる画像や動画の拡大表示があります。この記事では、HTML、CSS、およびJavaScriptを使用して、画像と動画の両方
textareaの初期値の設定 通常テキストボックスに初期値を設定する場合は、value属性を使用すれば簡単に初期値が設定できます。 <input type="text" v
多言語サイトとは、複数の言語でコンテンツを提供するウェブサイトのことを指します。グローバルに展開する企業や、多言語を話すユーザーを対象としたサービス、観光や国際交流を促進する公的機関などが主に利用して
hoverのスタイルをスマホで実装する方法完全版【html】
hoverクラスのスタイルはスマホに反映されない スマホなどのタッチデバイスでhoverスタイルがうまく反映されない主な理由は、タッチデバイスには「マウスオーバー」の概念がないためです。chromeな
サンプルとソース See the Pen Untitled by kokusyo (@kokusyo) on CodePen. ポイントはただ2つです。 aタグのhref属性にページ先頭のidを指定す
【完全無料】ブラウザ上で学ぶ実践的プログラミング「Tech Sapuri（テックサプリ）」
「Tech Sapuri（テックサプリ）」は、オンラインプログラミング学習サービスで、ブラウザ上で実践的な学習ができる特徴を持っています。煩雑な環境構築は不要で、初心者でも手軽にアクセスできるため、学
カード型レイアウトのテキスト位置が揃わない 今回テキスト位置を揃えたいのは以下のような、よくあるカード型レイアウトです。赤線で分かりやすく示しましたが、タイトルの文字数が異なるため、その下のテキストの
Vue.jsをCDNで読み込む Vue.jsを使用する時は、プロジェクトを作成～と思ったかもしれませんが、Vu.jsはCDNで読み込むことができます。CDNは以下の通りです。 <script s
【jQueryのみ】htmlでページネーションを実装してみよう！【コピペOK】
静的なHTMLにページネーションを実装 ページネーションは、項目の数が多い時などに便利です。下記のように、ただズラズラと並んでいても、ページネーションを実装すればすっきりするし、視認性も良いです。しか
WordPressのバックアップの重要性 WordPressのバックアップが重要な理由は以下の通りです。定期的にバックアップを取ることで、あらゆるトラブルからウェブサイトを守ることができます。 データ
【hegiht:0】の要素をアニメーションさせる2大手法【html】
「height:0」→ 「hgiht:auto」はアニメーションが効かない 先述したように「hegiht:0」→「hegiht:auto」はアニメーションが効きません。実際に開閉するボタンとボックスを
無料で学べるプログラミングスクールが存在する プログラミングは現代社会における重要なスキルの一つとなっており、多くの人々が学びたいと考えています。しかし、プログラミングスクールの料金相場は、スクールや
https://web-create-kokusyo.com/vue/vue3_ourse1/ 前回はこちら！ Vue3起動の仕組み コンポーネント編集に入る前に、Vue3の起動の仕組みについて確認し
https://web-create-kokusyo.com/vue/vue3_ourse1/ 前回はこちら！ Vue3起動の仕組み コンポーネント編集に入る前に、Vue3の起動の仕組みについて確認し
【SiteGuard WP Plugin】WordPressのセキュリティはとりあえずこれ入れとけ！
WEB制作者にはおなじみのWordPress。一説には、世界の40％のサイトがWordPressで作られていると言われるほど普及したCMSです。 ただ、それだけ多くのシェアがあり、しかもオープンソース
プログラミング初心者におすすめの単語学習アプリ「プログラミング単語帳」
最近おもしろいいアプリを見つけたのでご紹介します。今までにありそうで、なかったアプリではないでしょうか？ その名は！ プログラミング単語帳（プロ単） このアプリでは、初心者から中級者が学ぶべきプログラミングの単語が網羅的に収録されており、単語の使い方の実例や読み方など、プログラミングに必要な単語を覚えることができます。
プログラミング初心者におすすめの単語学習アプリ「プログラミング単語帳」
最近おもしろいいアプリを見つけたのでご紹介します。今までにありそうで、なかったアプリではないでしょうか？ その名は！ プログラミング単語帳（プロ単） このアプリでは、初心者から中級者が学ぶべきプログラミングの単語が網羅的に収録されており、単語の使い方の実例や読み方など、プログラミングに必要な単語を覚えることができます。
【JavaScript】カレンダーを爆速で実装しよう！【Datepicker】
簡単にカレンダー機能を実装できるライブラリ「datepicker」。 今回はそんな「datepicker」の使用方法や実際の現場で良く使用することになるであろうオプションなどを初めての方でも分かるようにサンプルを交えながら解説致します。 javaScriptが良く分からないという方でもコピペで、実装できると思います。
「リスキリングを通じたキャリアアップ支援事業」について調べてみた
最近プログラミングスクールのサイトを見ると、受講費用の70%OFF（上限56万円）という表記をよく見ますね。 今回は制度の対象者、補助金を最大限受け取るための条件などを調べてみました。 スクールに入校を考えている方は、絶対利用した方がいい制度なので是非最後までお読みください。
「リスキリングを通じたキャリアアップ支援事業」について調べてみた
最近プログラミングスクールのサイトを見ると、受講費用の70%OFF（上限56万円）という表記をよく見ますね。 今回は制度の対象者、補助金を最大限受け取るための条件などを調べてみました。 スクールに入校を考えている方は、絶対利用した方がいい制度なので是非最後までお読みください。
【Vue3】 leafletを使用してマップアプリを作成しよう
最近なんとなく、私の故郷である宮崎県の観光サイトでも作ってみようと思い、Vue3とleafletを使用して作成しました。 その際、vue3とleafletに関してのドキュメントが少なかったので、調べついでにこちらに記したいと思います。 比較的よく使用する機能を纏めているので、作成のご参考に頂ければ幸いです。
最近買った本【フロントエンドの知識地図】を読み終わったので、感想を記載したいと思います。 この本を読むのにオススメの方や、読んでどのような知識が得られるか、さらには実際に読んでみての良かったポイント・惜しかったポイントなどを纏めました。この本が気になっている方は、購入のご参考に下さい。
最近買った本【フロントエンドの知識地図】を読み終わったので、感想を記載したいと思います。 この本を読むのにオススメの方や、読んでどのような知識が得られるか、さらには実際に読んでみての良かったポイント・惜しかったポイントなどを纏めました。この本が気になっている方は、購入のご参考に下さい。
「display:none」の要素は、transitionプロパティを使用してもフェードインすることはできません。 opacityはフェードインすることも容易ですが、タブ切り替えの時など、display:noneを使用したいこともあると思います。 display:noneの要素をフェードインする方法を解説致します。
【Vue3】初心者講座 Vol.1【Vueプロジェクト作成】
JavaScriptの大人気フレームワークのVue.js。 Vue3になってまだ日が浅く、Web上にもあまり関連する記事がないように見受けられます。 なので、今回はVue3とTypeScriptを使用したアプリケーション作成の手順を、初めてVue.jsに触る初心者でも分かるように解説致します。
【Vue3】初心者講座 Vol.1【Vueプロジェクト作成】
JavaScriptの大人気フレームワークのVue.js。 Vue3になってまだ日が浅く、Web上にもあまり関連する記事がないように見受けられます。 なので、今回はVue3とTypeScriptを使用したアプリケーション作成の手順を、初めてVue.jsに触る初心者でも分かるように解説致します。
Vue3 フロントエンド開発の教科書を実際に購入・学習した感想とレビューを掲載いたします。 この本は全編にわたり、Vue3の新しい記述方である「Composition API」について学べます。 色々調べましたが、「Composition API」についてガッツリ書かれてるのはこの本だけだと思います。
Vue3 フロントエンド開発の教科書を実際に購入・学習した感想とレビューを掲載いたします。 この本は全編にわたり、Vue3の新しい記述方である「Composition API」について学べます。 色々調べましたが、「Composition API」についてガッツリ書かれてるのはこの本だけだと思います。
今回は「Node.js」をインストールする方法を解説致します 「Node.js」は、簡単にいうと「JavaSc
今回は「Node.js」をインストールする方法を解説致します 「Node.js」は、簡単にいうと「JavaSc
スマホ時のフォントサイズの推奨値は16pxとなっています。 ただ、16pxのフォントサイズでは少し大きいような気がします。 かといって、あまり小さくするのも可読性が下がってしまいます。 13px～16pxのサイズが適切ですが、どこに設定しているサイトが多いのかを調べてみました。
スマホ時のフォントサイズの推奨値は16pxとなっています。 ただ、16pxのフォントサイズでは少し大きいような気がします。 かといって、あまり小さくするのも可読性が下がってしまいます。 13px～16pxのサイズが適切ですが、どこに設定しているサイトが多いのかを調べてみました。
タグはどこに設定すべきかを調べてみた【Web制作会社20社調査】
結局タグに何を設定するのがいいんだろうかと考えたことはありませんか？h1タグはSEO的にも重要で最も伝えたいものを設定するタグです。今回は、Web制作会社20社の制作実績からh1タグをどこに設定するのが正解かを調べてみました。最後に私個人の正解を考えましたのでぜひご参考にしてください。
slickを使用して、「真ん中のスライドに左右のスライドを表示させる方法」「右のスライド（次のスライド）をチラ見せさせる方法を」解説致します。センターモードを使用する方法は良くありますが、次のスライドを表示させる方法はネットを検索してもあまり出てきません。なので今回の記事で分かりやすく解説致します。
「"みんなで学べる"ライブ動画学習サービス」がキャッチコピーの学習サイト「Schoo」 恥ずかしながら私このサービスを知りませんでしたが、使ってみたらめちゃめちゃ良かったので体験した感想を今回はご紹介致します！ 実際に学習して良かったところ、残念なところも正直にレビューしてますので気になっている方は参考にしてください
「"みんなで学べる"ライブ動画学習サービス」がキャッチコピーの学習サイト「Schoo」 恥ずかしながら私このサービスを知りませんでしたが、使ってみたらめちゃめちゃ良かったので体験した感想を今回はご紹介致します！ 実際に学習して良かったところ、残念なところも正直にレビューしてますので気になっている方は参考にしてください
「"みんなで学べる"ライブ動画学習サービス」がキャッチコピーの学習サイト「Schoo」 恥ずかしながら私このサービスを知りませんでしたが、使ってみたらめちゃめちゃ良かったので体験した感想を今回はご紹介致します！ 実際に学習して良かったところ、残念なところも正直にレビューしてますので気になっている方は参考にしてください
長くWEBサイトを運用してページ数が増えたり、昔に作成したページなどは気を付けないといつの間にかリンクが切れてたりなんてことがあります。 外部リンクを入れてたのに、リンク先のURLが変わったりページが削除されたりもある為、定期的に確認したいですね。 今回はサイト内のリンク切れを一括でチェックできるツールをご紹介します。
長くWEBサイトを運用してページ数が増えたり、昔に作成したページなどは気を付けないといつの間にかリンクが切れてたりなんてことがあります。 外部リンクを入れてたのに、リンク先のURLが変わったりページが削除されたりもある為、定期的に確認したいですね。 今回はサイト内のリンク切れを一括でチェックできるツールをご紹介します。
リンク切れをチェックするサイト
最近は副業OKの会社が増えています。 政府も副業とかリスキリング（学びなおし）を推進しており、今後ますます副業、副収入を必用とする方が増えるでしょう。なので、今回は誰でも出来て確実に副収入の獲得方法を調査してみました。 ここで、紹介している方法はうまくやれば無料でできますので、是非お試しください。
最近は副業OKの会社が増えています。 政府も副業とかリスキリング（学びなおし）を推進しており、今後ますます副業、副収入を必用とする方が増えるでしょう。なので、今回は誰でも出来て確実に副収入の獲得方法を調査してみました。 ここで、紹介している方法はうまくやれば無料でできますので、是非お試しください。
【2023年】Web制作会社20社のクラス名調べてみたら..
皆さんはクラス名を考えるときはどうしてますか？ ある程度自分がいつもやってるパターンというのはありますが、ふと思いました。 みんなどんなクラス名にしてるのかなあ と。 ということでWeb制作会社20社のクラス名をチェックしてみましょう。
【2023年】Web制作会社20社のクラス名調べてみたら..
皆さんはクラス名を考えるときはどうしてますか？ ある程度自分がいつもやってるパターンというのはありますが、ふと思いました。 みんなどんなクラス名にしてるのかなあ と。 ということでWeb制作会社20社のクラス名をチェックしてみましょう。
【Coverag】機能「Chrome」の検証ツールの一機能です。 Coverag（カバレッジ）は日本語で、報道、取材（範囲）、対象、範囲 などの意味になります。 要は、現在表示しているページにおいて、どれだけのCSSを使用しているか（網羅率）という感じです。 実際に見た方が早いので、早速やっていきましょう。
【Coverag】機能「Chrome」の検証ツールの一機能です。 Coverag（カバレッジ）は日本語で、報道、取材（範囲）、対象、範囲 などの意味になります。 要は、現在表示しているページにおいて、どれだけのCSSを使用しているか（網羅率）という感じです。 実際に見た方が早いので、早速やっていきましょう。
【2023年】Web制作会社20社のボタンの作り方を調べてみた
皆さんはボタンをどのように作成していますか？ 私は幅を「min-width」で指定して、高さを「padding」で出すことが多いです。 文字数が多くなったり折り返しになったとしてもデザインが崩れないからです。 ただ、現在の主流はどんな作りが多いのか気になったので、制作会社20社のボタンの作成方法を調べてみました。
【2023年】Web制作会社20社のボタンの作り方を調べてみた
皆さんはボタンをどのように作成していますか？ 私は幅を「min-width」で指定して、高さを「padding」で出すことが多いです。 文字数が多くなったり折り返しになったとしてもデザインが崩れないからです。 ただ、現在の主流はどんな作りが多いのか気になったので、制作会社20社のボタンの作成方法を調べてみました。
半角スペースは、HTMLでテキストや要素の間にスペースを入れるための重要な要素です。 しかし、半角スペースを正しく入れる方法を知らないと、意図しない表示の問題が発生する可能性があります。 この記事では、HTMLで半角スペースを入れる方法や注意点について解説致します。
半角スペースは、HTMLでテキストや要素の間にスペースを入れるための重要な要素です。 しかし、半角スペースを正しく入れる方法を知らないと、意図しない表示の問題が発生する可能性があります。 この記事では、HTMLで半角スペースを入れる方法や注意点について解説致します。
ウェブデザインにおいて、要素の偶数番目と奇数番目に異なるスタイルを適用することは、ページの見た目を活発にし、情報の整理を助ける方法の一つです。 この記事では、HTMLとCSSを使用して要素の偶数番目と奇数番目にスタイルを当てる方法について解説します。
ウェブデザインにおいて、要素の偶数番目と奇数番目に異なるスタイルを適用することは、ページの見た目を活発にし、情報の整理を助ける方法の一つです。 この記事では、HTMLとCSSを使用して要素の偶数番目と奇数番目にスタイルを当てる方法について解説します。
【2023年】Web制作会社20社のブレイクポイント調べてみたら…
皆さんはブレイクポイントをどの値に設定していますか？ 会社によって指定はあるとは思いますが、現在はどこに設定するのが主流なのか、Web制作会社の制作実績から調べてみました。 今後デバイスが進化して、ブレイクポイントの流行が変わるかもしれませんが、トレンドを理解してコーディングに活かしましょう。
【2023年】Web制作会社20社のフォントサイズ調べてみた
スマホ表示時は、vwで指定するか、remで指定か、はたまたcalcで計算するか、結局どれがいいんだろう？ と思ったことありませんか？ ということで今回は、制作会社20社のスマホ時のフォントサイズ指定を調べてみました。 これでだいたいのトレンドをつかんで、コーディングに活かしましょう。
ブログを始めたいけど、どのサーバーを選べばいいか分からないよ！ それならエックスサーバーをおススメするよ！この
ブログを始めたいけど、どのサーバーを選べばいいか分からないよ！ それならエックスサーバーをおススメするよ！この
【超初心者向け】ワード プレスのログインurlを変更する方法
ワードプレスのログインURLはデフォルトでは「/wp-admin」となりますが、セキュリティを向上させるために変更することができます。 プラグインを使用した方法や.htaccessファイルの編集など、いくつかの方法があります。 今回はプラグインを使用して簡単にログインURLを変更する方法を紹介いたします。
【超初心者向け】ワード プレスのログインurlを変更する方法
ワードプレスのログインURLはデフォルトでは「/wp-admin」となりますが、セキュリティを向上させるために変更することができます。 プラグインを使用した方法や.htaccessファイルの編集など、いくつかの方法があります。 今回はプラグインを使用して簡単にログインURLを変更する方法を紹介いたします。
「ブログリーダー」を活用して、国生祐樹さんをフォローしませんか？
HTMLやCSSを学び始めたばかりの人にとって、「float」というプロパティはどこか古くさく、難しそうに感じられるかもしれません。 でも実は、floatは今でも“画像の回り込み”などで役立つ現役のレ
プログラミングを学んでいると、「モジュール」や「ライブラリ」という言葉を頻繁に耳にしませんか？似たような意味で使われることが多いですが、実はしっかりとした違いがあります。この記事では、日常生活に例えな
プログラミングを学んでいると、「モジュール」や「ライブラリ」という言葉を頻繁に耳にしませんか？似たような意味で使われることが多いですが、実はしっかりとした違いがあります。この記事では、日常生活に例えな
最近はgridを使用する方も増えてきましたが、やっぱり便利なflexプロパティ。そんなflexを横並びにした時に高さが揃わないことってありませんか？そんな時に確認するべき場所を記載致します。 高さを揃
HTMLを勉強していると、ページの中を「まとまりごとに区切りたい」と思うことがありますよね？そんなときに使うのが<section>タグです。 この記事では、sectionタグの基本・使い方
HTMLを勉強していると、ページの中を「まとまりごとに区切りたい」と思うことがありますよね？そんなときに使うのが<section>タグです。 この記事では、sectionタグの基本・使い方
CSSで z-index を設定したのに「なぜか要素が前面に来ない」「意図した順番にならない」と悩んだことはありませんか？この問題は z-indexの仕組み を正しく理解すれば、すぐに解決できます！
たとえば、こういうタイトルがあったとして、今は幅もちょうど良いので奇麗にみえます。 しかし、画面幅が狭くなると、折り返しが発生し、「う」だけ次行に改行され、見た目が物凄く気持ち悪いですよね どうせ改行
htmlでコンテンツを横に並べるときは、もはや「inline-blockやfloat」などよりも圧倒的にflexを使用することが多くなりましたよね。 今回はそんなflexを横に並べるときに便利なgap
ウェブサイトに「ページトップへ戻るボタン」を設置する際、フッターと重ならずに、手前でピタッと止まる ようにしたいことがありますよね。今回は JavaScriptを使わずに、CSSの position:
JavaScript で キーと値のペアを管理する方法 として、Object と Map があります。 Object は昔から使われている方法ですが、 Map はより柔軟でパフォーマンスが良いデータ管
Webページに横スクロールが必要なコンテンツがある場合、「スクロールできますよ！」 というヒントをユーザーに表示することで、直感的に操作しやすくなる 、スクロールできるのに気づかない、ということがなく
Webサイトにイベントカレンダーを導入したいと考えている方におすすめなのが、JavaScriptライブラリ 「FullCalendar」 です。本記事では、FullCalendarの基本的な使い方をわ
レンタルサーバー国内シェアNo1のエックスサーバーが開発したワードプレステーマXWRITE。今回は、XWRITEを使用してブログを運営した感想と使い勝手などをまとめたいと思います。 XWRITE はじ
JavaScriptには配列を操作するための便利なメソッドが多数用意されていますが、その中でも頻繁に使用されるのがmap()メソッドです。このメソッドを使えば、配列の各要素に対して何らかの処理を施し、
JavaScriptには配列を操作するための便利なメソッドが多数用意されていますが、その中でも頻繁に使用されるのがmap()メソッドです。このメソッドを使えば、配列の各要素に対して何らかの処理を施し、
Webページに画像を表示させることは、視覚的に魅力的なコンテンツを作成する上で非常に重要です。しかし、画像が表示されないトラブルはよくあります。本記事では、画像が表示されない原因を徹底的に解説し、それ
Webページに画像を表示させることは、視覚的に魅力的なコンテンツを作成する上で非常に重要です。しかし、画像が表示されないトラブルはよくあります。本記事では、画像が表示されない原因を徹底的に解説し、それ
今回はtableタグのタイトル部分（ヘッダー）を固定する方法を解説致します。今回使用したサンプルのソースは最後にまとめて記載しておりますので、そちらもご確認ください。 tableのヘッダー（タイトル）
JavaScriptでは、nullは特別な値であり、オブジェクトが「意図的に空」であることを表すために使用されます。しかし、nullの判定や、それが空文字やundefinedと混同されることも少なくあ
ウェブ開発において、コメントアウトはコードの可読性やメンテナンス性を高めるための重要な技術です。HTMLだけでなく、PHPでもコメントアウトは頻繁に使用されます。本記事では、HTMLおよびPHPでのコ
Webページを作成する際、テキストの改行は非常に重要です。<br>タグを使うことが一般的ですが、他にもさまざまな方法があります。この記事では、<br>タグ以外のHTMLでの改行
クイックレスキュー 【よこやま良平】が立ち上げた即日対応サービス「クイックレスキュー」は、低価格で迅速なサービスを提供します。調査料やキャンセル料は一切かからず、修復・復旧作業は最短30分で完了します
スクロールバーがあると画面ががたつく スクロールバーは役立ちますが、デザインやユーザー体験に悪影響を与えることがあります。例えば、スクロールバーがあることで画面ががたつくように見えることがあります。こ
ウェブサイトやアプリケーションでユーザーから情報を収集する際、長いフォームはユーザーを圧倒させ、入力を途中で放棄させてしまう可能性があります。 そんなときに役立つのが「ウィザード形式」のフォームです。
この記事では、setTimeoutを用いて非同期処理で起こり得る順序の問題を模擬し、どのようにしてこれを理解し管理するかを解説します。非同期処理をどのようにコントロールするか、具体的な手法としてコール
pointer-events: none とは何か？ pointer-events プロパティは、要素がポインティングデバイス（マウス、タッチスクリーンなど）のイベントにどのように反応するかを制御しま
JavaScriptでの文字列操作は、データ処理やUI開発において欠かせないスキルです。この記事では、基本的な文字列の切り出し方法から、少し変わったテクニックや便利な小ネタまで幅広くカバーします。具体
ウェブサイトやアプリケーションにおいて、コンテンツを整理し、ユーザーにフレンドリーなナビゲーションを提供するための一般的な方法として、タブ切り替え機能がよく利用されます。この記事では、JavaScri
ウェブサイトやアプリケーションにおいて、コンテンツを整理し、ユーザーにフレンドリーなナビゲーションを提供するための一般的な方法として、タブ切り替え機能がよく利用されます。この記事では、JavaScri
ウェブサイトのナビゲーションにおいて、ページ内リンクはユーザビリティの向上に不可欠です。しかし、これらのリンクがうまく機能しないことがあり、サイト訪問者にとっては大きな不便をもたらします。本記事では、
ウェブサイトやブログで、コンテンツをより魅力的に見せる方法の一つに、クリックによる画像や動画の拡大表示があります。この記事では、HTML、CSS、およびJavaScriptを使用して、画像と動画の両方
textareaの初期値の設定 通常テキストボックスに初期値を設定する場合は、value属性を使用すれば簡単に初期値が設定できます。 <input type="text" v
多言語サイトとは、複数の言語でコンテンツを提供するウェブサイトのことを指します。グローバルに展開する企業や、多言語を話すユーザーを対象としたサービス、観光や国際交流を促進する公的機関などが主に利用して
hoverクラスのスタイルはスマホに反映されない スマホなどのタッチデバイスでhoverスタイルがうまく反映されない主な理由は、タッチデバイスには「マウスオーバー」の概念がないためです。chromeな
サンプルとソース See the Pen Untitled by kokusyo (@kokusyo) on CodePen. ポイントはただ2つです。 aタグのhref属性にページ先頭のidを指定す
「Tech Sapuri（テックサプリ）」は、オンラインプログラミング学習サービスで、ブラウザ上で実践的な学習ができる特徴を持っています。煩雑な環境構築は不要で、初心者でも手軽にアクセスできるため、学
カード型レイアウトのテキスト位置が揃わない 今回テキスト位置を揃えたいのは以下のような、よくあるカード型レイアウトです。赤線で分かりやすく示しましたが、タイトルの文字数が異なるため、その下のテキストの
Vue.jsをCDNで読み込む Vue.jsを使用する時は、プロジェクトを作成～と思ったかもしれませんが、Vu.jsはCDNで読み込むことができます。CDNは以下の通りです。 <script s
静的なHTMLにページネーションを実装 ページネーションは、項目の数が多い時などに便利です。下記のように、ただズラズラと並んでいても、ページネーションを実装すればすっきりするし、視認性も良いです。しか
