ホームページを作った
ブログ
2018/03/30
ホームページをついに作りました!
ずっと作りたかったんだけど過去に1回断念してやっとできました!
・動機
今後サイトを作る機会があったときにHTML,CSS,サーバー関係などを最低限出来るようにしておきたかった。
自分の作ったものや文章などなどを1つのサイトにまとめていつでも見れるようにしときたかった。
主にこの2つくらいだと思います。あとは春休みだったので何か作っておきたいなぁーとぉ

・サイト制作備忘録(自分用ですが参考程度にどうぞ)
サイト制作の全体的な流れとしては
HTMLで表示する要素を書いていく、またCSSを適応する際に目印となるID(id)やクラス(class)というものを必要な要素につけていく。

CSSでHTMLで記述した要素のスタイル(表示位置や色、縁取り、多少の動きなど)を整える。この際にHTMLに記述したIDやクラスを使って反映させる要素を指定する。
大体ここまででこのサイトくらいのものは簡単に作れると思います。中にプログラムっぽいプログラムを入れないでただ見れればいいのであればここまでで十分です。
ここからはサイトにプログラムを組み込みたい場合に必要となります。おみくじなどを作りたい場合は必要になります。(個人的にはif文を使いたければこれ以降が必要になるっていうとわかりやすい気がするのですがわかりにくいですねごめん)
javascriptで演算やif文などを実行させ、HTML内の要素の中身の変更、メッセージダイアログなどに結果を出力する。
↓(ここからは自分もほとんどわかってないので参考にしないほうがいいかもです)
サーバーやcookieにアクセスして値の保存などを行いたい場合はCGI,PHPなどを書く

-HTML
HTMLは書きたいものに適した段落、リスト、画像、リンクなどのタグ(<p>,<ul>,<a>など)を使ってサイトに表示する要素を羅列していけば大丈夫です。
自分は『スラスラわかるHTML&CSSのきほん』という本でサイト制作の基本的な流れとHTML,CSSの基礎を学びました。
ちなみにブランクはあるものの2017/11/01にこの本を手にし、2018/03/13にこのサイトが完成したっぽいです。結構かかってますねぇ、、

-CSS
自分はここで「htmlでいけるなぁーとかおもってたらcssがこんなむずかったんんんん」ってつぶやいてました。
ちなみに「茨城」は「いばらき」と読みます。
HTMLのheadタグ内に<link rel="stylesheet" type="text/css" href="CSSファイルの場所">と記述してHTMLにCSSを適用させます。
CSSの進め方としては、スタイルを適応させたい部分を<div class="適当な名前">と<div>で囲んでCSS内で
.つけた名前{
命令
}
のようにしてdivで指定した箇所にスタイルを適用させます。
ここで絶対つまずくのがfloatです。つまずかなかったら100ptゲット!ちなみに「つまずく」のほうがいいけど「つまづく」でもいいらしいです。
このサイトを見ると左のメニューとこの文章が書いてある枠で大きく2つに分かれています。これはfloatではなくflexというものを使っています。調べてみたらfloatよりも簡単そうでしたし簡単でした。よかったら調べてみてください。floatの弱点としては名前通り浮いているのでそのあとの要素が食い込んだりいろいろめんどいですよくわかりませんごめん。
あとはclassとidどっちを使えばいいかとか迷うと思いますがCSSでの命令上問題がなければclassを使ってればいいと思います。複数回使えるので便利です。
あとmarginとpaddingの違いもよくわかんなくてどっちでもいいだろうとなるかもしれませんが見た目一緒でも要素の大きさが変わってくるのでborderなどで要素に枠をつけると違いがわかります。意外と大事でした
colorに関してですが、#BDBDBD;のように色コードで書いてもいいのですがめんどくさかったらred,black,white,grayなどと書いてもいけます。

-javascript
「javascript」と「java」は別物らしいです。めんどかったら「js」って略そう!(僕はJCのほうが好きです)
CSSを突破してここまでたどり着いたらもう普通のプログラムみたいなものなので特に難しいことはないと思います。普通に命令の形が特殊かも(?)自分は使いやすいと思いました。
javascriptはHTML内で<script type="text/javascript" src="javascriptファイルの場所"></script>のように書くと指定したjavascriptをHTML内から呼び出すことができます。
また、ちょっとしたプログラム(おみくじなど)、ほかのHTML内で参照することのないプログラムの場合はHTML内に<script type="text/javascript">と</script>と書いてその間にjavascriptを記述してしまえば大丈夫です。この方がまとまってて楽ではあります。
CSSまでは特にプログラムの順序などといったものはほとんど気にせずにできたのですが(物を配置していくだけなので)javascriptは普通にプログラムなので順序が大切になります。
プログラム内での順序は特につまずかないのですが例えばdocument.getElementById("ID名").innerHTML="";のような感じでHTML内の特定の要素の内容を変更するjavascriptを書いたとき、<script type="text/javascript" src="javascriptファイルの場所"></script>をHTML内のheadタグ内などに書いても適応されません。
理由はその特定の要素がjavascriptを実行した後に生成されてしまうからです。これでは意味がありません。なのでこのような場合はプログラムの最後(たぶんbodyタグ内)でjavascriptを適応させる必要があります。
ここまでなんでもhead要素内に書いとけばよかったので結構うぅんってなりました。

-CGI
このサイトでカウンターをつける際にサーバー上のファイルのアクセス、書き換えを行うためにCGIというものを使用したのですがまだよくわかりませんごめん
PHPのほうがいいのかも
このブログページをもっとちゃんとさせるためにもPHPが必要っぽいのででき次第いろいろ書いておきたいと思います。<<スクラップ一覧に戻る
2.0.0
©2018 SqOc