ウェブサイトの書き方

2019年12月07日

「東京高専プロコンゼミ① Advent Calendar 2019」7日目の記事です.
去年今年とウェブサイト(ここ)を書いてきて覚えたこととかを書きます.
なうなHTML5を使いますが私がhtml4以前の人間なので交じるかもしれません(ご了承ください)
注意:htmlとjsとcssを使いますがperlとかは使いません.デプロイもやりません.

使用環境

PC
テキストエディタのみ！(IntelliJIDEAとかがあるほうがやりやすくなる)

前提

HTMLとはウェブに表示する文字とかをかくもの
CSSとはその文字とかいろいろを装飾するのを描くもの
jsとは動的な動き(実際にはそう見える?)を実装するもの
HTMLにおいて

1	`<!--コメントです-->`

これはコメントです
JSにおいて

1	`//コメントです`

これはコメントです
CSSにおいて

1	`/コメントです/`

これはコメントです
HTMLで<と>で囲まれたものをタグといいます.<〇〇>と</〇〇>で囲まれたものを要素といいます.

1	`<span 〇〇="ほにゃらら" >`

このとき上のものは〇〇属性を持つspanタグといいます.
属性にはidやclassものによってはhref,src,alt,widthなどたくさんあります.
使える属性は使いたいタグのリファレンスを参照しましょう.

①HTMLの書き方

ウェブサイトには当然トップページが必要です. まず適当なディレクトリで(デスクトップにでも)「index.html」というファイル名のファイルを新規作成してください. indexはトップページを表すのに使われます. windowsだとエクスプローラーの設定の拡張子を隠すをオフにしてからしてください. 作成したら右クリックして編集(またはエディタ)を選択してください. そしてエディタに

1
2
3

<!DOCTYPE html>
<html lang="ja">
</html>

と書いて保存しましょう. したらばエクスプローラーなどからファイルをウェブブラウザで開きましょう!(以下確認と呼称) 真っ白なページ(ダークモードなら暗いページ)がうつったら成功です. 何もないと思うかもですけどこれが基本です. ここから文字を表示したり装飾したりします. 次に下のように書きます

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>トップページ</title>
</head>
</html>

確認するとウェブブラウザのタイトルバーにトップページと表示されます.

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>トップページ</title>
</head>
<body>
この内容が表示されるぜ!
</body>
</html>

このbodyにウェブサイトに表示されるものを書いていきます.
さぁいっぱい書いていこう!
headタグはサイトの情報を書きます.基本ディスプレイには表示されません.

<br>

を行末につけると改行します.

②装飾しよう!

前項までの状態では
文字がかけても白黒とかで全然見栄えが良くないはずです.
もっと見やすくしましょう.
まずindex.htmlがあるディレクトリにassetディレクトリを作成しまたそこにcssディレクトリを作成します.
次にapp.cssというファイルを作成します.
そしたらばheadタグ内に(titleタグの前でもあとでもいいです)

1	`<link rel="stylesheet" href="asset/css/app.css">`

bodyタグ内に

1	`<span id="title">こっこがわったっしのホームページ</span>`

こうかきます.んでもってapp.css内に

#title{
    color:#ff0000;
    background-color:#00ff00;
    font-size:50px;
}

こう書きます.確認すると文字が赤に!背景が緑に!なる!
css実はこれは

1	`<span style="color:#ff0000;background-color:#00ff00;font-size:50px;">こっこがわったっしのホームページ</span>`

こうもかけますが.
cssにかくのが最近のはやりです.htmlは文書構造だけをかいてすっきりさせて,cssに色や背景を書きましょう.
id属性の中身つまりid名(今回はtitle)はひとつのhtmlファイル内に重複してはいけません.

1
2
3

<span id="title">こっこがわったっしのホームページ</span>
<span id="honbun">このタグのid名はまだ登場していないのでOK</span>
<span id="title">このタグのid名titleはもうあるので不正！！</span>

いくつもの要素に同じスタイルを適用したいけれどid全部変えなきゃいけないの!?という方もご安心を
class属性をタグに宣言することで可能です.class名は複数のタグで重複できるので

1
2
3

<span class="strong">こっこがわったっしのホームページ</span>
<span id="strong">この要素はOK</span>
<span id="strong">この要素もOK！！</span>

こうかける!cssは

1
2
3

.strong{
    font-size:100px;
}

こうです.
cssではid名を持つ要素の装飾は

1	`#id名{スタイルについて書く}`

class名を持つ要素の装飾は

1	`.class名{スタイルについて書く}`

タグ名の要素の装飾は

1	`タグ名{スタイルについて書く}`

です.
スタイルの指定はここに書いた以上にたくさんあります.「css 角　丸める」など単語で検索するとたくさん出てきます.
タグにはどんな属性でも持てますしスタイルもつけられますが実際に動作する際に意味がない(反映されない)ものもあるのでタグのリファレンスを参照しましょう.
ヘッダー(見た目の方の)もcssで要素にスタイルをつけて作ります.

③スマホに対応しよう!

PC版ヴューはヘッダーがあったほうが便利ですがスマホの画面では入り切らないことも多いです.
そこでスマホで見られているときだけヘッダーではなくハンバーガーメニュー(三本線で押すとメニューが画面前面にでてくるやつ)が代わりに表示されるようにしましょう.
下みたいに指定するポジションがかぶってもいいのでまずどちらの要素も普通に書きます.このサイト(現在は使っていません)を例に説明します.

