フロントエンド | アリッシアの朝

【html,JS】指定した日までのカウントダウンタイマー

アリッシア — Fri, 23 Aug 2024 02:34:25 +0000

本記事を読むと以下の実行ができます

ウェブページに指定した日にちまでのカウントダウンを表示する。

イベントやセールの告知、期間限定のキャンペーンなどで、ユーザーの興味を引きつけたいとき、カウントダウンタイマーが有効です。

ECサイトや特別なプロモーションページを運営している方にとって、カウントダウンタイマーは、期限付きの魅力を伝える強力なツールです。

この記事では、JavaScriptを使って指定した日までのカウントダウンタイマーを簡単に作成する方法を紹介します。

実装も手軽で、デザインに柔軟に対応できるこの技術を活用すれば、訪問者の期待感を一層高めることができるでしょう。

本記事は次の人におすすめ

ECサイトやウェブショップを運営していて、セールやキャンペーンの告知を強化したい人
イベントページや特設サイトで、カウントダウンタイマーを使って緊迫感を演出したいデザイナー
JavaScriptのスキルを伸ばしたい、初学者や中級者
期間限定の特典やコンテンツを提供している企業のWeb担当者
自分のサイトをもっとインタラクティブにしたいウェブ開発者

Udemyで学習する

Udemy 公式サイト

ウェブ版カウントダウンタイマーはいつ使う？

カウントダウンタイマーは、ユーザーの視線を引きつけ、緊迫感を演出するために非常に有効です。

特に期間限定のセールや、イベントの告知、製品の発売日までの時間を表示する場面で使われます。
タイマーが刻む秒数が減っていくのを見て、訪問者は時間の経過を意識し、早めのアクションを取るよう促す効果があります。

カウントダウンタイマーを使う場面とメリット

プロモーションセール: セール終了までの時間を視覚的に示すことで、顧客の購買意欲を刺激します。
イベント告知: イベント開始までの時間をカウントダウンし、参加者の期待感を高めます。
製品発売: 新製品やサービスのリリースまでの時間をカウントダウンし、話題性を作ります。
キャンペーンの締め切り: 応募や登録の締め切りまでの時間を表示し、行動を促します。
限定コンテンツの公開: 期間限定のビデオや記事が公開されるまでの時間を表示し、ユーザーの関心を引きます。

JavaScriptでカウントダウンタイマー

JavaScriptは、時間を扱うための関数やオブジェクトを提供しています。

一般的な時間関数

Date()：現在・特定の日付と時刻を取得
getTime()：時間差の計算
Math.floor()：数字を計算する
setInterval()：繰り返し処理・タイマー機能・動的な更新
clearInterval()：インターバルの停止・タイマー解除

これら関数は時間を計算し、ページに動的な要素を追加できて、カウントダウンタイマーを簡単に実装できます。

特定の時間までのカウントダウンタイマーを作成

ここからは、特定の日時までのカウントダウンタイマーを作成します。
時間を取得して、動的に動かします。

さらに、時間は点滅をさせて指定した時間を過ぎると、文字の色を変えます。

HTML

HTMLはカウントダウンタイマーの基本構造を作成します。

タイマーの要素を配置し、それぞれの時間単位を表示するためのタグを設定します。

解説

「.countdown」：カウントダウンタイマー全体を囲むコンテナ。カウントダウンタイマーのデザインや配置を制御するために使用されます。

「.material」：カウントダウンタイマーの主要なコンテンツを包む要素。タイマーの左側と右側のコンテンツをまとめて配置します。

「.left」：左側のコンテンツを含む要素。リンクされた画像とメッセージを表示します。

「.right」：右側のコンテンツを含む要素。カウントダウンタイマーや関連するメッセージを表示します。

「.notice」：カウントダウンの通知メッセージを表示するための要素。

「.Lmessage」：左側に表示される割引に関するメッセージのスタイリングを行うためのクラス。

「.Rmessage」：右側に表示される「終了まで」のメッセージのスタイリングを行うためのクラス。

「.time-container」：時間、分、秒の各タイム要素をまとめて配置するためのコンテナ。

「.time-element」：個別のタイム要素（時間、分、秒）を囲む要素。各時間単位の値とそのラベルを含みます。

「.time」：実際の時間値（時間、分、秒）を表示するための要素。

「.timelog」：時間の単位（「時間」「分」「秒」）を示すラベルを表示するための要素。

「.colon」：時間の間に表示されるコロン（「：」）をスタイルするためのクラス。

「hour」：残りの「時間」を表示するために使用されるHTMLの要素ID。動的に時間が更新されます。

「min」：残りの「分」を表示するために使用されるHTMLの要素ID。動的に分が更新されます。

「sec」：残りの「秒」を表示するために使用されるHTMLの要素ID。動的に秒が更新されます。

CSS

このスタイルシートは、カウントダウンタイマーを視覚的に目立たせ、ユーザーの注意を引くためのデザインが施されています。

各要素がフレックスボックスを使ってレイアウトされ、中央に配置されることで、見やすく整ったUIが実現されています。

.countdown{
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight:bold;
    margin: 0;
    background-color: #f0f0f0;
}

.material{
display:flex;
}

.material p{
    font-size: 1.5em;
}

.left{
flex: auto;
display: inline-block;  
vertical-align: bottom;
flex-flow: column;
text-align: center;
margin: 5px;
}

.image{
    width: 130px;
    height: auto;
}

.rate{
    font-size: 3rem;
}

.right{
flex: auto;
flex-flow: column;
text-align: center;
display: inline-block;  
vertical-align: bottom;
margin: 5px;
}

.notice{
    flex: auto;
    display: flex;
    flex-flow: column;
    text-align: center;
    justify-content: flex-end;
    align-items: center;
    font-size: 1.5em;
}

.Lmessage{
    text-align: center;
    margin: 0;
}

.Rmessage{
    text-align: center;
    margin: 0;
}

.time-container {
    display: flex;
    align-items: center;
}

.time-element {
    display:flex;
    flex-flow: column;
    text-align: center;
}


.colon {
    font-size: 1em; /* 必要に応じてサイズ調整 */
    line-height: 1; /* 必要に応じて調整 */
    margin-bottom: 65px;
}


.time {
    width: 100px;
    height: 100px;
    margin: .2rem;
    background-color: #A435F0;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.time p{
    margin: 0;
    font-size: 2em;
    text-align: center;
}


.timelog p{
margin: 0;
}

#hour,#min,#sec {
    font-size: 3rem;
    animation: fade 2s infinite;
}

