2週間でホームページ vol.失敗編

#要点

これからホームページ作るんだ！って人向け

frameset廃止に伴う供養

iframeで憤死

flexboxと言うdisplayはない

ソースコードは供養にて

# 本題

結論的には1，2週間で1からホームページは割と難しくはない

そもそもHTMLのコードは多分プログラミングと言う括りの中で比較的簡単に入る

勿論CSSとかも

**ただし、JavaScriptを使わずに作ろうとはしないでほしい**

ほんとにこの一言に尽きる

まぁ、最近の本でJavaScriptを使わないホームページ作成系の本は多分少ないだろうから大丈夫だとは思う

**まじでホームページ作成=JavaScriptの学習**くらいの気概がいい

あと**`import`**は便利だから覚えておいた方が良いです

たまに書いてない本があるんですけど、**`import`**超便利です

CSSを分割できるので、管理が非常にしやすいです

おっと、話を戻しますネ

今の環境でJavaScriptを使わないで作るのは本当に修行と変わらないです

じゃぁ、昔の環境ならJavaScriptを使わないで作るのは苦行じゃなかったの？と聞かれれば

**苦行じゃなかったです**

そう**`<frameset>`**があった頃の環境はネ

多分、JavaScript使って云々って言えば訪問者のカウンター作ったりとか、

そんなことしたい人が学ぶ言語ってイメージが少なからずあったことも理由な気がします

勿論、今でも`<frameset>`は使えるし、

ズルというか記述を弄ればHTML5とHTML4を混在させることもできるらしい ~~知らんけどな~~

とはいえ、HTML5では廃止が決定したんで使い続けても正直……

```
（　＾ω＾）・・・(廃止と言うより`<frameset>`が`<iframe>`に統合されるってニュアンス)
```

この`<frameset>`がなんで便利かってホームページをパーツに分割して作成できるんですよ

ヘッダー部分だけのHTML、メニュー部分だけのHTML、フッター部分だけのHTMLとかとか

パーツを作成して、それを最後に一枚に統合する

これの利点ってHTML一枚一枚のコードの総量を減らせられるし、変更部分を探して修正するのが楽っていうネ

何より、リンク先をメインコンテンツに指定すればページ全体の読み込みが必要ないから反応が早い(体感かも)

HTML5の環境で同じことは出来はします

`<iframe>`を利用して似たようにするってやつ

これレスポンシブルにしようとするとですね、**JavaScript**を使わないと綺麗にいかないです

今回試してないけれど、もしかすると`margin`とか`Pedding`を利用すれば使わなくて済むかもしれない…

が、おとなしくJavaScriptを勉強しましょう

むしろ使えた方が後々できることが広がるので

まとめると

```matome.css
@charset "utf-8";

@import url("importは超重要");
@import url("JavaScriptは必修");
```
<br>
WebアプリケーションってHTML、CSS、JavaScript、なんか言語のちゃんぽんなの？

誰か教えてクレメンス


# 供養
##html
### top
![top.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293790/ef3202f7-ddd0-0806-d8dc-d9ac88214080.png)

```top.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>研究生の練習帳</title>
        <link href="https://fonts.googleapis.com/css?family=Bitter:400,700" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
    </head>
    <body id="top">
        <header>
            <div>
                <img src="image/logo_shin.png" alt="nixtusi" id="top_pic">
            </div>
            <div class="Text">
                <p>
                    このサイトは練習用に開いたサイトです<br>
                    元や現研究生がわちゃわちゃしているネタ帳です<br>
                </p>
            </div>
            <div class="Enter">
                <a href="index.html">
                    <p>Enter</p>
                </a>
            </div>
        </header>
        <footer id="footer">
            <p>RDCL@baged</p>
        </footer>
    </body>
</html>
```
### index
![index.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293790/f6509253-4d72-13f7-914a-fd731554769b.png)

