自分もくじ
ホームページ作成についていろいろ勉強したいけど勉強した先から忘れるから備忘録として書いてく。
とりあえず自分でできるといえるのは
- HTML （むっちゃ昔懐かしい）簡単な骨組み
- CSS id,classごとの色変えたり大きさ変えたり
- JavaScript 正直サイト見ながらじゃないとつらい
うーん、頑張ろう
カテゴリについて
-
HTMLの基本：基本的なこと。そのまま（笑）自分の理解をまとめるためなのでわかりにくいとかここを詳しく書いて欲しいとかコメントしてもらえると嬉しいです。
-
勉強関連：HTMLやCSSなんかの勉強したことを書いたり。
- 趣味：趣味に関する記事。増えてきたら小分けしていこうかなあ。
- 便利：タグ一覧とか、あとでカラーコードを作ったらそのページにリンクしたりする予定
- 制作物宣伝：あれこれつくったよー！見てー！って宣伝したいときに。
以上。増えたら更新していきます！
最近の学習
とりあえず勉強中。
Javascriptを勉強したいです。一応ダイスは作れるようになったんですけどね。
動画をホームページで流せるようにするのもやってみたいです。あれはHTML５でやるんですが。
持ち運べるPCがあれば外でも勉強できる！と思ったんですが、やるかどうかはわからないですよね、でも頑張ります。
さて。最近の勉強。
・CSSは１つのページに複数使用できる
わりと大きいです。
- 基本構造
- そのページ特有のCSS
これらをそれぞれ別のにかけるわけです。
トップページだけのCSSなんだよなあとか思いながら長いCSSを増やしたり、別々のCSSに同じものを書いたりしてたんですけどいらない手間でしたね。
・パンくずリストは手書き
すごくいいよーと聞いてたのでなにかコードで改装が表示されるのかと思ってたんですが、あれただの手書きですね。
小説サイトの方だとちょっと量が多いのでやっぱり不採用かなあと思ってます。でも確かに戻りやすい。
就活用として作ってる方には採用予定です。海藻少ないですし。
今作ってるサイトとは別にポートフォリオサイトができる予定なんですが、そっちもきっと採用。
ポートフォリオとして使えるサイトを数点作りたい。ハロウィンしたい。
・動画作りたい
サイトに動画が流せるならやってみたい→でも他人の動画を勝手に使うわけには→じゃあ作るしか？
いつも通りの思考回路です。これが色々手を出す理由です。
なにか、会社説明動画みたいなのを作ってみたいですね、架空会社の。
もっとしっかり更新できるようにしたいけどうっかりしてました。記事の概要とか色々カスタムできるようですが、それがわかってないので勉強したら記事が変わるやも。
あと自分のためのタグ辞典作りましょう。カラーコードとか。
1タグ1記事というより１つのことをやるためのコードを1記事ですね。まずはボックス二つ並べます。
お久しぶりの記事。
ブログを継続できない人間ですorz
こう、覚書として使おう！と思うと難しいですね。好きなこと書いてみようかなあ。
カタカタタグを打つのも楽しいんです。アロマも好きですし、小説を読むのも好きなんですよね。
そういう好きなもの紹介の記事を書くのもいいかな。
そういえばちゃんとwebデザイナーの勉強を始めました！
タグを打つだけじゃなくて、今はillustratorやPhotoshopの勉強中です。楽しい！
絵を描くことも写真を撮ったり加工するのも好きなのでこんなに楽しい勉強できるの、素敵だなあと。
そろそろこのブログのデザインも手を出せればいいな。
HTML5＿埋め込み式
サイトに画像を表示したい場合はimgタグを使います。
このタグの場所にURLの画像を貼り付ける形ですね。
では、画像以外は？
ということで調べました！HTML5から画像以外もペタペタ貼れます！
- video
タグの文字でもわかるかな？動画やオーディオファイルを読み込んで再生するタグです。
<video src="URL"></video>
このタグの間に書いた文字はvideoタグが実装されていない、HTML5が使えないブラウザのときに表示されます。「お使いのブラウザでは動画を再生できません」などの説明を書いておくといいと思います。
サイズ変更は画像と同じくwidth、heightで指定します。
動画が表示されない時に表示したい画像はposter="URL"で指定します。
他にもループ再生するloop、自動で再生させるautoplayなどの属性も持ってます。
- audio
オーディオ、そうですね、音楽ファイルなどの再生に使用します。
サイト内に音楽を鳴らすの前はやったなあ、でもこれはHTML5から追加だから別の方法でやってたのかな？
<audio src="URL"></audio>と表記します。
属性はvideoとほとんどいっしょかな、サイズなんかはないです。
キャンバスにグラフィックを描きます。というとimgタグと一緒かな？と思いそうですが、文字通り「描け」ます。
絵を描く人ならわかりやすいんですが、レイヤーといって画像を何枚も重ねたり、図形を書いたりと色んなことができます。
javascriptを併用してゲームを作ったりもできて楽しいです。
属性はwidthとheight。canvasの大きさを変えられます。
- area
画像内にハイパーリンクを指定できるようになります。
mapタグの中で使用するタグです。
coords属性でリンクの座標を指定、shape属性でリンクボタンの図形を指定します。
<img src="URL">
<map name="NAME">
<area shape="rect" coords="座標" href="URL" alt="説明">
上記は四角形のリンクボタンになってますね。コードで指定した座標を通るその図形がリンクボタンになっている形です。
地図などの画像を表示して、それぞれの地域や県をクリックするとその説明ページに飛ぶようにしたい場合などに使えます。
HTML5＿要素
<!DOCTYPE html>
……突然何をしているんだといわれそうな唐突なタグ！
上のタグはHTML5ですよーっていう宣言です。
今回はHTML5のお話をしたいので宣言タグで宣言してみました。
ちなみにhtmlの部分は大文字でも小文字でも反応します。全部大文字の方が見栄えは良いかなって思うんですけど、つい小文字にしてしまうクセが。
さっそくbodyに使われるHTML5から追加された要素をちょっと見ています。
- header
headじゃなくてheaderです。
ページ１つに1度だけ使用できる要素です。頭の部分ですからね、ケルベロスじゃないんですから。
普通は見出しをいれたりします。サイトの名前だったり、目次だったり、検索フォームだったり、ロゴだったり。
はてなブログでも上に公式のロゴやメニューが表示されてますね、それですね。
- footer
headerが頭ならfooterは足です。たぶん。
最期に記すのでサイトの著者名や論文みたいなものだったら関連文書、リンクなどのそのページに関する情報をのせます。利用規約とか奥付ですね。卒論で参考書籍を書きましたけどそれみたいな感じなんですかね。
教科書には絶対最後に表示する必要はないよってあります。
つい、サイトの一番下にあるマップみたいなものを思い浮かべてたんですけど違うってことですよね……。
- nav
そのまんま、ナビゲーションです。なびげー所のシステムを起動しましょう！
サイト内のコンテンツ移動のための物を置きます。
昔のサイトだとABOUTとかLINKとかある奴ですかね、今もあるんですかね。
会社のホームページだと「企業理念」「業務概要」「コンタクト」なんかがあったりしますね。
- section
セクションです。終わり。
それくらいそのままです。テーマごとにグループ化したものです。
序論、本論、結論、とか序章、第1章、最終章とか春、夏、秋、冬、とかそういうテーマが変わった場合にそれぞれをまとめる感じですかね。第1章とかがテーマ変わってるのか怪しいですけど。
テーマとか関係なくグループ分けするならdivです。みんな大好きdivさんを使うのです。
- article
独立したコンテンツとして使用します。ユーザーコメントや雑誌や新聞などの、そのページの別の情報とは切り離されたものを表示する場合ですね。
理解が追い付いてないので使ってないんですが、ブログ記事を表示する場合って切り離されているってするんですかね、例文がブログだったんですが。
- aside
メインコンテンツ以外です。
漫画の柱に書いてある文字とか、雑誌の側面生地とか、サイドバーとか、そういうものです。
広告もそのサイトのメインとは関係ないのでここに入りますね。
とても簡単に言えば「その他」ってことです。
この中で私が使うのはnavとheaderかなあ。
アロマテラピーの話
お勉強ばっかりで疲れた！ので趣味の話。
アロマテラピーといえばゆったり匂いを楽しむ、そんなイメージかな？と思ってます。
精油を使ってリラックスする方法なんですが、使い方は色々ですよね。
私は最初はアロマポットに垂らして、って感じでしたけど外でも楽しめるようハンカチに垂らしたりしてました。
今はアクセサリー型のアロマポットがあるんですよね、便利～！
筒タイプのがかっこいいなーと思うんですが、小さな木のボールなどをジュエリークリップに挟んでも素敵なのでは？と最近試したくてしょうがない……。
精油ではないですが、アロマを手軽に楽しめるように百均でもブレンドされたものが変えちゃう時代ですからね、色んな楽しみ方をしてみるのは良いことかも。
リフレッシュしたいときはミントやローズマリー、緊張してしまうようなときはラベンダーやカモミール・ローマンを持ち運べるハンカチやアクセサリー型のポットに着けて持っておけばそっと香りをかぐだけで一息つけるのでお勧めです！
あ、でも精油に触れてしまう場合は柑橘系は気を付けてくださいね、光毒性といって柑橘系を触って日光に当たったら強い日焼け、火傷のようになってしまうこともあるので光毒性がないもの（そもそも光毒性がでない柑橘系、光毒性を取り除いた精油）かどうかは確認してください。
昔世界仰天ニュースだったかな、テレビ番組でレモネードをプールサイドで飲んだ子供たちが～っと光毒性について取り上げていて、すごく怖かったです……。精油じゃなくても紫外線に当たってはいけない薬もありますし、あのテレビ番組みたいに果汁をしっかり使った飲み物でも危険ですからね、気を付けないとって思いました（汗）
HTMLの基本・改＿よく使うタグ一覧
タグは大事です。。。
タグでウェブページはできてます。
今回は私の覚書としてよく使うなーと思うタグを紹介！
説明も入れてるから結構長いですね……
- HTML：HTML文書
HTML5では<html>タグで使用する言語を指定します。しなくても書かれている言語で大抵表示するんですけど、検索サイトさんが分類するときに分かりやすいというやさしさです。
検索サイトさんに優しくすると検索しやすくなって見てほしい人に見てもらいやすくなります。検索サイトに優しくするというか、サイトがどんなサイトでどういう人向けなのかを明確にするって感じですね。
<html lang="ja">：日本語のサイトです。
lang：言語を指定。
ja：日本語
en：英語
zh：中国語
ko：韓国語
es：スペイン語
it：イタリア語
ru：ロシア語
de：ドイツ語
fr：フランス語
これらは言語コードです。国コードというものとは表記が違ったりするのでここにない国の言葉を指定するときは言語コードで調べるといいと思います。
- HEAD：ヘッダー。HTML自体の情報を記述
色々情報を記述していく場所です。タイトルとかメタデータとか。検索サイトに情報を伝えるために必要な場所として覚えておいてください。
- BODY：ボディ、本文。ここはそのままです。
- TITLE：タイトル：検索サイトの検索結果に表示されるのでわかりやすさを心掛けましょう。
- A：ハイパーリンクのアンカー
これを使わないウェブサイトはないと思います。
ページ間を移動するだけじゃなくてページ内の移動にも使います。すごく大事。
<a href=""></a>：基本形です。
このタグの間に文字や画像やボタンを入れてリンクボタンにします。閉じるのは</a>だけで簡単ですね。
上半身の方の<a href～のaの後ろは半角スペースです。タグに全角スペースは基本的に使わないので気を付けてください。
せっかく作ったのに反応しない場合、ここが全角になっている場合もあります。私は昔結構やらかしました……。
hrefはリンク先のURLを指定しますねっていう属性と呼ばれるタグの付属品です。これがないとリンクできないくらい大切です。
<a href="URL">
<a href="#ID">
おっと？
上の方は普通にURLでリンクしていると思ってください。
問題は下ですね、＃記号は属性と呼ばれるものの中にある「id属性」にリンクを張るために使います。
つまり、このidをページ内のどこかのタグに着けておくとこのリンクボタンを押せばその場所に飛ぶことができます。よく「pagetop」とか「上に戻る」っていうボタンがありますよね、あれです。
この二つは合体もできます。URLのページのidのところに飛ばせます。
- DIV：分割テキスト、エリア分け
HTML5になってからむちゃくちゃつかうようになりました！
これは意味を持たないタグってやつです。要素をグループ化してそのdiv内すべてにCSSで色々装飾するときにとても便利です。
でも使い過ぎると見にくいので他に使えるタグがあったらそれにIDやCLASSを指定してCSSで使った方が綺麗にまとまりますよね、見にくい！って怒られないように他の者も使ってみた方がいいかも。
でもすごーく便利です！
- META：文章情報
metaはHEAD内に記述します。
文字コードをここでしていできます。HTML5は文字コード「UTF-8」を指定するのでここに書きます。保存するときにテキストの文字コードもこれに合わせておくようにしないと文字化けするので気を付けてください。
<meta charset="utf-8">：これは閉じる足を持ちません。最後のマトリョーシカ（別れない奴）と思ってください。
<meta name="description" "content="情報記入">
上記はページの概要を記しておくものです。情報記入とある場所にページの概要を記入します。70～80文字程度が好ましいです。これ使ったことないんですけど使った方がいいんですかね？
- LI：リスト項目
今も使ってますが「・」とか数字で箇条書きするときに使います。
<ul>
<li>箇条書きする内容</li>
</ul>
こんな感じで使います。
ulは順序が重要でないもの、「・」が頭につきます。
olは数字が頭につきので順序立てられたリストに使用します。手順なんかはこっちですね。
箇条書きの内容は<li></li>で囲みます。
<li>ひとつめ</li>
<li>ふたつめ</li>
というように一つ一つ囲みますが、</li>がなくても反応はしてくれます。
olで数字を途中から始めたい場合はstart="始めたい数字"という属性を入れます。
逆の数字順（最後が1）にしたいときはreversed属性を使います。
<ol reversed="vreversed" staer="5">
上記のように書けば5から1まで数字が一つずつ減っていきます。
- P：段落
昔は<p>で段落変えてたんですけど、<p></p>で一つの段落とするようになりましたねえ。年がばれそう。
所謂意味のある改行というやつです。ですので<p>と<p>の間には1行分のスペースができます。
CSSでスペースの調整もできるのでこれで長い文章の1文は区切るようにしましょうって教科書にあったんですけど、なんだろうすごく違和感……。それは同じ段落の話では？ってなっちゃうんですけど誰か詳しいこと教えてほしい。
- BR：改行
小説書いたり説明文を書くときに本当に利用します。ありがとう改行タグ！
強制改行させるタグなので<p></p>で囲まれてる場合は</p>で段落変わるのでそこにはなくても大丈夫です。
Pのところに書いたように、あまり使うなって言われてますね、タグを増やし過ぎるなってことかなあ。
行間が空かないので見出しにサブタイトルつけるときなどに便利みたいです。
- LINK：定義
とても簡単に言えば別のファイルで作ったCSSにリンクを張る時に使います。
<link rel="stylesheet" href="URL">
ちなみにHTML5ではこう書きますが、それ以前はhref=""の後にtype="text/css"を必ずつけてました。HTML5でもつけてもいいんですけどなくてもいいので書かないんじゃないかな。
余談ですがCSSはHTMLに直接各方法もあります。1ページにしか反映しなくて少ない量ならそれで済ませることもあるってことかな。
- IMG：画像表示
画像を表示したい場所に画像を張ります。
<img src="URL">：このタグの位置にURLの画像が貼れます。
画像タグには属性がたくさんあります。このタグで大きさなども変えられるってことです。
width、height：その名の通り幅と高さを変えます。
alt：画像が表示できない場合に表示されるテキストです。ネットワークが遮断されたり、URLをうっかり間違えてしまって画像が表示されない、そんな場合にここに書いたテキストがでるので画像の説明を書きましょう。
なお、幅と高さはCSSでも変更できるので最近はこっちでデザインは全部やってくれって感じなんでしょうね。
- TABLE：表組み
昔はよく使ったなあ……（現実逃避）
そのまま表を作成するタグです。
<table>
<tr>
<th></th>
<td></td>
</tr>
</table>
これで1行2列の表ができます。
thは文字等を入れ、tdにはデータを入れると聞いたんですが、教科書によっては文字列もtdに入れてますね。どちらも文字でも数字でも表示できます。画像でも大丈夫です。
trは1行を表すので行を増やすときは此方を増やしてください。
1行の中の列数はすべてそろえる必要があります。
colspanという属性を使って列を結合させたりするときは結合した列数と横の列数を数えてください。
行を結合する場合はrowspanを使います。
※番外？
<!-- -->
注釈として使います。「<!-- 」と「 -->」の間にコメントを書いておけば外からは見えません。でもソースを表示させたら見えちゃうので一緒に開発してる人に分かりやすくするためとか、書いているものを場所に分けてる時の始まりの指定とか、そんな感じで使うのかな？
HTMLの基本・改＿その2
前回からの続きなので連続で投稿です！
メモ帳で簡単にウェブページを作っていくよ！
今回は前回の真っ白なページに文字を表示できるようにしていきます。
とりあえず↓↓
簡単に言えばこれだけ。
新しいものは「<title>」という部分が追加されてます。
<title></titile>の間の行に書いてある通り、タブに表示される名前がここです。
このブログなら「NotE覚書的な奴！」って表示されてるね、ブックマークしたときもここに書いてある名前で表示されるよ。
<body></body>の間の行には「本文を書くところ。」と書いたけどここに書いたものが真っ白だったところに表示されるよ。
構造の話になるけど、一番最初と一番最後は<html>と</html>になってるね。
HTMLのこの<>をタグっていうんだけど、タグの基本は入れ子式です。
マトリョーシカでいえば<html>が上半身で</html>は下半身。だからこの間にちゃんと入れていかないといけないんだけど、
ここで書いているときに<head>と<body>は別々に閉じてるね。
これは表示する部分が違うからそうなってます。<head>の中にはタブの部分に表示する<title>とか装飾に使うCSSというものを引用したりするためのものが色々書かれます。
でも、これは本文に文字として表示されるわけではないので<body>とは別になってます。
<body>はその通り本文、体の部分。
この中でも入れ子式はそのままです。
今は（HTML5では）使われてないタグでの例だけど
<b>
<i>
文字が太くなってナナメに表示されます
</i>
</b>
上のタグは正しい例です。ちゃんと<i>が<b>の中に綺麗に収まってて、その二つが反映される文章は<i>の間に収まってます。
<b>
<i>
文字が太くなってナナメに表示されます
</b>
</i>
こうなると<i>よりも</b>の方が大きいマトリョーシカと思ってもらえるとわかりやすいけど、<b>は完成するけど<i>のマトリョーシカは合体できません。足がどこかいってます。
だから<i>は反映されない、ということになっちゃいます。
とりあえずタグの頭を連続で二つ使ったら中側の方から終わらせてあげるというのを覚えておくとそれだけで理解できてるってことになります！
たぶん！
