2025年1月– date –

ウェブサイトでよく見かける 3本線のアイコン=　ハンバーガーメニュー。スマホサイトやタブレットなど、画面が小さいデバイスで使われます。ここでは、HTML/CSS/JavaScriptを使って段階的にハンバーガーメニューを作成し、サイトに設置できるように練習してみましょう ハンバーガーメニューとは？ ハンバーガーメニューは、画面上に収まりき...

Webサイトに動きをつけるための技術の一つとして、スクロールイベントがあります。JavaScriptを使って、スクロールに応じた表示・非表示。getBoundingClientRect()関数を使っての画像の表示。IntersectionObserverを使ったスクロールの監視などを行います！ スクロールイベントで表示・非表示を切り替える JavaScriptを使ったスクロールイベ...

Webサイトを作っていると、ブラウザ間でスタイルの見た目がずれることがあります。このずれを解決するために用いられるのが「リセットCSS」です。今回は、リセットCSSの解説やタイプ別の特徴、おすすめの使い方。さらに最新を取り入れた「2024年モダンリセットCSS」をご紹介します。 リセットCSSとは？ リセットCSSは、各ブラウザがデフォル...

JavaScriptを使った動きのあるWebサイトは、より魅力的で印象に残るものです。ここでは、初心者の方を対象に、Web制作で役立つ『スライドショー』をゼロから自作してみます。 最初はシンプルな構造から始め、フェードするスライドショーから、横に移動するスライドショーへの変更などをJavaScriptのみで行います。記事が長くなったので、この...

CSSを使ったWebデザインでは、初心者から中級者まで陥りやすい多くの記述ミスがあります。これらのミスは、デザインの崩れやメンテナンスの難化を引き起こすことがあり、無意識のうちに時間と労力を浪費する原因にもなります。そんな"ありがちな30のCSSミス"を具体的なコード例と改善策を解説します。基礎を固めたい方や効率的なスタイリング...

Webページでよく使われるクリックイベント（クリックをしたら）を活用して、Javascript 基本的な動きを学びましょう。ここでは以下の4つを作成します ボタンをクリックしたらメッセージを表示しよう クリックでボタンのテキストやスタイルを変更しよう ボタンをクリックして新しい要素を追加しよう ボタンをクリックするたびに背景色を変更し...

ロゴデザインは、企業やブランドのアイデンティティを視覚的に表現する重要な要素です。Webデザインの仕事でも依頼される場面があります。ロゴデザインは、クライアント自信を表す形なので、ともすれば情報が多くなり、ロゴの中にたくさん要素が入り、反対にわかりにくいものになりがちです。ロゴは、一瞬でわかる印象が必要なので、シンプル...

JavaScriptとは？まずはJavaScriptを知ろう JavaScriptの基本 JavaScriptは、Webページに「動き」や「反応」を加えるためのプログラミング言語です。例えば、ボタンを押したときに画面が変わる動きや、データを入力したときのチェックなどに使われます。 なぜ使うの？ Webページをただ「見る」だけでなく、ユーザーが操作できるようにするた...