Zenn
🐷

javascript,CSSをHTMLに埋め込む

2024/02/06に公開
CSS
HTML
JavaScript
#
サーバー
#
iis
tech

はじめに

以前、自身のローカルPCでIISを使ってWebサイトを作ってみました。
過去ブログ：WebサーバーIISを使ってみた
今回はそのwebサイトのHTMLにjavascript,CSSを埋め込んでみたいと思います。

新たにファイルを作成する

CSSのファイルを作成する

ファイル名は「style.css」とします。

  • 全体の背景を黒に指定
  • h1タグの文字を赤に指定
  • ボタンの背景を赤に、文字を白に指定
style.css
body {
  background-color: black;
}
h1 {
  color: red;
}
button {
  color: white;
  background-color: red;
}
javascriptのファイルを作成する
  • 呼び出されると「Hello world!!」というアラートを通知する関数を作ります。
  • ボタンがクリックされた時に、この関数を呼び出す想定です。
scrip.js
function ShowAlart() {
  alert("Hello world!!");
}

作成したファイルを配置する

今回は、作成したそれぞれのファイルをhtmlを配置したディレクトリに配置します。
（任意のフォルダ構成で）

HTMLファイルを編集する

変更点
  • javascriptを記述したファイル「script.js」と、CSSを記述したファイル「style.css」を読み込ませています。
  • ボタンを追加しています。
  • ボタンが押された時に、javascriptファイルに記載した関数を呼び出すように指定しています。
index.html

<html lang="ja">
<head>
<title>Tab</title>
<script type="text/javascript" src="/script.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8" />
</head>

<button type="button" onclick="ShowAlart()">ここをクリック</button>
<h1>IIS Hello!!</h1>
</body>
</html>

localhostにアクセス

javascriptとCSSの内容が反映されています。

さいごに

この方法では、新しいウェブページを追加したり既存ページを編集してウェブサイトを構築でき、今回はJavaScriptとCSSを取り入れました。
企業情報、製品詳細、お問い合わせフォーム、ブログ記事など、様々なコンテンツの追加が可能です！

Discussion