<div id="header">
        <--ここから-->
        <div id="menu"><br>
            <a href="../profile.html"><div class="menu-topic">Profile</div></a><br>
            <a href="../news.html"><div class="menu-topic">News</div></a><br>
            <a href="../evaluation.html"><div class="menu-topic">Evaluation</div></a><br>
            <a href="../articles.html"><div class="menu-topic">Articles</div></a><br>
            <a href="../other.html"><div class="menu-topic">Other</div></a><br>
            <div id="clos" class="menu-topic" onclick="humbmenu_hide();">Close</div>
        </div>
        <div id="smartscreen">
            <div id="humb">
                <div id="humb-cover" onclick="humbmenu_show();"></div>
                <div class="humb-material"></div>
                <div class="humb-material"></div>
                <div class="humb-material"></div>
            </div>
        </div>
        <--ここまでがスマホ用-->
        <div id="widescreen">
            <a href="../index.html"><span class="header-topic" style="color: #23c3ea;">MINFAOX3</span></a>
            <a href="../profile.html"><span class="header-topic">Profile</span></a>
            <a href="../news.html"><span class="header-topic">News</span></a>
            <a href="../evaluation.html"><span class="header-topic">Evaluation</span></a>
            <a href="../articles.html"><span class="header-topic">Articles</span></a>
            <a href="../other.html"><span class="header-topic">Other</span></a>
        </div>
</div>

ポイントはスマホ用とPCようでそれぞれidをつけることです.
ハンバーガーアイコンとメニュー画面は分けて書きましょう.
メニュー画面はPCでは表示しないし,スマホ画面もハンバーガーアイコンを押すまで表示しないのでvisibility=”hidden”にしておきます.
次にbodyの一番下(</body>の直前)に

<script>
    let wsize = window.screen;
    if (wsize.availHeight >= wsize.availWidth) {
        window.document.getElementById("widescreen").style.visibility = "hidden";
    } else {
        window.document.getElementById("smartscreen").style.visibility = "hidden";
    }
    function humbmenu_show() {
        window.document.getElementById("menu").style.visibility="visible";
    }

    function humbmenu_hide() {
        window.document.getElementById("menu").style.visibility="hidden";
    }
</script>

と書きます.scriptタグで囲んだ中にはjavascriptのみを書きます.
何をこのコードがしているかというと…
まずwsizeにいまウェブを見ている人の端末のサイズを格納します.
次に端末の高さが端末の横幅より高いのならid名がwidescreenの要素のスタイルのvisibilityをhiddenにして,
そうでなければスマホ用(ハンバーガーアイコン)を隠します.
あとの２つの関数はハンバーガーを押したときの関数です.
先のhtmlコードのonclick属性の中で指定されます.
これで完成!見た目とかはFirefoxとかChrome等のブラウザをつかってこのサイトを見てF12を押すとこのサイトのhtml,css,jsをみられます.

④外からの見た目をよくしよう!

外からの見た目ってcssでしょ(ﾄﾞﾔｯ)って思っている方それは半分あたりです.
確かにウェブの見た目はcssですが外というのは他のアプリやサイトでリンクを見たときの見た目です.
どうせ作ったらみんなに見てほしいですよね.けれどどれだけ凝ったサイトを作ってもそのアドレスを知らなければ誰も見に来てくれません.
そこでgoogle検索やsnsでのこのリンクの見た目を良くしようということです.
まずgoogle検索などの検索エンジンに対してはheadタグ内で↓を書きます.

1
2
3

<meta name="author" content="自分のハンドルネーム">
<meta name="description" content="サイトの説明">
<meta name="keywords" content="サイトのキーワード1, キーワード2, キーワード3">

キーワードにはこのサイトが出てほしい検索ワードを書きましょう.
サイト名やジャンルです.かといってたくさんのワードを書けばいいというものではありません.サイトに関係ないものなどが大量に含まれているものは順位が下がりやすいです.
あと最近の検索エンジンは内容も見るので良質な記事や文章を書くのが大事です.もちろん関係ない単語を大量にいれてvisibility=”hidden”にしてもだめですからね！
次はsnsに対応しよう!

これはSlackでの例です.ほかのSNSでもこんな感じで見られます.リンクを出すだけで絵とかが出てくる!
そのためにはheadタグに下を書きます

<meta property="og:title" content="タイトル">
<meta property="og:type" content="website">
<meta property="og:description" content="説明">
<meta property="og:url" content="サイトのURL">
<meta property="og:site_name" content="サイトネーム">
<meta property="og:image" content="サムネ画像(youtubeとかでよくある)">

そして

1	`<!DOCTYPE html>`

を下のように変更します.

1	`<!DOCTYPE html prefix="og: http://ogp.me/ns#">`

これで完璧!

まとめ
いかがでしたか？
結構早足だった気がしますが皆さんの助けになれば幸いです.
これからもちょくちょく頼まれたら書こうと思うので次回もどうぞご期待下さい！

アドベントカレンダーウェブ開発

アクセス数

最新記事

記事のアーカイブ