HTMLとCSSとJS

Web

2021年5月25日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。
ほとんどの内容がお前は何を言っているんだ状態だと思いますが、少しでもWebに興味を持ってもらえるようがんばります。

なお当サイトではなるべくホームページではなくウェブサイトという表現を用いるようにしています。
homepageはあくまでサイトのトップページのことのみを指し、サイト全体を指す単語はwebsiteだとどこかで読みました。まあつまんないこだわりです。

私は（一応）薬剤師の端くれですので、薬剤師の仕事に例えて説明してみます。

・HTML ↔ 処方箋

・CSS ↔ 薬情

・JavaScript ↔ 服薬指導

HTML

<!DOCTYPE html>
<html>
<head>
 <title>CHEMIST（ケミスト）｜福岡の薬局コンサルティング</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="css/style.css">
</head>
<body>
 <h1>ブログタイトル</h1>
 <img src="sample.jpg" class="w-100">
 <p class="mt-4">記事本文</p>
 <script src="js/main.js"></script>
</body>
</html>

HTMLとはHyperText Markup Languageの略で、文字や画像をページに表現するために用いられる言語です。

サイトを開いている時に、

Windowsの場合

・右クリック→「ページのソースを表示」

・＋

・

Macの場合

・＋＋

などの操作で見ることができます。

投薬における「処方箋」だと言えますね。

CSS

body {
  font-family: 'Montserrat', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  background: #fff;
}

CSSとはCascading Style Sheetsの略で、HTMLのそれぞれの要素のデザインやレイアウト（＝スタイル）を指示する仕様の1つです。

文字の大きさ、太さ、色や、行間、画像の幅などを別ファイルで定義して、HTMLでそれを読み込みます。直接HTMLにスタイルを記述することもあります。

薬効、用法、用量などが記載された「薬情（薬剤情報提供書）」のようなものと言えるでしょう。

JavaScript

$(function() {
  $('a[href^="#"]').click(function() {
    var speed = 500;
    var href = $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $("html, body").animate({
      scrollTop: position
    }, speed, "swing");
    return false;
  });
});

JavaScriptとは、ウェブサイトに動きをつけるプログラム言語のことです。

ウェブサイトをアニメーションさせたり、サーバーとの送受信を行ったり、ウェブアプリに使われたりしています。

薬剤師による「服薬指導」のようなものですかね（やや苦しいか）

まとめ

わかりやすく例えようとして余計にわからなくなりました。

今後はそれぞれの項目について、より具体的に紹介していきます（誰得）

この記事を書いた人

みやの

Web・DTP担当

We Blog Weblog