LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@B3LYP(con)

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

Last updated at Posted at 2019-12-12

要点

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

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は必修");

WebアプリケーションってHTML、CSS、JavaScript、なんか言語のちゃんぽんなの？

誰か教えてクレメンス

供養

html

top

top.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

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の無料サーバーを借りて、大まかなレイアウトをして、

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

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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?