We Blog Weblog

HTMLとCSSとJS

Web

2021年5月25日

HTML/CSS/JS

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

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

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

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

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 Pゴシック', '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とは、ウェブサイトに動きをつけるプログラム言語のことです。

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

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

まとめ

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

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

当サイトに関するご意見、ご感想、制作のご依頼はお問い合わせフォームのほか、Chatworkでも受け付けております。

私たちは、クラウド型ビジネスチャットChatworkを導入しています。

国内利用者数No.1 中小企業向けビジネスチャット「Chatwork」

そのうちChatworkの紹介記事も書きますので、しばらくお待ちください。

この記事を書いた人
みやの
Web・DTP担当

Contact Us

ご意見、ご相談、料金のお見積もりなど、お気軽にお問い合わせください。

お問い合わせはこちら

TOP