月間カレンダー Web サイトを構築する
導入
開発者の皆さん、こんにちは！私の最新プロジェクトである月間カレンダーを共有できることを嬉しく思います。このプロジェクトは、JavaScript で機能的で視覚的に魅力的なカレンダーを作成したい人に最適です。 Web サイトにカレンダー機能を追加することに興味がある場合でも、単に JavaScript スキルを強化したい場合でも、このプロジェクトはあなたのポートフォリオへの貴重な追加となるでしょう。
プロジェクト概要
月間カレンダーは、現在の月を表示し、今日の日付を強調表示し、曜日を正確に配置する Web ベースのアプリケーションです。このプロジェクトでは、HTML と CSS で構築された洗練された応答性の高いインターフェイスと組み合わせて、JavaScript を使用してカレンダーを動的に生成する方法を紹介します。
特徴
- 動的月表示: 現在の月と年を自動的に表示します。
- 強調表示された現在の日付: 今日の日付は、簡単に識別できるように強調表示されています。
- 正確な曜日レイアウト: 曜日は月に従って正しく配置されます。
使用されている技術
- HTML: 月間カレンダーの構造を提供します。
- CSS: カレンダーのスタイルを設定し、視覚的に魅力的で応答性が高くなります。
- JavaScript: 日数の計算や現在の日付の強調表示など、カレンダーを生成するロジックを処理します。
プロジェクトの構造
プロジェクト構造の概要は次のとおりです:
Month-Calendar/ ├── index.html ├── style.css └── script.js
- index.html: 月間カレンダーの HTML 構造が含まれています。
- style.css: モダンでレスポンシブなデザインを作成するための CSS スタイルが含まれています。
- script.js: カレンダー生成機能を管理します。
インストール
プロジェクトを開始するには、次の手順に従います:
-
リポジトリのクローンを作成します:
git clone https://github.com/abhishekgurjar-in/Month-Calendar.git
-
プロジェクト ディレクトリを開きます:
cd Month-Calendar
-
プロジェクトを実行します:
- Web ブラウザでindex.html ファイルを開いて、月間カレンダーを表示します。
使用法
- Web ブラウザで Web サイトを開きます。
- 現在の月を表示し、今日の日付を強調表示します。
- 日ごとに移動すると、月全体のレイアウトが表示されます。
コードの説明
HTML
index.html ファイルは、月の表示や日のグリッド レイアウトなど、月カレンダーの構造を定義します。スニペットは次のとおりです:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Month Calendar</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="container">
<div class="header">
<h1>Month Calendar</h1>
</div>
<div class="calendar">
<div class="month">
<div class="date">
<h1></h1>
<p></p>
</div>
</div>
<div class="weekdays">
<div>Mon</div>
<div>Tue</div>
<div>Wed</div>
<div>Thu</div>
<div>Fri</div>
<div>Sat</div>
<div>Sun</div>
</div>
<div class="days"></div>
</div>
<div class="footer">
<p>Made with ❤️ by Abhishek Gurjar</p>
</div>
</div>
</body>
</html>
CSS
style.css ファイルは月カレンダーのスタイルを設定し、魅力的で応答性の高いものにします。以下にいくつかの主要なスタイルを示します:
* {
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100vh;
background-color: salmon;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.header {
margin: 20px;
color: white;
text-align: center;
}
.calendar {
background-color: black;
color: lightgray;
width: 450px;
height: 520px;
border-radius: 10px;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
}
.month {
width: 100%;
height: 120px;
background-color: lightseagreen;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border-radius: 10px 10px 0 0;
}
.month h1 {
font-size: 30px;
font-weight: 400;
text-transform: uppercase;
}
.month p {
font-size: 16px;
}
.weekdays {
width: 100%;
height: 50px;
display: flex;
}
.weekdays div {
font-size: 15px;
font-weight: bold;
letter-spacing: 1px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.days {
width: 100%;
display: flex;
flex-wrap: wrap;
padding: 2px;
}
.days div {
font-size: 14px;
margin: 3px;
width: 57.5px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.days div:hover:not(.empty) {
border: 2px solid gray;
cursor: pointer;
}
.today {
background-color: lightseagreen;
}
.footer {
margin-top: 70px;
color: white;
text-align: center;
}
JavaScript
script.js ファイルには、カレンダーを生成し、現在の日付を強調表示するためのロジックが含まれています。スニペットは次のとおりです:
const monthEl = document.querySelector(".date h1");
const fullDateEl = document.querySelector(".date p");
const daysEl = document.querySelector(".days");
const monthInx = new Date().getMonth();
const lastDay = new Date(new Date().getFullYear(), monthInx + 1, 0).getDate();
const firstDay = new Date(new Date().getFullYear(), monthInx, 1).getDay() - 1;
const months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
monthEl.innerText = months[monthInx];
fullDateEl.innerText = new Date().toDateString();
let days = "";
for (let i = firstDay; i > 0; i--) {
days += `<div class="empty"></div>`;
}
for (let i = 1; i <= lastDay; i++) {
if (i === new Date().getDate()) {
days += `<div class="today">${i}</div>`;
} else {
days += `<div>${i}</div>`;
}
}
daysEl.innerHTML = days;
ライブデモ
ここで、Month Calendar プロジェクトのライブデモをチェックできます。
結論
月間カレンダーの作成は、フロントエンド開発スキルと実用的な JavaScript 機能を組み合わせることができる楽しいプロジェクトでした。このツールは、Web サイトにカレンダーの日付を表示するのに便利で、Web 開発プロジェクトへの優れた追加機能となります。皆さんも私と同じように役立つと思います。コーディングを楽しんでください!
クレジット
このプロジェクトは、JavaScript スキルを向上させ、機能的な Web ツールを作成するという私の旅の一環として開発されました。
著者
-
アビシェク・グルジャル
- GitHub プロフィール
以上が月間カレンダー Web サイトを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undress AI Tool
脱衣画像を無料で
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
一般的なCSSブラウザの矛盾とは何ですか？
Jul 26, 2025 am 07:04 AM
さまざまなブラウザのCSS解析に違いがあるため、主にデフォルトのスタイルの違い、ボックスモデルの計算方法、フレックスボックスおよびグリッドレイアウトサポートレベル、および特定のCSS属性の一貫性のない動作を含む一貫性のないディスプレイ効果が得られます。 1.デフォルトのスタイル処理は一貫性がありません。解決策は、cssresetまたはremormize.cssを使用して初期スタイルを統合することです。 2。IEの古いバージョンのボックスモデル計算方法は異なります。 Box-Sizing：Border-Boxを統一された方法で使用することをお勧めします。 3. FlexBoxとグリッドは、エッジの場合や古いバージョンでは異なる機能を示します。より多くのテストを行い、Autoprefixerを使用します。 4.一部のCSS属性の動作は一貫性がありません。 Caniuseは相談して格下げする必要があります。
アクセントカラーのプロパティとは何ですか？
Jul 26, 2025 am 09:25 AM
Accent-Colorは、CSSで使用される属性であり、チェックボックス、ラジオボタン、スライダーなどのフォーム要素のハイライト色をカスタマイズします。 1.チェックボックスの青いチェックマークを赤に変更するなど、フォームコントロールの選択した状態のデフォルト色を直接変更します。 2。サポートされている要素には、type = "チェックボックス"、type = "Radio"、type = "range"の入力ボックスが含まれます。 3.アクセントカラーを使用すると、複雑なカスタムスタイルと余分なDOM構造を回避し、ネイティブアクセシビリティを維持できます。 4.一般的に最新のブラウザによってサポートされており、古いブラウザを格下げする必要があります。 5. Accent-Colを設定します
選択をスタイリングする方法ハイライト（ `:: selection`）？
Jul 16, 2025 am 12:50 AM
CSSの::選択擬似要素を使用して、ページの美学と統一性を改善するためにWebページテキストを選択したときにハイライトスタイルをカスタマイズします。 1.基本設定：:: ::選択の背景と色を定義します。 P ::選択などの特定の要素も制限できます。 2。互換性処理：Safariおよびモバイルブラウザーと互換性がある-WebKit -Prefixを追加すると、FirefoxとEdgeの標準が十分にサポートされています。 3.読みやすさに注意してください：過度の色のコントラストや派手なほど避け、全体的な設計と調整する必要があります。たとえば、視覚的な快適さを改善するために、暗いモードのソフトブルーベースを選択します。合理的な使用は、インターフェイスのテクスチャを強化し、詳細を無視することができます
ブラウザのデフォルトのスタイルシートはレンダリングにどのように影響しますか？
Jul 19, 2025 am 02:08 AM
ブラウザのデフォルトスタイルは、マージン、フィル、フォント、フォーム要素スタイルを自動的に適用することにより、基本的な読みやすさを確保しますが、一貫性のないクロスブラウザーレイアウトを引き起こす可能性があります。 1.デフォルトのマージンと充填は、タイトル、段落、リストの間隔など、レイアウトフローを変更します。 2.デフォルトのフォント設定は、16pxフォントサイズやTimesNewromanフォントなど、読みやすさに影響します。 3.フォーム要素は異なるブラウザで非常に異なるため、外観をリセットする必要があります。 4.強いEMやEMなどの一部のタグには、デフォルトの強調スタイルがあり、明示的に上書きする必要があります。回避策には、remormize.css、リセットスタイル、またはグローバルにクリアなマージンと塗りつぶしの使用が含まれ、一貫性のためにフォントとフォームスタイルをカスタマイズします。
段落の最初の文字または最初の行をスタイリングする方法は？
Jul 19, 2025 am 02:58 AM
視覚的魅力を強化するために段落の始まりを美化するために、一般的な慣行は、CSSの擬似要素を使用するか、ドキュメントを手動でスタイリングすることです。 Web開発では、P :: First-Letterを使用して、拡大、太字、変色などの最初の文字スタイルを設定できますが、ブロックレベルの要素にのみ適していることに注意してください。最初の行全体を強調表示したい場合は、P :: First-Lineを使用してスタイルを追加します。 Wordなどのドキュメントソフトウェアでは、最初の文字形式を手動で調整したり、スタイルテンプレートを作成したりすることができます。Indesignには、公開やデザインに適した「ファーストシンク」機能が組み込まれています。適用するときは、読み取りに影響を与える複雑なスタイルを避け、互換性とフォーマットの一貫性を確保するなど、詳細に注意を払う必要があります。
「垂直アライグル」プロパティとその典型的なユースケースを説明してください
Jul 26, 2025 am 07:35 AM
thevertical-AlignPropertyincsSalignSinlineortable-cellElementsive.1.ItadjustsemageSlikeImagesSwitSwitSwithinputswithintingtlinessingVaseLine、Middle、super、andsub.2.IntableCells、ItControlScontEntalInmentWithop、Middle、Orbottomvalues、頻繁に
CSS「カウンターリセット」および「カウンターインクリメント」特性を説明します
Jul 18, 2025 am 04:00 AM
CSSのカウンターレセットとカウンターインクリメントを使用して、HTML要素を自動的に番号付けします。 1。カウンターレセットを使用して、カウンターを初期化またはリセットします。たとえば、セクション{counter-reset：sub-section;}を使用して、サブセクションという名前のカウンターを作成します。 2。H3{カウンターインクリメント：サブセクション;}などのカウンターインクリメントを介してカウンターをインクリメントして、各H3タイトル番号を増やします。 3.コンテンツ属性を使用して、擬似エレメントを組み合わせてカウンターを表示します。
未使用のCSSをパージする方法は？
Jul 27, 2025 am 02:47 AM
useautomatedtoolslikepurgecssoruncsStoscanandRemoveUnusedcss; ’scontentConfiguration; 3.OuditcsSusageWithRedevtoolScoveragetabbeavePurgingToavoidRemovingedStyles; 4.SafelistDynamic