```index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>研究生の練習帳</title>
        <link href="https://fonts.googleapis.com/css?family=Bitter:400,700" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
    </head>
    <iframe src="home.html" name="main" id="main">main_contener</iframe>
    <body>
        <header id="header">
            <div>
                <img src="image/logo_shin.png" alt="logo_shin" id="logo">
            </div>
            <nav id="up">
                <ul>
                    <li>
                        <a href="home.html" target="main">Home</a>
                    </li>
                    <li>
                        <a href="about.html" target="main">About</a>
                    </li>
                    <li>
                        <a href="mail.html" target="main">Mail</a>
                    </li>
                    <li>
                        <a href="access.html" target="main">Access</a>
                    </li>
                </ul>
            </nav>
        </header>
        <aside id="side">
            <ul id="right">
                <br>
                <div>
                    <img src="image/member.png" alt="member" id="member">
                </div>
                <li>
                    <a href="???.html" target="main">???</a>
                </li>
                <li>
                    <a href="???.html" target="main">???</a>
                </li>
                <li>
                    <a href="???.html" target="main">???</a>
                </li>
                <li>
                    <a href="???.html" target="main">???</a>
                </li>
            </ul>
        </aside>
        <footer id="footer">
            <p>RDCL@baged</p>
        </footer>
    </body>
</html>
```
##CSS
### CSS の総括
```style.css
@charset "utf-8";

@import url("head.css");
@import url("main.css");
@import url("foot.css");
@import url("side.css");
@import url("etc.css");
```
### header の部分
```head.css
@charset "utf-8";

/*headerの大本*/
#header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
}

/*メニュー部分*/
#up {
    text-align: center;
}

#up ul {
    margin: 0%;
    padding: 0%;
    background-color: black;
}

ul li {
    list-style: none;
    display: inline-block;
    font-size: 140%;
    width: 20%;
    font-family: 'Bitter', serif;
}

```
### maincontents の部分
```main.css
@charset "utf-8";
/*インラインフレームにする*/
#main {
    position: absolute;
    top: 130px;
    left: 230px;
    width: 100%;
    height: 75%;
    border: 1;
}
```
### footer の部分
```footer.css
@charset "utf-8";

/*footerの大本*/
#footer {
    position: absolute;
    background-color: black;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 35px;
    text-align: center;
    font-size: 90%;
    color: white;
}
```
### sidemenu の部分
```side.css
@charset "utf-8";
/*サイドメニューを作成するぞ*/
#side {
    position: absolute;
    top: 160px;
    left: 5px;
    height: 50%;
    width: 200px;
    border: solid;
}

#right {
    display: block;
    list-style: none;
}

#right li {
    background-color: black;
    font-size: 200%;
    font-family: 'Bitter', serif;
    height: 100%;
    width: 100%;
    margin: 10px;
}
```
###その他の設定
```etc.css
@charset "utf-8";

/*壁紙部分*/
body,html {
    background-color: lightgray;
    height: 100%;
    margin: 0%;
    padding: 0%;
    overflow: hidden;
}

/*画像に関する設定*/
#top_pic {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    height: 80%;
}

#logo {
    display: block;
    margin-left: 5%;
    width: 345px;
    height: 93px;
}

#member {
    display: block;
    width: 109px;
    height: 25px;
}

/*文字に関する設定*/
div.Text {
    font-size: 120%;
    text-align: center;
    font-family: 'Bittr', serif;
}

/*Enterの設定*/
div.Enter {
    font-size: 400%;
    text-align: center;
    font-family: 'Bittr', serif;
}

/*クリックの挙動*/
a {
    color: #3583aa;
    text-decoration: none;
}

a:hover {
    color: #084aa6;
    text-decoration-line: underline;
    background-color: whitesmoke;
}

a:visited {
    color: #788d98;
    text-decoration: none;
}
```

#後語り
色々な背景とか諸々

## 始まり
うちの研究室に来る生徒でプログラミングがしたい、

と言うやつの殆どがホームページが作りたいと言い出す件について

~~自分でやれ、とか、Fortranのプログラミングを学べよ~~

恥ずかしながら、ホームページなんて高校生の時にちょこっとテンプレートを弄ってたくらいで、

特にアドバイスができず、投げやり気味に、本のコピペでもやったらいいんじゃないと言えば、

何の本をすればいいんですかね、とか飛び出る始末

~~私が知るか~~

そんなわけで、死んだ目しながら土台になるホームページの作成を開始した

## 計画

FC2の無料サーバーを借りて、大まかなレイアウトをして、

そのホームページの一部を各々生徒に担当させるというもの

分かりやすく言うと、メニューバーのリンク先を作らせる、という感じ

三分割フレームで作ればいいだろ(地獄の始まり)