要点
これからホームページ作るんだ！って人向け
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を勉強しましょう
むしろ使えた方が後々できることが広がるので
まとめると
@charset"utf-8";@importurl("importは超重要");@importurl("JavaScriptは必修");
WebアプリケーションってHTML、CSS、JavaScript、なんか言語のちゃんぽんなの？
誰か教えてクレメンス
供養
html
top
<!DOCTYPE html><html><head><metacharset="UTF-8"><title>研究生の練習帳</title><linkhref="https://fonts.googleapis.com/css?family=Bitter:400,700"rel="stylesheet"><linkhref="css/style.css"rel="stylesheet"></head><bodyid="top"><header><div><imgsrc="image/logo_shin.png"alt="nixtusi"id="top_pic"></div><divclass="Text"><p>このサイトは練習用に開いたサイトです<br>元や現研究生がわちゃわちゃしているネタ帳です<br></p></div><divclass="Enter"><ahref="index.html"><p>Enter</p></a></div></header><footerid="footer"><p>RDCL@baged</p></footer></body></html>index
<!DOCTYPE html><html><head><metacharset="UTF-8"><title>研究生の練習帳</title><linkhref="https://fonts.googleapis.com/css?family=Bitter:400,700"rel="stylesheet"><linkhref="css/style.css"rel="stylesheet"></head><iframesrc="home.html"name="main"id="main">main_contener</iframe><body><headerid="header"><div><imgsrc="image/logo_shin.png"alt="logo_shin"id="logo"></div><navid="up"><ul><li><ahref="home.html"target="main">Home</a></li><li><ahref="about.html"target="main">About</a></li><li><ahref="mail.html"target="main">Mail</a></li><li><ahref="access.html"target="main">Access</a></li></ul></nav></header><asideid="side"><ulid="right"><br><div><imgsrc="image/member.png"alt="member"id="member"></div><li><ahref="???.html"target="main">???</a></li><li><ahref="???.html"target="main">???</a></li><li><ahref="???.html"target="main">???</a></li><li><ahref="???.html"target="main">???</a></li></ul></aside><footerid="footer"><p>RDCL@baged</p></footer></body></html>CSS
CSS の総括
@charset"utf-8";@importurl("head.css");@importurl("main.css");@importurl("foot.css");@importurl("side.css");@importurl("etc.css");header の部分
@charset"utf-8";/*headerの大本*/#header{position:absolute;top:0;left:0;width:100%;height:150px;}/*メニュー部分*/#up{text-align:center;}#upul{margin:0%;padding:0%;background-color:black;}ulli{list-style:none;display:inline-block;font-size:140%;width:20%;font-family:'Bitter',serif;}maincontents の部分
@charset"utf-8";/*インラインフレームにする*/#main{position:absolute;top:130px;left:230px;width:100%;height:75%;border:1;}footer の部分
@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 の部分
@charset"utf-8";/*サイドメニューを作成するぞ*/#side{position:absolute;top:160px;left:5px;height:50%;width:200px;border:solid;}#right{display:block;list-style:none;}#rightli{background-color:black;font-size:200%;font-family:'Bitter',serif;height:100%;width:100%;margin:10px;}その他の設定
@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の無料サーバーを借りて、大まかなレイアウトをして、
そのホームページの一部を各々生徒に担当させるというもの
分かりやすく言うと、メニューバーのリンク先を作らせる、という感じ
三分割フレームで作ればいいだろ(地獄の始まり)