@keyframes fade {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

解説

「.countdown」：全体を囲むコンテナのデザインです。フレックスボックスを使用してコンテンツを中央揃えにし、背景色が薄いグレー（#f0f0f0）に設定されています。テキストは太字で表示されます。

「.material」：内部コンテンツを横に並べるためにフレックスボックスが使用されています。子要素である左側と右側のコンテンツが横並びに表示されます。

「.material p」：material内のpタグに対して適用されるスタイルです。フォントサイズが1.5emで、標準の文字よりも少し大きめに表示されます。

「.left」：左側のコンテンツのスタイリングです。自動でサイズ調整され、縦方向に整列されます。中央揃えで表示され、上下に5pxの余白が設定されています。

「.image」：画像のサイズが幅130px、高さは自動で調整されます。アスペクト比を維持しながら表示されます。

「.rate」：割引率を表示する部分のデザインです。フォントサイズが3remと非常に大きく設定され、強調されて表示されます。

「.right」：右側のコンテンツのスタイリングです。leftクラスと同様に、中央揃えで配置され、上下に5pxの余白があります。

「.notice」：通知メッセージのデザインです。中央揃えで表示され、要素が縦に配置されます。フォントサイズは1.5emで、テキストがやや大きめに表示されます。

「.Lmessage」：左側のメッセージのスタイリングです。中央揃えで配置され、余白はありません。

「.Rmessage」：右側のメッセージのスタイリングです。Lmessageと同様に、中央揃えで余白はありません。

「.time-container」：タイマー全体を包むコンテナのデザインです。フレックスボックスを使用し、タイム要素を中央揃えに配置します。

「.time-element」：個々のタイム要素（時間、分、秒）のデザインです。縦方向に整列し、中央揃えで表示されます。

「.colon」：タイム要素間のコロン（「：」）のデザインです。フォントサイズが1emで、垂直位置が調整され、マージンボトムが65pxで指定されています。

「.time」：各タイム要素の背景と配置に関するデザインです。100px×100pxのボックスに背景色が紫色（#A435F0）で設定され、角が丸く（border-radius: 1rem）なっており、中央に時間が表示されます。

「.time p」：タイム要素内のテキスト（時間値）のスタイリングです。フォントサイズが2emで、ボックス内で中央揃えされます。

「.timelog p」：タイムラベル（時間、分、秒）のスタイリングです。余白はなく、テキストがシンプルに表示されます。

「#hour,#min,#sec」：時間、分、秒を表示するテキストのスタイリングです。フォントサイズが3remで非常に大きく、2秒ごとにフェードイン・フェードアウトするアニメーションが適用されています。

「@keyframes fade」：#hour, #min, #sec要素に適用されるフェードアニメーションの定義です。0%から100%までの間で透明度が変化し、視覚的に点滅する効果が得られます。

UdemyでWebデザインを学習

Udemyは、オンデマンド式の学習講座です。
趣味から実務まで使えるおすすめの講座を紹介します。

ちゃんと学ぶ、WordPress テーマ開発講座
WordPressの自作テーマを作成してWordPressの仕組み理解。
WordPressで高度なカスタマイズをしたい人におすすめ。

【世界で70万人が受講】Web Developer Bootcamp 2023（日本語版）
フロントエンド言語でフレームワークの扱い方、セキュリティーを学習。
Web開発を学びたい初心者から経験者までにおすすめ。

【PHP, MYSQL, Apache】ガチで学びたい人のためのWEB開発の基礎(バックエンド編)
Webシステムの仕組みと挙動、システム構築などを学習。
サーバーに関わる知識を付けたい人におすすめ。

【2023年最新】【JavaScript＆CSS】ガチで学びたい人のためのWEB開発実践入門（フロントエンド編）
基礎レベルから実務レベルまで網羅していて、JSとCSSに焦点を当てた講座。
Webデザインをしたい人におすすめ。

JavaScript

JavaScriptでは、現在の時間と指定した時間との差を計算し、タイマーを動的に更新します。
指定した時間が過ぎると、タイマーを停止させることも可能です。

const hour = document.getElementById("hour");
const min = document.getElementById("min");
const sec = document.getElementById("sec");

function countdown() {
  const now = new Date(); // 現在時刻を取得
  const month = 12; // 月を取得
  const day = 31; // 日を取得
  const targetHour = 15; // 時間を指定。午後の場合は+12
  const bargain = new Date(2024, month - 1, day, targetHour);
  const diff = bargain.getTime() - now.getTime();

  // 残り時間が1時間以内になったら、文字色を黄色にする
  if (diff <= 3600000) {
    hour.style.color = 'yellow';
    min.style.color = 'yellow';
    sec.style.color = 'yellow';
  }

  // 残り時間が0以下になったら、カウントアップを止める
  if (diff <= 0) {
    hour.innerHTML = '00';
    min.innerHTML = '00';
    sec.innerHTML = '00';
    clearInterval(countdownInterval); // インターバルをクリア
    return;
  }

  const calcHour = Math.floor(diff / 1000 / 60 / 60);
  const calcMin = Math.floor(diff / 1000 / 60) % 60;
  const calcSec = Math.floor(diff / 1000) % 60;

  hour.innerHTML = calcHour < 10 ? '0' + calcHour : calcHour;
  min.innerHTML = calcMin < 10 ? '0' + calcMin : calcMin;
  sec.innerHTML = calcSec < 10 ? '0' + calcSec : calcSec;
}

// インターバルをグローバル変数に格納
let countdownInterval;

// 初期化とインターバルの設定
function startCountdown() {
  countdown();
  countdownInterval = setInterval(countdown, 1000);
}

startCountdown();

解説

「countdown」

指定された日時（2024年12月31日15:00）までの残り時間を計算し、その結果をページに表示します。

現在時刻と目標時刻を比較して、残り時間をミリ秒単位で計算します。
残り時間が1時間以内になった場合、タイマーの色が黄色に変わります。

もし残り時間が0以下になったら、タイマーを「00:00:00」と表示し、カウントダウンを停止します。

「startCountdown」

この関数はカウントダウンの初期化と定期的な更新を行います。

最初にcountdown関数を実行して初期状態を表示し、1秒ごとにcountdown関数を呼び出すようにタイマーを設定します。

毎秒タイマーが更新され、リアルタイムで残り時間が表示されます。

まとめ

JavaScriptを使ったカウントダウンタイマーは、シンプルながらも非常に効果的なウェブデザイン要素です。

特定のイベントやセールを目立たせるために、ぜひ活用してみてください。
それだけではなく、Webページにユーザーが指定して3分や10秒のカウントダウンタイマーへ応用させることもできます。

タイマーを使用することで、ユーザーに「時間の重要性」を伝えることができ、行動を促進させる力強いツールとなります。

Udemyで学習する

Udemy 公式サイト

【コピペOK】WordPressでこの記事を書いた人をデザインする

アリッシア — Fri, 10 May 2024 03:08:08 +0000

「この記事を書いた人」の項目は、ウェブページの管理人情報を簡潔に示すことに長けています。
ユーザーがお問い合わせフォームやTwitter(X)、Instagram、Noteなど登録しているSNSへアクセスしやすくなります。

さらに、素性を示すとGoogleから信頼性の高いサイトとして評価されて、
掲載順位が上位に表示される期待が高まります。

しかし、WordPressでブログを運営している方は、サイドバーの運営者情報が本文に挿入され見映えが悪いことがあります。

本記事では、HTMLとCSSを使って、自作で「この記事を書いた人」を作成していきます。

本記事は次の人におすすめ

WordPressでこの記事を書いた人を掲載したい
HTMLとCSSが使えるようになりたい

Udemyで学習する

Udemy 公式サイト

デザイン

「この記事を書いた人」をFigmaを使って作成しました。
Figmaは、主にWebデザインに使用されますが、ゲームUI作成にも使える優れたサービスです。

構成は示した通りに、枠線内に右と左を分けて、それぞれ3:7とします。
右には、吹き出し項目、自分の名前とアイコンを中央に縦に並べます。
左には、簡潔に自分の経歴を示して、自分が登録しているSNSの画像と名称を載せます。

SNSのロゴ画像は、公式が配布しているものを使用してください。
誰かが二次配布している画像は使用しないようにしてください。

また、画像を加工してはいけない、比率を変えてはいけない、色を変えてはいけないなど。
それぞれのロゴで禁止事項が異なるので、必ず利用規約は確認してください。

公式ロゴ配布

X(Twitter)
Instagram
Youtube
Note
LINE

HTML


  
    
      
        この記事を書いた人
      
      
      アリッシア
    
    
      
        アリッシアの朝
          
"改行"
          
詳しいプロフィールはこちら
        
      
      
        
          
          contact
        
        
          
          Twitter
        
        
          
          Instagram
        
        
          
          Note

解説

.profile-section：プロフィールセクション全体を定義します。
.profile-container：プロフィール情報を包含するコンテナです。

プロフィール左側

.profile-left：プロフィール画像や名前などの左側のコンテナを定義します。
.balloon：”この記事を書いた人”というテキストを含む吹き出しを表します。
.profile-image：プロフィール画像を定義します。
.profile-name：プロフィールの名前を定義します。

プロフィール右側

.profile-right：プロフィール情報の右側のコンテナを定義します。
.information：追加のプロフィール情報を保持するコンテナです。
.profile-sns-buttons：SNSのボタン全体を包含するコンテナです。
.profile-sns-button：各SNSのボタンを包含するコンテナです。
.contact-icon：連絡先ページへのリンクのアイコンを定義します。
.twitter-icon：Twitterプロフィールへのリンクのアイコンを定義します。
.instagram-icon：Instagramへのリンクアイコンを定義します。
.note-icon：Noteプロフィールへのリンクのアイコンを定義します。

CSS

.profile-section {
    max-width: 1000px;
    margin: auto;
    border: solid 2px #333;
    padding: 10px;
}

.profile-container {
    display: flex;
    justify-content: space-between;
}

.profile-left {
    flex: 3;
    padding: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-right: 2px dashed black;
}

.profile-right {
    flex: 7;
    padding: 1em;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* display: flex; */
}

.information p {
    margin: auto;
}

.balloon {
    position: relative;
    display: inline-block;
    margin: 1em 0;
    padding: 10px;
    background: #75def0;
}

/* 矢印 */
.balloon:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    border: 10px solid transparent;
    border-top: 10px solid #75def0;
}

.balloon p {
    margin: auto;
    padding: auto;
}

.profile-image {
    max-width: 100%;
    height: auto;
}

.profile-name {
    color: blue;
    font-size: 20px;
    font-family: "Meiryo", sans-serif;
}

.profile-sns-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    background: gainsboro;
    margin: auto;
    padding: 5px;
}

