JavaScript講座– category –
-
【初心者OK】JavaScriptでAPIを使ってみよう｜写真が自動で変わるスライドショー
はじめに｜APIって難しそう…？大丈夫、JavaScriptで、すぐに使えます 今回は、JavaScriptで、よく聞くAPIを使ってみましょう。 「APIってなんだか専門的な人が使うものでは？」「サーバーとかバックエンドの世界の話じゃないの？」 …と思ってしまいがちですが、実はそんなことはありません。HTML と JavaScript だけでも API を使ってデータ... -
JavaScript02 応用編｜配列なし → ボタン操作 → 自動スライド → 無限ループ → レスポンシブ対応まで学べる自作スライドショー
JavaScriptでスライドショーを作る方法を学んだ前回（入門編）では、配列で画像を管理し、一定時間ごとに切り替える基本的な動きを実装しました。 今回の「応用編」では、その仕組みをさらに発展させ、実際のWebサイトで使えるレベルのスライドショーを、段階的に作り上げていきます。ただの画像切り替えではなく、以下のような機能を「ゼロ... -
初心者でも簡単！JSON構造化データジェネレーターとリッチリザルトテストの使い方
「構造化データ」とは、検索エンジンがウェブサイトの内容をより正確に理解できるように、情報を整理してマークアップする仕組みです。特に検索結果の見た目を向上させるリッチリザルト（リッチスニペット）を狙う際には、構造化データの正しい実装が非常に重要になります。この記事では、初心者でも扱いやすいJSON形式の構造化データを生成... -
CSSの便利な関数まとめ！デザインやレイアウトを自在に操る
CSSには、デザインやレイアウトを柔軟に調整できる 「関数」 が数多く用意されています。calc() を使えば 異なる単位を組み合わせた計算 が可能になり、clamp() を使えば フォントサイズをレスポンシブに調整 できます。また、conic-gradient() で 円グラデーション を作成したり、rotate() で 要素を回転 させるなど、アニメーションやビジ... -
JavaScript入門: クリックイベントで学ぶハンバーガーメニューの作り方
ウェブサイトでよく見かける 3本線のアイコン= ハンバーガーメニュー。スマホサイトやタブレットなど、画面が小さいデバイスで使われます。ここでは、HTML/CSS/JavaScriptを使って段階的にハンバーガーメニューを作成し、サイトに設置できるように練習してみましょう ハンバーガーメニューとは？ ハンバーガーメニューは、画面上に収まりき... -
JavaScript03: スクロールイベントでWebを動かそう
Webサイトに動きをつけるための技術の一つとして、スクロールイベントがあります。JavaScriptを使って、スクロールに応じた表示・非表示。getBoundingClientRect()関数を使っての画像の表示。IntersectionObserverを使ったスクロールの監視などを行います！ スクロールイベントで表示・非表示を切り替える JavaScriptを使ったスクロールイベ... -
リセットCSSってなんですか？必要なの？モダンリセット最新版！
Webサイトを作っていると、ブラウザ間でスタイルの見た目がずれることがあります。このずれを解決するために用いられるのが「リセットCSS」です。今回は、リセットCSSの解説やタイプ別の特徴、おすすめの使い方。さらに最新を取り入れた「2024年モダンリセットCSS」をご紹介します。 リセットCSSとは？ リセットCSSは、各ブラウザがデフォル... -
JavaScript02 自作スライドショーで動きの基礎を段階的に学ぶ(入門編）
JavaScriptを使った動きのあるWebサイトは、より魅力的で印象に残るものです。ここでは、初心者の方を対象に、Web制作で役立つ『スライドショー』をゼロから自作してみます。 最初はシンプルな構造から始め、フェードするスライドショーから、横に移動するスライドショーへの変更などをJavaScriptのみで行います。記事が長くなったので、この... -
JavaScript01 : クリックで実現する基本的な動き
Webページでよく使われるクリックイベント（クリックをしたら）を活用して、Javascript 基本的な動きを学びましょう。ここでは以下の4つを作成します ボタンをクリックしたらメッセージを表示しよう クリックでボタンのテキストやスタイルを変更しよう ボタンをクリックして新しい要素を追加しよう ボタンをクリックするたびに背景色を変更し... -
JavaScript超入門: ゼロからはじめるWebプログラミング
JavaScriptとは？まずはJavaScriptを知ろう JavaScriptの基本 JavaScriptは、Webページに「動き」や「反応」を加えるためのプログラミング言語です。例えば、ボタンを押したときに画面が変わる動きや、データを入力したときのチェックなどに使われます。 なぜ使うの？ Webページをただ「見る」だけでなく、ユーザーが操作できるようにするた... -
もう迷わないHTML/CSSのクラス名の付け方完全ガイド！
Web制作において、HTML/CSSのクラス名をどう付けるべきか悩む方は少なくありません。HTML/CSSが初めての方にとっては、クラス名をどう付けるかが難しく感じられることが多いです。そこで、基本的なルールを解説し、具体例とサンプルコードを紹介しています。 クラス名が重要な理由 HTML/CSSのクラス名は、Webサイトやアプリケーションの構造... -
使い方を知っておくと便利なフレームワークBootstrap。基礎知識と使い方
WEBサイトの作成には、HTML・CSS・JavaScript・PHPなど、さまざまな言語を組み合わせる必要があります。特に、スマートフォン対応のレスポンシブWebデザインを実装する際は、CSSの量が増え、メディアクエリの追加が多くなりがちです。その結果、コードが複雑になり、管理が難しくなることも。そんなときに役立つのが、BootstrapのようなCSSフ...
1