.profile-sns-button {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.profile-sns-button a {
    height: 70px;
    text-decoration: none;
}

.profile-sns-button img {
    max-width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.profile-sns-button:hover img {
    transform: scale(1.1);
}

.profile-sns-button p {
    margin: 0;
    text-align: center;
}

@media screen and (max-width: 500px) {
    .profile-section {
        display: none;
    }
}

解説

.profile-section：プロフィールセクション全体のスタイルを指定します。
幅の最大値(max-width)、マージン、囲い、パディングを設定します。
また、@media screenによって、スクリーン幅が500px以下の場合に非表示にします。

.profile-container：プロフィール情報を保持するコンテナのスタイルを定義します。
このコンテナ内の要素をフレックスボックスとして直下の要素を並列にします。
さらに要素間のスペースを均等に配置します。

プロフィール左側

.profile-left：プロフィール情報の左側のコンテナのスタイルを指定します。
フレックスアイテムとして中央寄せにし、縦方向に要素を中央寄せに並べます。
また、左側に破線の境界線を持ちます。

.balloon：吹き出しのスタイルを指定します。
背景色、マージン、パディングを設定し、吹き出しの形状を定義します。
.balloon:before：吹き出しの矢印のスタイルを指定します。
矢印の位置や形状、色を定義します。

.profile-image：プロフィール画像のスタイルを指定します。
画像の最大幅を100%にし、高さを自動に設定します。

.profile-name：プロフィール名のスタイルを指定します。
文字色、フォントサイズ、フォント型を設定します。

プロフィール右側

.profile-right：プロフィール情報の右側のコンテナのスタイルを指定します。
フレックスアイテムとして中央寄せにし、縦方向に要素を中央寄せに並べます。

.information p：追加のプロフィール情報の段落要素のスタイルを指定します。
マージンを自動に設定します。

.profile-sns-buttons：ソーシャルメディアボタンのコンテナのスタイルを指定します。
フレックスボックスとして要素を配置し、背景色やマージン、パディングを設定します。

.profile-sns-button：各ソーシャルメディアボタンのスタイルを指定します。
フレックスアイテムとして中央寄せにし、ボタンの高さやアイコンのスタイルを設定します。
.profile-sns-button a：各ソーシャルメディアボタンのリンクのスタイルを指定します。
テキスト装飾をなくし、リンクの高さを設定します。
.profile-sns-button img：ソーシャルメディアアイコンのスタイルを指定します。
画像の最大幅を100%にし、高さを自動に設定します。ホバー時にアイコンのサイズを拡大します。
.profile-sns-button p：ソーシャルメディアボタンのテキストのスタイルを指定します。
マージンを0にし、テキストを中央寄せにします。

UdemyでWebデザインを学習

Udemyは、オンデマンド式の学習講座です。
趣味から実務まで使えるおすすめの講座を紹介します。

ちゃんと学ぶ、WordPress テーマ開発講座
WordPressの自作テーマを作成してWordPressの仕組み理解。
WordPressで高度なカスタマイズをしたい人におすすめ。

【世界で70万人が受講】Web Developer Bootcamp 2023（日本語版）
フロントエンド言語でフレームワークの扱い方、セキュリティーを学習。
Web開発を学びたい初心者から経験者までにおすすめ。

【PHP, MYSQL, Apache】ガチで学びたい人のためのWEB開発の基礎(バックエンド編)
Webシステムの仕組みと挙動、システム構築などを学習。
サーバーに関わる知識を付けたい人におすすめ。

【2023年最新】【JavaScript＆CSS】ガチで学びたい人のためのWEB開発実践入門（フロントエンド編）
基礎レベルから実務レベルまで網羅していて、JSとCSSに焦点を当てた講座。
Webデザインをしたい人におすすめ。

実装

この記事を書いた人

アリッシア

大学4年間で何か胸を張れるスキルを身に着けたくて当サイト運営を始めました。
現在、大学院に進学するか就職するか迷いながら勉強しています。
詳しいプロフィールはこちら

各投稿ページ内にカスタムHTMLとカスタムCSSがありますが、
投稿記事に添付すると、レイアウトが崩れてしまいます。

したがって、WordpressでHTMLを表示させるにはカスタムHTML、
CSSを有効にするにはテーマファイルエディターを使用します。

カスタムHTMLは、「外観>ウィジェット」から、作成できます。
投稿下に配置すると、本文最後にこの記事を書いた人を表示できます。

投稿下は、最後まで読んだユーザーにしか見られないというデメリットがありますが、
読者は、執筆者の情報ではなく内容を知りたいです。
本文中や冒頭に載せると読者視点だと目障りになので、ページ離脱率が高くなる恐れがあります。

CSSは、サイト全体で有効にするために「外観>テーマファイルエディター」のCSSファイルに添付してください。
サイトテーマがcocoonの場合は、cocoon child>stylesheet（style.css）に添付します。

テーマファイルエディターは、編集を誤るとサイトのレイアウトが崩れる恐れがあります。
消してしまった場合に備えて、編集前のCSS情報は保存しておいてください。

以上の手続きを踏むと、この記事を書いた人が作成されます。

よくある失敗

本記事と同じように作成したのに、レイアウトに違和感がある場合は次のようなミスが考えられます。

画像の背景が透明ではない

画像拡張子が.png出ない可能性がある。

画像の拡張子には、主に「jpeg」、「png」、「gif」、「webp」があります。

拡張子	特徴
jpeg	データの圧縮
png	背景透明
gif	アニメーション
webp	JPEGやPNGよりも高い圧縮効率と品質でブラウザで使用

画像形式をjpegやgifにすると、背景透明にできません。

画像に影がある

画像に各テーマで装飾があることが原因です。
Cocoonの場合は、「Cocoon 設定>画像>画像の囲み効果」をなしにします。

まとめ

「この記事を書いた人」の項目は、ウェブページの管理人情報を簡潔に示せて、ユーザーだけではなく、信頼性の高いサイトとして評価されやすいです。

また、各記事に掲載するには、「外観>ウィジェット」からカスタムHTML。
外観>テーマファイルエディター」のCSSファイルに添付してください。

Udemyで学習する

Udemy 公式サイト

【CSS/JS】矢印のボタンで横スクロールするスライドショー

アリッシア — Sat, 10 Jun 2023 13:22:47 +0000

本記事を読むと以下の実行ができます

矢印を押すと横に移動する。

主にECサイトにて、商品販売を目的しているときに、
閲覧履歴から商品を紹介する、値段や性能の比較をするウェブデザインがあります。

横スクロールするデザインは、特にレスポンシブルデザインを主とする
スマホでタッチ操作をするため非常に相性が良いです。

しかし、PCは縦スクロールがメインで、横スクロールになじみがないユーザーもいます。
さらに、横スクロールは、マウスやトラックボールでは基本的に非対応な操作で、
トラックパッドが必要になります。

ノートパソコンではトラックパッドが標準搭載されている機器も多いですが、
トラックパッドがないPCを使っているユーザーも多いです。

トラックパッドで横スクロールを実装します。

【CSS】JavaScript不要、トラックパッドで横スクロール

CSSでトラックパッドを使用して横スクロールを有効にします。横スクロール型ウェブデザインはECサイトにて商品比較に非常に役立ちます。画面が小さいスマホでもタッチスクリーンを活かし、レスポンシブデザインを考慮してユーザビリティ向上になります。

本記事では、マウスやトラックボールでも横スライドをできるようにCSSで矢印（くの字）をデザインして、JavaScriptで駆動できるコードを紹介します。

Udemyで学習する

Udemy 公式サイト

CSSで矢印

矢印のボタンで横スクロールするには、CSSを使用します。
ウェブデザインで矢印を作成するメリットは以下の通りです。

ウェブサイトで矢印の横スクロールを使うメリット

ユーザーが直感的に操作しやすい。
デザインのバランスが整う。

矢印を押すことで、横にスライドできる機能は
閲覧しているユーザーにも簡単に示唆することができます。

何枚もの画像を配置する場合、横に配置すると画像が小さくなってしまいます。
一方で、縦に並べると長くなってしまい非常に見にくいデザインになります。

そこで、画面外に配置して矢印操作（横スライド）で画面を作成すると、
デザイン性が向上します。

HTMLで画像を指定し、矢印ボタンを押して横スクロールを手動で行います。

HTML

解説

.Boxクラスは、.Box-Container内に配置されていて、横スライドに関与します。

また、左右の矢印は.Arrowというクラスが付けられており、
.Arrow leftと.Arrow rightでそれぞれ左矢印と右矢印を表しています。

CSS

    .Container {
      position: relative;
      width: 100%;
      overflow: hidden;
    }

    .Box-Container {
      display: flex;
      width: fit-content;
      transition: transform 0.3s ease;
      transform: translateX(0);
    }

    .Box {
      flex-shrink: 0;
      width: 300px;
      height: 200px;
      margin-right: 10px;
      border-radius: 10px;
      background-color: #ccc;
    }

    .Arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 30px;
      height: 30px;
      background-color: rgba(0, 0, 0, 0.3);
      color: #fff;
      font-size: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .Arrow.left {
      left: 0;
    }

    .Arrow.right {
      right: 0;
    }

    .Hide {
      display: none;
    }

解説

class「.Container」は、スライドショー全体のコンテナを指定します。
「position」をrelativeにします。内部の要素に対して位置指定を行います。
「width」を100%にします。親要素に対して幅いっぱいに広がることを意味します。
「overflow」を hiddenにします。コンテンツがコンテナからはみ出さないように制御します。

class「.Box-Container」は、ボックス要素のコンテナを指定します。
「display」を flexにします。内部のボックス要素が横に並ぶようにします。
「width」を fit-contentにします。内部のボックス要素の合計幅に合わせてコンテナの幅を自動調整します。
「transition」をtransform 0.3s easeにします。スライド時のアニメーション効果を指定します。
「transform」をtranslateX(0)にします。初期状態でボックスがスライドされていないことを示します。

class「.Box」は、各ボックス要素のスタイルを指定します。
「flex-shrink」を0にします。ボックスが収縮しないように指定します。
「width」「height」をそれぞれ300px、200pxにします。各ボックス要素の固定サイズを指定します。
「margin-right」を10pxにします。ボックス要素の間隔を指定します。
「border-radius」を10pxにします。ボックス要素の角を丸くするための指定です。
「background-color」を#cccにします。ボックスの背景色を指定します。

class「.Arrow」は矢印要素のスタイルを指定します。
「position」をabsoluteにします。親要素に対して位置指定を行います。
「top」を 50%、「transform」を translateY(-50%)にします。矢印要素を垂直方向に中央に配置するための指定です。
「width」を 30px、「height」を30pxにします。矢印要素のサイズを指定します。
「background-color」を rgba(0, 0, 0, 0.3)にします。矢印の背景色を指定します。

rgbaとは？

rgbaはそれぞれ、Red：赤、Green：緑、Blue：青、Alpha：透明度を意味します。

rgba("赤","緑","青","透明度")

「color」を #fffにします。矢印のテキスト色を指定します。
「font-size」を20pxにします。矢印のフォントサイズを指定します。
「display」をflex、「align-items」をcenter、「justify-content」をcenterにします。矢印のテキストを中央に配置するための指定です。
「cursor」をpointerにします。矢印要素にカーソルが重なった時にポインター形状を表示する指定です。

class「.Arrow.left」と「.Arrow.right」は、左矢印と右矢印の位置を指定します。
.Arrow.leftは左側に配置され、.Arrow.rightは右側に配置されます。

class「.Hide」は、非表示にするためのクラスです。
「display」をnoneにして要素が非表示になります。

HTMLとCSSを実装した様子がこちらになります。

示したように、矢印を押しても横にスライドしません。
CSSだけで横スライドを実装することは難しく、JavaScriptの実装が必要です。

UdemyでWebデザインを学習

Udemyは、オンデマンド式の学習講座です。
趣味から実務まで使えるおすすめの講座を紹介します。

ちゃんと学ぶ、WordPress テーマ開発講座
WordPressの自作テーマを作成してWordPressの仕組み理解。
WordPressで高度なカスタマイズをしたい人におすすめ。

【世界で70万人が受講】Web Developer Bootcamp 2023（日本語版）
フロントエンド言語でフレームワークの扱い方、セキュリティーを学習。
Web開発を学びたい初心者から経験者までにおすすめ。

【PHP, MYSQL, Apache】ガチで学びたい人のためのWEB開発の基礎(バックエンド編)
Webシステムの仕組みと挙動、システム構築などを学習。
サーバーに関わる知識を付けたい人におすすめ。

【2023年最新】【JavaScript＆CSS】ガチで学びたい人のためのWEB開発実践入門（フロントエンド編）
基礎レベルから実務レベルまで網羅していて、JSとCSSに焦点を当てた講座。
Webデザインをしたい人におすすめ。

JavaScript

    const container = document.querySelector('.Container');
    const boxContainer = document.querySelector('.Box-Container');
    const leftArrow = document.querySelector('.Arrow.left');
    const rightArrow = document.querySelector('.Arrow.right');
    const scrollAmount = 200; // ３回で最大値まで行く程度の数値

    leftArrow.addEventListener('click', () => {
      const containerWidth = container.offsetWidth;
      const maxScrollAmount = boxContainer.offsetWidth - containerWidth;
      const currentScrollAmount = Math.abs(parseInt(boxContainer.style.transform.split('(')[1])) || 0;
      const newScrollAmount = Math.max(currentScrollAmount - scrollAmount, 0);
      boxContainer.style.transform = `translateX(-${newScrollAmount}px)`;
      updateArrowVisibility(newScrollAmount, maxScrollAmount);
    });

    rightArrow.addEventListener('click', () => {
      const containerWidth = container.offsetWidth;
      const maxScrollAmount = boxContainer.offsetWidth - containerWidth;
      const currentScrollAmount = Math.abs(parseInt(boxContainer.style.transform.split('(')[1])) || 0;
      const newScrollAmount = Math.min(currentScrollAmount + scrollAmount, maxScrollAmount);
      boxContainer.style.transform = `translateX(-${newScrollAmount}px)`;
      updateArrowVisibility(newScrollAmount, maxScrollAmount);
    });

    function updateArrowVisibility(scrollAmount, maxScrollAmount) {
      if (scrollAmount === 0) {
        leftArrow.classList.add('Hide');
      } else {
        leftArrow.classList.remove('Hide');
      }

      if (scrollAmount === maxScrollAmount) {
        rightArrow.classList.add('Hide');
      } else {
        rightArrow.classList.remove('Hide');
      }
    }

解説

初めに、変数を定義します。
変数「container」・「boxContainer」・「leftArrow」・「rightArrow」にそれぞれクラス要素を取得します。
取得には、「document.querySelector(‘要素’)」を使用します。

変数「scrollAmount」はスクロール量です。端から端まで何回で進むか各自で調整してください。

    const container = document.querySelector('.Container');
    const boxContainer = document.querySelector('.Box-Container');
    const leftArrow = document.querySelector('.Arrow.left');
    const rightArrow = document.querySelector('.Arrow.right');
    const scrollAmount = 200; // ３回で最大値まで行く程度の数値

leftArrowのクリックイベントの処理を追加します。
ここでは、Arrow関数を使います。

Arrow関数とは？

アロー関数は、矢印（ =>）を利用して関数のINPUTとOUTPUTを表現します。
function式よりもコードの短縮化ができますが、制限がありすべての場面で有効ではありません。

構文は以下の通りです。

要素.addEventListener(種類, () => {
//処理
});

参考ページ：「アロー関数式 – JavaScript – MDN Web Docs

変数containerWidthにcontainer要素の幅を代入します。
変数maxScrollAmountに、スクロール可能な要素であるboxContainerの幅から、表示領域であるcontainerの幅を引いた値を代入します。

変数currentScrollAmountboxは、Container要素の現在のスクロール量を取得します。
boxContainer.style.transformは、要素のスタイルプロパティtransformの値を表します。この場合、translateX()という文字列が設定されています。※()内は、pxで表現されます。
split(‘(‘)[1])を使用して、translateX()の()部分を取得し、parseIntで整数値に変換します。
Math.absを使用して、取得したスクロール量の絶対値を計算します。
また、スクロール量が取得できない場合は、0を代入します。

変数newScrollAmountは、現在のスクロール量から指定されたscrollAmountを引いた値と0のうち、大きい値を取得します。これにより、新しいスクロール量が0未満にならないように制限されます。

「boxContainer.style.transform」で、boxContainer要素のスタイルプロパティtransformを更新し、新しいスクロール量を反映させます。translateX関数を使用して、水平方向に指定した負のピクセル数だけ要素を移動させます。
例えば、変数「newScrollAmount」が100pxであれば、カッコ内を「-${newScrollAmount}」とすることで-100px。つまり、左に100px移動することになります。

updateArrowVisibility関数を呼び出します。この関数はスクロール量と最大スクロール量を受け取り、左右の矢印ボタンの表示/非表示を切り替えるものです。

同様の操作をrightArrowのクリックイベントの処理に適したようにコードを追加します。

    leftArrow.addEventListener('click', () => {
      const containerWidth = container.offsetWidth;
      const maxScrollAmount = boxContainer.offsetWidth - containerWidth;
      const currentScrollAmount = Math.abs(parseInt(boxContainer.style.transform.split('(')[1])) || 0;
      const newScrollAmount = Math.max(currentScrollAmount - scrollAmount, 0);
      boxContainer.style.transform = `translateX(-${newScrollAmount}px)`;
      updateArrowVisibility(newScrollAmount, maxScrollAmount);
    });

    rightArrow.addEventListener('click', () => {
      const containerWidth = container.offsetWidth;
      const maxScrollAmount = boxContainer.offsetWidth - containerWidth;
      const currentScrollAmount = Math.abs(parseInt(boxContainer.style.transform.split('(')[1])) || 0;
      const newScrollAmount = Math.min(currentScrollAmount + scrollAmount, maxScrollAmount);
      boxContainer.style.transform = `translateX(-${newScrollAmount}px)`;
      updateArrowVisibility(newScrollAmount, maxScrollAmount);
    });

functionで、updateArrowVisibility関数のにおいて、変数「scrollAmount」が0の時は、左矢印をHideクラスで非表示にします。同様に、スクロール量が最大の時は、右矢印を非表示にします。

    function updateArrowVisibility(scrollAmount, maxScrollAmount) {
      if (scrollAmount === 0) {
        leftArrow.classList.add('Hide');
      } else {
        leftArrow.classList.remove('Hide');
      }

      if (scrollAmount === maxScrollAmount) {
        rightArrow.classList.add('Hide');
      } else {
        rightArrow.classList.remove('Hide');
      }
    }

実演

以上のHTML・CSS・JavaScriptの3つを用いると、冒頭で紹介した動作ができます。
また、以下に実際の動作を確認できます。

Document

CSSスライドショーを自動再生する方法

本記事では、矢印を押して手動で横スライドさせる方法です。
ユーザーは必ずしも矢印を押してくれるわけではなく、有益な情報を伝えられないことがあります。

CSSだけでスライドショーを自動再生するにはanimationを使用します。
また、JavaScriptを併用すればより柔軟な設定が可能になります。

以下の方法で、矢印ボタンを使わずに自動スライドを実現できます。

@keyframes slide {
  0% { transform: translateX(0); }
  33% { transform: translateX(-100%); }
  66% { transform: translateX(-200%); }
  100% { transform: translateX(0); }
}

.Box-Container {
  display: flex;
  width: 300%;
  animation: slide 9s infinite;
}

CSSで無限ループのスライドショーを作る

スライドショーの自動再生するにはanimationを使いますが、
それを無限ループさせるには、infiniteを組み合わせると良いです。

@keyframes infinite-slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.Box-Container {
  display: flex;
  animation: infinite-slide 5s linear infinite;
}

常に画像がループし続けるスライドショーをCSSのみで作成できます。

スマホで横スクロールをさせない方法

スマホは、縦長であるため横スクロールはデザインとして優れていません。
そこで、PCとスマホで使い分けるためにレスポンシブル化するべきです。

横スクロールを無効化するには、「overflow-x」を変える必要があります。

body {
  overflow-x: hidden;
}

これにより、スマホでの意図しない横スクロールを防ぐことができます。

意図しない横スクロールの原因と対策

横スクロールは、デザインをきれいにするメリットがありますが、
ウェブ訪問したユーザーにアクションを求めるため、
伝えたい情報を見せることができない場合があります。

そこで、意図しない横スクロールとなった場合、以下の原因を見直すべきです。

横スクロールの原因

width の指定ミス
position: absolute; による影響
フレックスボックスの影響

まとめ

矢印の導入はCSSでできますが、矢印を押して動作させるには、JavaScriptが必要になります。

ウェブデザインで矢印を作成ことは、ユーザーが直感的に操作しやすくできて、デザインのバランスが整います。
また、矢印を押すことで、横にスライドできるということは閲覧しているユーザーにも簡単に示唆できます。

Udemyで学習する

Udemy 公式サイト

【CSS】JavaScript不要、トラックパッドで横スクロール

アリッシア — Sat, 10 Jun 2023 13:21:09 +0000

本記事を読むと以下の実行ができます

カーソルをのせて横スクロールすると、動く。

トラックパッドは、主にノートパソコンに搭載されているマウスの代わりになる入力装置です。

最近はマウスやトラックボールの他にトラックパッドを使用する人も良く目にします。
トラックパッドが搭載されていないPCでも外付けで搭載する人がいるぐらい普及しています。

基本的な操作（デフォルト）

トラックパッドは４本指まで操作が可能です。

操作	動作
１本指タップ	左クリック
２本指タップ	右クリック
３本指タップ	検索ウィンドウ表示
４本指タップ	通知ウィンドウ表示
１本指ドラッグ	カーソル操作
２本指ドラッグ	スクロール
３本指ドラッグ	↑：マルチタスク・→：デスクトップ表示・←/↓：アプリ切り替え
４本指ドラッグ	↑：マルチタスク・→：デスクトップ表示・←/↓：デスクトップ切り替え

ジェスチャーの変更は、Windowsの場合はトップ画面の「スタート」から設定を選択し、「Bluetoothとデバイス」の「タッチパッド」項目から変えることができます。

トラックパッドは、マウスやトラックボールとは異なり横スクロールができます。
横スクロールは、ECサイトにて商品を紹介、比較する際に並べるウェブデザインを作成するときに便利です。

矢印を使えば操作デバイスに依存せずに、横スライドを実現することができます。

矢印で横スライドするデザインを紹介しています。

【CSS/JS】矢印のボタンで横スクロールするスライドショー

CSSとJavaScript(JS)を組み合わせた横スクロール可能なスライドショー。サイドに配置した矢印やボタンを活用して、htmlで実装した画像を横にスライドさせてユーザーに優れた視覚的な体験と直感的な操作感を提供するデザインです。

本記事では、トラックパッドを使って横スクロールするウェブデザイン(HTML/CSS)を紹介します。

横スクロールは、矢印で横にスライドする構成よりも作成しやすいのでおすすめです。

本記事は次の人におすすめ

トラックパッドで横スクロールすると動く。
ウェブデザインを学びたい。

Udemyで学習する

Udemy 公式サイト

横スクロール

トラックパッド横スクロールを可能にすることで、縦スクロールだけでは画面上に収まりきらない大量のコンテンツを表示する際に特に役立ちます。

例えば、水平方向に長い画像ギャラリーやデータのテーブルを表示する場合、横スクロールはスペースの効率的な利用を可能にします。

特に画面のサイズが小さいスマホは、横向きのデザインは扱いやすく、トラックパッドのようにタッチスクリーンを採用しているので非常に扱いやすいです。

一方で、横スクロールは一般的な縦スクロールに比べて、ユーザーの馴染みが少ない操作方法で、操作のヒントやガイドを提供する必要があります。

また、レスポンシブデザイン（スマホでのデザイン）の考慮しなければいけません。

HTML

解説

HTMLコードで、6つのbox要素を含むContainer要素を作成しています。

class「Container」は横スクロールを可能な要素です。
class「Box」はclass「Container」に配置される要素を表します。

CSS

    .Container {
      display: flex;
      overflow-x: scroll;
      width: 100%;
    }

    .Box {
      flex-shrink: 0;
      width: 300px;
      height: 200px;
      margin-right: 10px;
      border-radius: 10px;
      background-color: #ccc;
    }

    /* スクロールバー非表示 */
    .Container::-webkit-scrollbar {
      display: none;
    }

解説

初めに、class「.Container」の構成します。

「display: flex;」: コンテナをフレックスボックスとして表示します。
これにより横並びを作成します。
「overflow-x: scroll;」: コンテナの横方向にスクロールバーを表示します。
コンテナ内のコンテンツがコンテナの幅を超えた場合にスクロールが可能になります。
「width: 100%;」: コンテナの幅を親要素の幅に合わせます。

つづいて、class「.Box」の構成します。

「flex-shrink: 0;」: ボックス要素の収縮を無効にします。これにより、ボックスの幅がコンテナの幅を超えた場合でも収縮しません。
「width: 300px;」: ボックス要素の幅を300ピクセルに設定します。
「height: 200px;」: ボックス要素の高さを200ピクセルに設定します。
「margin-right: 10px;」: ボックス要素の右側に10ピクセルのマージンを追加します。
「border-radius: 10px;」: ボックス要素の角を10ピクセルの半径で丸めます。
「background-color: #ccc;」: ボックス要素の背景色を灰色（#ccc）に設定します。

最後に、.Container::-webkit-scrollbar:で、スクロールバーを非表示にします。

「display: none;」: スクロールバーを非表示にします。
※このコードはWebkitベースのブラウザ（Google Chrome、Safariなど）でのみ機能します。

UdemyでWebデザインを学習

Udemyは、オンデマンド式の学習講座です。
趣味から実務まで使えるおすすめの講座を紹介します。

ちゃんと学ぶ、WordPress テーマ開発講座
WordPressの自作テーマを作成してWordPressの仕組み理解。
WordPressで高度なカスタマイズをしたい人におすすめ。

【世界で70万人が受講】Web Developer Bootcamp 2023（日本語版）
フロントエンド言語でフレームワークの扱い方、セキュリティーを学習。
Web開発を学びたい初心者から経験者までにおすすめ。

【PHP, MYSQL, Apache】ガチで学びたい人のためのWEB開発の基礎(バックエンド編)
Webシステムの仕組みと挙動、システム構築などを学習。
サーバーに関わる知識を付けたい人におすすめ。

【2023年最新】【JavaScript＆CSS】ガチで学びたい人のためのWEB開発実践入門（フロントエンド編）
基礎レベルから実務レベルまで網羅していて、JSとCSSに焦点を当てた講座。
Webデザインをしたい人におすすめ。

実演

それでは、本コードを理解したところで動作確認します。
HTMLとCSSを稼働させると以下のように動作します。

Document

まとめ

横スクロールはコンテンツの比較をするときに非常にユーザビリティに優れているので、ECサイト等に導入するときに非常におすすめです。

また、スマホのように画面のサイズデバイスでは、タッチスクリーンを採用横向きのデザインは扱いやすいですが、レスポンシブデザイン（スマホでのデザイン）の考慮すること、横スクロールは一般的な縦スクロールに比べてユーザーにとって馴染みが少ない操作方法で、操作のヒントやガイドを提供する必要があります。

Udemyで学習する

Udemy 公式サイト

付録．ソースコード（一括）

本記事で扱ったコードをHTMLで一括で記述したものです。




  
  
  
  Document

【CSS/JavaScript】スクロールに合わせて画像切り替え

アリッシア — Sat, 10 Jun 2023 13:00:18 +0000

本記事を読むと以下の実行ができます

スクロールすると画像が動く。

Appleの「Airpots pro」やUnityのホームページなどで、スクロールに応じて背景が動くパララックスがあります。ウェブデザインはユーザーの目を引きやすいのでスクロールで画像切り替えできる動きはとてもおすすめです。

本記事では、スクロールに応じて、背景が変化するウェブデザインを作成します。

本記事は次の人におすすめ

人目を引くwebデザインを作成したい。
スクロールすると、背景が動く（画像が切り替わる）パララックスを作成したい。

Udemyで学習する

Udemy 公式サイト

スクロールで画像切り替え

本パララックス作成の着想は、パラパラ漫画からきています。

ご存じの通りパラパラ漫画は、1枚1枚の絵や画像をつなげて映像のように見えるものです。
アニメで絵が動いていてみえるのは、1枚1枚アニメーターの方が手掛けた絵をつなげているためです。

本製作でもパラパラ漫画の画像を複数用意して、スクロールするごとに画像を変化させて背景を動かします。

つなげる画像は「AvUtil」の「連番BMP」を使用すれば、だれでも簡単に作成することができます。

aviUtlで画像出力を紹介しています。

【AviUtl】動画・画像（GIF・BMP・Webp）出力

AviUtlはデフォルトで、GIFを出力できないので、「Direct GIF Export 2」というプラグインを導入します。GIFは、JPEGやPNGにできない画像をアニメーション化にできることが何よりも強みを持っています。

スクロールに合わせて動く画像を作成

スクロールに合わせて動く画像は動画を１枚の画像としてとらえます。動画から画像を作成するには、動画をAvUtilに入れて画像を出力することがもっとも手っ取り早いです。

本記事では、以下のような動きをする画像を作成します。

「ファイル」から「プラグイン出力」の「連番bmp」にて画像を出力します。

出力した画像は、管理のためにデスクトップ直下ではなく、フォルダー内に保管してください。

ここまでで、画像を用意してきたので、ここからはコードを書いていきます。
HTML,CSS,JavaScriptはいずれも子のフォルダー内に書いてください。

画像とコードの保存場所が別々では、パスが長くなり挙動が想定通りにならない可能性があります。

また、AvUtilでは出力する画像形式は文字通りbmpです。

bmpは非圧縮形式であるため高品質な画像表現ができますが、サイズは他の形式に比べて大きくなりやすいです。

したがって、画像形式を変換することをおすすめします。

画像形式はPythonのpillowとosライブラリを使用することで、変換することができます。

画像の変換について紹介しています。

【Python】pngやjpgの画像をwebpに一括で画像変換

pngやjpeg、bmpを画像変換するためにフリーソフトを探しても求めるものがないときはPythonのpillow,osモジュールで一括でwebpにします。自作ならwindows、macの対応を気にせず、応用でheicやavifもできます。

HTML

解説

class「container」で画像を含むコンテナを表します。
要素で、image_0000.jpgファイルを指定します。

また、class属性を「main-image」で指定します。
もう一方の要素は、src属性を空の値が指定しているため画像が表示されません。
class属性はalternate-imageというクラスが指定します。

CSS

 .container {
      width: 50%;
      height: 50%;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      overflow: hidden;
    }

    .main-image {
      position: relative;
      display: block;
      max-width: 100%;
    }

    .alternate-image {
      display: none; /* 最初は非表示にする */
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }

UdemyでWebデザインを学習

Udemyは、オンデマンド式の学習講座です。
趣味から実務まで使えるおすすめの講座を紹介します。

ちゃんと学ぶ、WordPress テーマ開発講座
WordPressの自作テーマを作成してWordPressの仕組み理解。
WordPressで高度なカスタマイズをしたい人におすすめ。

【世界で70万人が受講】Web Developer Bootcamp 2023（日本語版）
フロントエンド言語でフレームワークの扱い方、セキュリティーを学習。
Web開発を学びたい初心者から経験者までにおすすめ。

【PHP, MYSQL, Apache】ガチで学びたい人のためのWEB開発の基礎(バックエンド編)
Webシステムの仕組みと挙動、システム構築などを学習。
サーバーに関わる知識を付けたい人におすすめ。

【2023年最新】【JavaScript＆CSS】ガチで学びたい人のためのWEB開発実践入門（フロントエンド編）
基礎レベルから実務レベルまで網羅していて、JSとCSSに焦点を当てた講座。
Webデザインをしたい人におすすめ。

解説

Class「body」はHTML文書の要素に対するスタイルを指定しています。
「height」を 20000pxにします。
これにより、適当な高さが設定され、スクロールが有効になります。

Class「.container」はbodyに対するスタイルを指定しています。
「width」・「height」を50%にします。幅と高さを親要素の50%に設定しています。（実際ウェブサイトに導入するときは100%にしてください。）
「position」をfixedにします。要素の位置を固定位置に設定しています。
「top」を50%にします。上端をビューポートの垂直中央に配置します。
「left」を 50%にします。左端をビューポートの水平中央に配置します。
「transform」をtranslate(-50%, -50%)にします。
水平方向に50%、垂直方向に50%移動させます。
これにより、要素の中心がビューポートの中央に配置されます。
「overflow」をhiddenにします。
.container要素の内容が親要素の範囲を超えた場合、表示範囲内に収めるために内容を非表示にします。

Class「.main-image」はimage_0000.jpg（初めの画像）に対するスタイルを指定しています。「position」は relativeにします。親要素(.container)に対して相対的な位置に配置します。
「display」はblockにします。 .main-image要素をブロックレベル要素として表示します。
「max-width」は 100%にします。最大幅を親要素の幅に合わせます。
これにより、画像が親要素内に収まるようになります。

Class「.alternate-image」は“Alternate Image”対するスタイルを指定しています。
「display」は noneにします。.alternate-image要素を非表示にします。
初期状態ではこの要素は表示されません。
「position」はabsoluteにします。親要素に対して絶対的な位置に配置します。
「top」は 0にします。上端を親要素の上端に配置します。
「left」は 0にします。左端を親要素の左端に配置します。
「width」は100%にします。.alternate-image要素の幅を親要素の幅に合わせます。
これにより、要素が親要素全体を占めるようになります。

JavaScript

window.addEventListener('DOMContentLoaded', function() {
  // DOMのロードが完了した時点で実行される処理

  var container = document.querySelector('.container');
  var mainImage = document.querySelector('.main-image');
  var alternateImage = document.querySelector('.alternate-image');
  var currentImageIndex = 0; // 現在の画像インデックスの初期値を0に設定
  var scrollOffset = 0;

  function loadNextImage() {
    // 次の画像をロードする関数

    var paddedNumber = currentImageIndex.toString().padStart(4, '0');
    alternateImage.src = 'image_' + paddedNumber + '.jpg';
    alternateImage.alt = 'Alternate Image ' + paddedNumber;
  }

  function scrollHandler() {
    // スクロールイベントを処理する関数

    var containerRect = container.getBoundingClientRect();
    var scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
    var scrollDiff = scrollPosition - scrollOffset;

    console.log('Scroll Position:', scrollPosition);

    if (scrollDiff >= 45) {
      // スクロール量が45px以上の場合（正の方向にスクロール）

      scrollOffset = scrollPosition;
      if (currentImageIndex <= 18) { // 画像の枚数（最後の画像の数字-1）
        currentImageIndex++;
        loadNextImage();
      }
    } else if (scrollDiff <= -45) {
      // スクロール量が-45px以下の場合（負の方向にスクロール）

      currentImageIndex = Math.max(currentImageIndex - 1, 0);
      var paddedNumber = currentImageIndex.toString().padStart(4, '0');
      alternateImage.src = 'image_' + paddedNumber + '.jpg';
      alternateImage.alt = 'Alternate Image ' + paddedNumber;
      scrollOffset = scrollPosition;
    }

    if (scrollPosition > containerRect.top) {
      // スクロール位置がコンテナの上端を超えた場合

      mainImage.style.display = 'none';
      alternateImage.style.display = 'block';
    } else {
      mainImage.style.display = 'block';
      alternateImage.style.display = 'none';
    }
  }

  window.addEventListener('scroll', scrollHandler);
  loadNextImage();
});

解説

初めに、DOMContentLoadedイベントをHTMLドキュメントの解析が完了し、
DOMの構築が完了した時点で発生するイベントを作成します。

このイベントに対してコールバック関数が登録されています。

DOMとは？

DOMとは、Webドキュメントのプログラミングインターフェイスです。

プログラムがドキュメントの構造、スタイル、コンテンツを変更できるように
ページを表すときにDOMを使用します。

ドキュメントオブジェクトモデル (DOM) はウェブ文書のためのプログラミングインターフェイスです。ページを表現するため、プログラムが文書構造、スタイル、内容を変更することができます。 DOM は文書をノードとオブジェクトで表現します。そうやって、プログラミング言語をページに接続することができます。

ウェブページは、ブラウザーのウィンドウに表示したり、 HTML ソースとして表示したりすることが可能な文書です。どちらの場合も同じ文書であり、ドキュメントオブジェクトモデル (DOM) で操作することができます。 DOM はウェブページの完全なオブジェクト指向の表現で、 JavaScript のようなスクリプト言語から変更することができます。
DOM の紹介 – Web API – MDN Web Docs – Mozilla

変数「container」、「mainImage 」、「alternateImage」にそれぞれのクラス要素を取得します。
取得には、「document.querySelector(‘要素’)」を使います。

変数「currentImageIndex」を0にします。
現在表示されている画像のインデックスを保持する変数です。

変数「scrollOffset」を 0にします。
前回のスクロール位置を保持する変数です。

function loadNextImage() {…}は、次の画像をロードするための関数です。
現在の画像インデックスを元に、alternateImage要素のsrc属性とalt属性を設定します。

function scrollHandler() {…}は、スクロールイベントを処理するための関数です。
スクロール位置やスクロール量を計算し、必要な処理を実行します。

scrollイベント「window.addEventListener(‘scroll’, scrollHandler)」で、scrollHandler関数をイベントリスナーとして登録します。
つまり、スクロールイベントが発生した時にscrollHandler関数が実行されます。

loadNextImage()は、初期画像をロードするために、loadNextImage関数を実行しています。

実演

それでは、実際に動作を確認します。

マウスカーソルを上にしてスクロールしても動きますが動作がカクカクです。
スクロールバーで操作するとスムーズに動きます。

ソースコード（一括）





  
  
  
  
  Document

Udemyで学習する

Udemy 公式サイト

【CSS】画像に文字と画像を重ねる。画像をホバーで非表示にする

アリッシア — Mon, 06 Mar 2023 07:26:44 +0000

ユーザーに画像をクリックして別ページに移動してもらいたいことがあるかもしれません。

画像にURLを添付して、別のページに誘導しようとしても、ウェブサイトについて何も知らない閲覧者にとって、その画像にリンクがあることはわかりません。

訪問者にとって、工夫がされていないと画像にリンクが貼っているということは気づかれません。

さらに、マウスカーソルを画像に重ねる（ホバー）すると、文字を出現させたり、消したりすれば、省スペースでのwebデザインが可能となり、自由度の高いウェブデザインが作成できます。

本記事では、 CSSを使って画像の上に文字や新たな画像を重ねるデザインを紹介します。

本記事は次の人におすすめ

ウェブデザインをしている人
positionの「absolute」と「relative」を使えるようになりたい
opacityで表示、非表示を知りたい

Udemyで学習する

Udemy 公式サイト

画像の配置

Webサイトでは、文字での紹介も大切ですが、画像がある方がより読者の理解を高める効果があります。結果的に質の高い記事が完成します。

画面上に画像を表示するには、要素を使います。

src属性は、画像ファイルのパスまたはURLを指定します。
alt属性は、画像が読み込まれない場合やスクリーンリーダーなどを使用する場合に表示される代替テキストを指定します。

alt属性の必要性

alt属性が必要か否かという議論は、ブロガー内でよく議論されています。
アドセンスに合格するには、altが必要という人もいますが、個人的意見はあまり関係ないです。

アドセンス合格方法を紹介しています。

【アドセンス】有用性の低いコンテンツで不合格になる原因を攻略する

Google Adsenceに「有用性の低いコンテンツ」で何度も審査に通らず不合格になった経験から現在のアドセンスに合格するための操作を紹介。

ただし、クローラーは、画像の内容を理解することができないです。

そこでalt属性で画像の内容を説明しておけば、
画像と記事の関係性を追求されて評価の高い記事が完成します。

文字から画像を検索する際に、
alt属性が参考にされるともいわれているので、PV数が上がる期待も高まります。

CSSで画像に文字や画像を重ねる

画像にテキストや別の画像を重ねて、メッセージを強調し読者の注意を引き、ユーザーエンゲージメントの向上できます。

視覚的なコンテンツに対する説明や情報を提供により、ユーザーが画像の内容や意味を理解しやすくなり、情報を伝える効果が向上します。

特に、統計データやチャート、グラフなどの情報に使用することが有用です。

さらに視覚的な魅力を高めることができ、洗練されたデザインを作成できます。

スマホやタブレットでは、画面のサイズ上PCとは別のデザインを作らなければいけません。
その際に、CSSを使用して画像とテキストを組み合わせると、デバイスの異なる画面サイズに合わせて要素を調整しやすくなり、レスポンシブデザインをサポートできます。

個性を出す画像を使ったウェブデザインで「スクロールすると、背景が変わる」というものがあります。

スクロールで画像を変化させるパラグラフを紹介しています。

【CSS/JavaScript】スクロールに合わせて画像切り替え

JavaScriptでスクロール時に背景画像を切り替え、パララックス効果を実現します。スクロール位置に基づいて画像が滑らかに変化し、ページの動きに合わせて背景が移動します。

隠しリンクはNG

デザインに夢中になっていると意図せず隠しリンクを設置していることになるかもしれません。

隠しリンクは、文字通りリンクを含むテキストを画像と重ねて背後に設置したり、背景と同色にしたり、フォントのサイズを0にしてユーザーを別ページに飛ばすことです。

引用でもあるように、これらの行為はガイドライン違反になりますので、しないように徹底してください。

隠しリンクとは、ユーザーがページを閲覧したときに表示されない（見えないようにしている）リンクのことです。

画面上では容易に見えませんが、検索エンジンにだけ認識されるようにリンクを設置しています。

隠しリンクはスパム行為の一種で、検索エンジンのクローラーを騙して検索結果を操作するのが目的です。

現在はGoogleガイドラインのペナルティ対象となっており、発見されれば該当のページが検索結果に表示されなくなる可能性があります。

隠しリンクとみなされれば、たとえ意図したものではなくても、ペナルティの対象となるので要注意です。自分のサイトに隠しリンクがないか、適宜チェックしておきましょう。
隠しリンクとは？SEOへの影響や見つけ方・対処方法を解説

画像に重ね文字を表示

画像を配置して、その上に文字を右上、右下、左上、左下、中央に配置します。

HTML


  
    
    右上
    左上
    右下
    左下
    中央

CSS

UdemyでWebデザインを学習

Udemyは、オンデマンド式の学習講座です。
趣味から実務まで使えるおすすめの講座を紹介します。

ちゃんと学ぶ、WordPress テーマ開発講座
WordPressの自作テーマを作成してWordPressの仕組み理解。
WordPressで高度なカスタマイズをしたい人におすすめ。

【世界で70万人が受講】Web Developer Bootcamp 2023（日本語版）
フロントエンド言語でフレームワークの扱い方、セキュリティーを学習。
Web開発を学びたい初心者から経験者までにおすすめ。

【PHP, MYSQL, Apache】ガチで学びたい人のためのWEB開発の基礎(バックエンド編)
Webシステムの仕組みと挙動、システム構築などを学習。
サーバーに関わる知識を付けたい人におすすめ。

【2023年最新】【JavaScript＆CSS】ガチで学びたい人のためのWEB開発実践入門（フロントエンド編）
基礎レベルから実務レベルまで網羅していて、JSとCSSに焦点を当てた講座。
Webデザインをしたい人におすすめ。

解説

.container クラスは、画像とテキストのコンテナ要素を指します。
position: relative; でコンテナ要素を相対的な位置付けの基準として設定します。
これにより、内部の絶対位置要素（テキスト要素）がコンテナ内で位置を制御できます。

.container {
 position: relative;
}

.text-right-top, .text-left-top, .text-right-bottom, .text-left-bottom, .text-center の5つのクラスは、テキスト要素を指します。これらのテキスト要素は position: absolute; スタイルで配置、color プロパティで白いテキストカラーが指定しています。また、padding スタイルをオプションで設定することで、テキストのパディングを追加できます。

.text-right-top,
.text-left-top,
.text-right-bottom,
.text-left-bottom,
.text-center {
  position: absolute;
  padding: 5px;
  color: white;
}

text-right-top クラスは、右上に配置するテキスト要素に適用しています。
top: 0; と right: 0;でテキストを画像の右上に配置します。

同様に、.text-left-top, .text-right-bottom, .text-left-bottom, .text-center クラスは、それぞれ左上、右下、左下、中央に配置するテキスト要素に対して位置を指定しています。

.text-right-top {
  top: 0;
  right: 0;
}

.text-left-top {
  top: 0;
  left: 0;
}

.text-right-bottom {
  bottom: 0;
  right: 0;
}

.text-left-bottom {
  bottom: 0;
  left: 0;
}

.text-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

実演

ここまで紹介したコードを実行すると以下のように右上・右下・左上・左下・中央と文字が配置されます。

ソースコード（一括）




  



  
    
    右上
    左上
    右下
    左下
    中央

カーソルを合わせると別画像を表示

画像の上に別の画像を重ねて、カーソルを画像に載せること（ホバー）で画像を切り替えます。

画像の大きさは同じにすることでずれることなく配置できます。

HTML

CSS

.image-container {
    position: relative;
}

.image1 {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1.0;
}

.image2 {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.image1:hover{
    opacity: 0;
}
.image2:hover{
    opacity: 1.0;
}

解説

.image-container クラスには position: relative; スタイルが適用されています。
このクラス内に配置された要素の位置が相対的に設定されます。
要するに、絶対位置の画像（image1およびimage2）をコンテナ内で配置するための基準となります。

.image-container {
    position: relative;
}

.image1 クラスは position: absolute; スタイルが適用され、画像をコンテナの左上に配置します。opacity: 1.0; は、この画像の透明度を完全に不透明に設定しています。
要するに、最初はこの画像が表示されます。

.image1 {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1.0;
}

.image2 クラスも同様に position: absolute; スタイルを持ち、画像をコンテナの左上に配置します。しかし、この画像の透明度は opacity: 0; に設定しているので、最初は表示されません。

.image2 {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

最後は、各画像にマウスをオーバーしたときのスタイルを設定しています。

要するに、.image1 にマウスをオーバー（ホバー）すると、その画像の透明度がopacity: 0;に変更され、非表示になります。
一方、.image2 にマウスをオーバーすると、その画像の透明度がopacity: 1.0;に変更され、表示されます。

.image1:hover{
    opacity: 0;
}
.image2:hover{
    opacity: 1.0;
}

実演

上記のコードを実行すると、マウスカーソルを画像に置くと、表示されていた画像が非表示だった画像と切り替わります。

ソースコード（一括）

まとめ

Webサイトでは、文字だけではなく、画像でより読者の理解を高めて質の高い記事ができます。

画面上に画像を表示するには、要素を使います。

さらに、背景を指定した画像にしたい場合は、CSSを使用します。

.element {
  background-image: url('画像のファイルパス・URL');
}

CSSを使用して画像のサイズ、位置、余白など要素をスタイリングすることもできます。また、class属性から、特定の画像を指定することができます。

img {
  width: 300px; /* 画像の幅 */
  height: 200px; /* 画像の高さ */
  margin: 10px; /* 余白 */
}

.image{
  width: 300px; /* 画像の幅 */
  height: 200px; /* 画像の高さ */
  margin: 2rem; /* 余白 */
}

画像上に文字を右上、右下、左上、左下、中央に配置するには、絶対値（画像）、相対値（テキスト）を決めます。

また、画像上に別の画像を配置し、カーソルを合わせると変えるようにするには、ホバーでopacityを変える必要があります。

opacity: 1.0; /* 表示 */
opacity: 0; /* 非表示 */

Udemyで学習する

Udemy 公式サイト

JavaScriptとPHPの違いー優先して学ぶ言語はどっち？

アリッシア — Sun, 22 Jan 2023 04:11:38 +0000

通常Webページを作成するプログラミング言語は、HTML・CSSを使います。

HTMLは、サイトに文字や画像などを表示する骨組み。
CSSは、HTMLで表示した文字の色や大きさ。画像の位置や背景などサイトの装飾に関わります。

企業のコーポレートサイトは、スクロールをするとふわっと画像が出てくるようなアニメーションの導入。

通販サイトは、メールアドレスとパスワードを使用して新規登録やログイン機能がWebサイトに追加されています。

しかし、これらは基本的にHTML・CSSではできないです。

アニメーションや会員登録などは、「JavaScript」と「PHP」２つのプログラミング言語がHTML・CSSの他に必要になります。

本記事では、「JavaScript」と「PHP」に焦点を当てて、両者の言語がどのようなことができるか紹介します。

また、できることを踏まえて、どちらの言語を優先して学習するべきか紹介します。

本記事は次の人におすすめ

JavaScriptとPHPでできること・違いを知りたい。
どちらを優先して学習を進めていくべきか知りたい。

Udemyで学習する

Udemy 公式サイト

JavaScript

JavaScriptは、動的なコンテンツやユーザーとの対話を可能にするためのプログラミング言語です。
主にウェブページのユーザーがブラウザ上で動作する場面で、使用されます。

JavaScriptでできる一例を紹介します。
他にもできることはありますが、本記事では、多くの人に該当するJavaScriptの用途を挙げます。

JSの用途

Webサイトのアニメーション
ポップアップウィンドウ
フォーム制御
Web、スマホアプリ作成
Chrome・Firefoxの拡張機能

Webサイトのアニメーション

スクロールすると、ふわっと画像が出てくる。（フェイドイン・フェイドアウト）
スクロールで、背景の画像がぱらぱらマンガのように動く。（例：Apple-Airpods Pro公式サイト）

スクロールして画像が変わるアニメーションを紹介しています。

【CSS/JavaScript】スクロールに合わせて画像切り替え

このようなWebサイトのアニメーションは、JavaScriptで作成することができます。

アニメーションを導入したサイトは閲覧者の目を引き、このようなWebページは彼らを楽しませるだけではなく、サイトの離脱を下げる効果があります。

ポップアップウィンドウ・フォーム制御

ポップアップウィンドウはサイトを操作中に、
ディスプレイ上に表示されるウィンドウのことです。

例えば、Webテストを受けていて、
終了ボタンを押すと、「本当に終了しますか？」という確認メッセージが表示されます。

このメッセージ（ポップアップ）は、JavaScriptによって表示します。

このソースコードで表示されるポップアップウィンドはデフォルトで、デザインにはCSSを使います。

ポップアップと聞くと、ポップアップ広告という言葉を聞いたことがある人もいるでしょう。
ウェブページに訪問すると、画面上に小さなウィンドウで出てくる広告です。

販売促進、コンバージョン率の向上が見込めますが、
あからさまに広告の押し売りになるので、ユーザーから嫌われます。
サイトの評価も下がるので、使い方には注意が必要です。

フォーム制御は、新規登録のような入力をサーバーに転送する際に、電話番号の桁数が足りない。メールアドレスに漢字が入っている。半角の数字ではなく全角で入力している。
このような間違いの入力があるときに、エラーを表示します。

Web・スマホアプリ作成

Webサイトで動くアプリは基本的にHTMLとCSSで静的な枠組みを作って、
JavaScriptで動きを付けてアプリを作成しています。

また、Webの枠を超えて、スマホアプリも作ることができますが、
ゲームやスマホアプリは専用の言語を使うことをおすすめします。

Webで動くゲームを作る場合は、Unityがおすすめです。
Unityは、ゲームを作るエンジンで、物理演算、AR/VRなど作ることができます。
Unityはプラットフォームを変えれば、PC・Web・Android・iOSいずれも作成することができます。

本格的なアプリケーションを作る場合は、
iOS、Androidどちらでも動くFlutterがおすすめです。

Flutterの環境設定を解説しています。

【Flutter】VSCodeでWindowsの開発を環境構築

Windowsを使ってflutterでvscodeの環境構築を解説をしています。アプリの開発はOSごとに使用できる言語が異なりますが、Flutterはどちらも対応していて、企業の参入もしています。

Chrome、Firefoxの拡張機能

JavaScriptを使えば、Chrome、Firefoxなどのブラウザの拡張機能の作成もできます。

ブラウザの拡張機能では、Webページの文字色を変えるカスタマイズができます。

高度な技術があれば、動画の倍速機能や英語のサイトを自動で日本語翻訳するなど様々な拡張機能を作成できます。

PHP

続いて、PHPでできることを紹介します。

PHPは、サーバーサイドで動作するプログラミング言語です。
JSと同様に、動的なウェブページを作成するために使用されます。

PHPのコードはHTMLに埋め込むことができて、ウェブサーバー上で実行します。
ユーザーのブラウザには生成されたHTMLコードが送信されます。

PHPの用途

SNSサイト
ECサイト
WordPressプラグイン
お問い合わせフォーム
MySQLとUnityの連携

SNSサイト作成

X（Twitter）やFacebook、インスタなどのSNSサービスは次のような機能があります。

SNS機能

アカウントの登録や更新削除
投稿の更新と削除
個人間のメッセージのやり取り
ログイン、ログアウト

これらの機能はPHPを使って、データベースを管理する必要があります。

ECサイト作成

ECサイト（Electronic Commerce）とは、「Amazon」や「楽天」といったショッピングサイトです。

先ほどのSNSサイトの機能でもあったように、ログイン・ログアウトでPHPを使います。

他にも、商品購入やお気に入り設定や商品の在庫確認はPHPで開発されます。

WordPressプラグインを自作

WordPressとは、ブログを運営するためのオープンソースのソフトウェアです。
PHPで開発されていて、MYSQLでデータベースを管理しています。

さらに、WordPressプラグインは、PHPで作成されています。
おすすめや新着記事などの表示もPHPが関係しています。

UnityとMySQLの連携

ゲームエンジンUnityとデータベースを連携して通信する場合は、PHPを介して行うことができます。
データベースを使うことでセーブデータの管理をサーバー上で行うことができます。

Unity(C#)とPHPを連携を解説しています。

【Unity】PHP連携-MySQLでデータベースを作成

UnityとPHPを組み合わせたデータベース接続にはMySQLを使います。UnityからPHPを経由してデータベースにアクセスし、SQLを使用して連携します。編集はphpAdminを使用します。

JavaScriptとPHPの違い

2つの言語は動的なウェブページを作成という観点で、同じような言語です。

JavaScriptは、ブラウザ内で実行され、ユーザーの端末上で動作します。
PHPは、ウェブサーバー上で実行され、HTMLとして表示されます。

その他にも、データベース連携が得意・不得意ことや実装する場所が違うなど違いは多くあります。

ウェブページを作成の上でどちらから学ぶべきでしょうか。

特別な理由がなければ、JavaScriptから学ぶべき

自分は、PHPにしか興味がない。
アカウント登録のシステム（ログイン・ログアウト）がとにかく作りたい。

これらサーバーを使うことは、JSは不向きなので、PHPから入るべきです。

いずれにおいても、PHPを扱う場合には、JavaScriptでのアニメーションが必要になります。
PHPを学ぶならば、JavaScriptも習得を見通しておくことをおすすめします。

JavaScriptはすぐに始められる

PHPは環境設定が必要です。
PHPの実行するためには、ウェブサーバーとPHPのインストールします。
その後、PHPを設定して、ウェブサーバーと連携しなければいけません。

一方で、JavaScriptはインストールのようなひと手間は、基本的には不要です。

VScodeやドキュメントにソースコードを書いて、拡張子を指定(script.js)すれば、JavaScriptは実行できます。

PHPより知識がいらない

PHPはデータやアカウントを扱うので、文法だけではなくデータベース(MySQL)やCookieなどを学ぶ必要があります。

一方でJavaScriptは、PHPのように知識はほとんど不要です。

慣れないうちはjQueryに苦戦しますが、jQueryはJavaScriptコードを容易に記述できるように設計されたJavaScriptライブラリなので、マスターすれば柔軟なウェブデザインを開発ができます。

JavaScriptの知識がPHPで役に立つ

JavaScriptとPHPは文法がよく似ています。
JavaScriptの知識がある程度あれば、PHPもすぐに身に着けることができます。

一例として、変数宣言・配列があります。

変数宣言

Javascript

let name = "Hello, World!";

$name = "Hello, World!";

配列

Javascript

let arrayNum = [1, 2, 3];

$arrayNum = array(1, 2, 3);

ただし、異なる点もあります。
JavaScriptは変数の型を宣言する必要がありません。
PHPは変数の型を事前に宣言する必要があります。

型宣言

Javascript

let name; // 型を宣言せずに変数を宣言

name = 10; // 数値型
console.log(name); // 10

name = "Hello, World!"; // 文字列型
console.log(name); // Hello, World!

name = true; // ブール型
console.log(name); // true

その他にも、JSは、var・let・constなどを使用して制御しますが、PHPにはありません。

UdemyでWebデザインを学習

Udemyは、オンデマンド式の学習講座です。
趣味から実務まで使えるおすすめの講座を紹介します。

ちゃんと学ぶ、WordPress テーマ開発講座
WordPressの自作テーマを作成してWordPressの仕組み理解。
WordPressで高度なカスタマイズをしたい人におすすめ。

【世界で70万人が受講】Web Developer Bootcamp 2023（日本語版）
フロントエンド言語でフレームワークの扱い方、セキュリティーを学習。
Web開発を学びたい初心者から経験者までにおすすめ。

【PHP, MYSQL, Apache】ガチで学びたい人のためのWEB開発の基礎(バックエンド編)
Webシステムの仕組みと挙動、システム構築などを学習。
サーバーに関わる知識を付けたい人におすすめ。

【2023年最新】【JavaScript＆CSS】ガチで学びたい人のためのWEB開発実践入門（フロントエンド編）
基礎レベルから実務レベルまで網羅していて、JSとCSSに焦点を当てた講座。
Webデザインをしたい人におすすめ。

まとめ

通常Webページには、骨組みのHTMLと装飾のCSSを使います。
ウェブアニメーションや新規登録・ログインは、HTML・CSSではできないです。

これらは、「JavaScript」と「PHP」がHTML・CSSの他に必要になります。

2つの言語は動的なウェブページを作成する言語です。
JavaScriptはブラウザ内、PHPはウェブサーバー上で実行します。
その他にも、データベース連携が得意不得意があります。

PHPは文法の他にもデータベースを扱うので、MySQLをマスターしないといけないので、JSの学習を優先することをおすすめします。

Udemyで学習する

Udemy 公式サイト