初心者のタグ入門講座?

2019年5月3日

自分用ですみません

自サイトを作るにあたって、いろんな方のサイトでカスタマイズの方法を教えていただきました。
でもそのほとんどが「ここに、これをコピペするだけでOK♡」というものを、「はいわかりました!」と、そのまま使わせていただいてしまったので、ほとんど知識がありません。

専門用語もわかりません。意味も使い方もわかりません。
若い頃にサイトを作ってオリジナル小説を書いていた頃は、「タグ入門」みたいな分厚い本を買って、それとにらめっこしながら作っていましたが、今は全然覚えていません。
そしてずっと、デスクトップPCの横に置いてあったその本も、引っ越しの際に夫に捨てられてしまいました(涙)

しかし今は、ネットで調べればいくらでも情報の出てくる時代です。
まずは基礎の勉強から。そして、実際に使ったものを足していこうと思います。
ここはTOPページにありながらも、常に進化?更新し続けるページです。

まずは知ってて当然のはずの専門用語知識から

もちろん私が調べて、理解したと思っても間違っているものもあるかもしれません。
あまりにも見当はずれで間違っていることを書いていたら指摘してください。
できれば「うんうん、なんかそんな感じのやつ」というスタンスで読んでいただけるとありがたいです。

  • 「HTML」… Hyper Text Markup Languageの略語。ウェブページを作成するために作られた言語。
  • 「HTMLタグ」…HTMLを構成するもの。タグというマーク(命令)を使って、いろんなことができる。
  • 「CSS」…Cascading Style Sheetsの略語。ウェブページのスタイルを指定するための言語。

以上何となく、よく使われているけど、全く意味が分からなかった言葉達でした。
そして、やっぱりよくわかりませんw

次に毎回調べてしまうタグ

楽天のアフィリエイトを横に並べて表示したい!

これも本当に何回調べたんでしょう。いい加減覚えろって感じですね。
普通にアフリィエイトをコピペすると、縦並びになる上に凄く間延びした印象になります。
これをなんとかして横並びにしたい!の解決策がこれでした。

テーブルタグを使う
<table><tr><td>リンクコード</td><td>リンクコード</td></tr></table>
テーブルを作ってその中に入れちゃえばいいんです。
HTMLとして編集の画面からなら、その上下にも妙な隙間を作ることなく文章を書くことができます。(<br>改行タグは忘れないでね!)

ついでにテーブルタグの知識
 <table>~</table>で囲まれた部分がテーブル。その中に細かい設定を入れていく。
 <table>の次に来るのが、<tr>~</tr>で囲んだもの。囲まれたものが1行となる。
 <tr>の中に入るのが、<td>~</td>で囲まれた、1行の中にある1つのマス(セル)。

<枠に線をつけたい場合>
 最初の<table>の部分にborder=”数字″をつけ加えます。数字は枠線の幅になります。
<セル内の位置を変更したい場合
 <tr>や<td>に加えると中の文字や画像の位置を変更できるタグですが、基本私は<tr>(行全体)指定することが多いです。<tr>でも<td>でも好きな方に付け加えてもらって大丈夫です。
 水平方向の位置の指定は align=”位置”です 。
 位置は左寄せにしたければ“left”、中央揃えにしたければ“center”、右寄せにしたければ“right”と書き加えればOKです。後、使ったことはありませんが両端揃えという“justify”というタグもあるそうです。
 次に垂直方向の位置の指定は valign=”位置”です。
 縦方向の指定なので、上揃えにしたければ“top” 、中央揃えにしたければ”middle”、下揃えにしたければ“bottom”と入力すればOKです。

ついではセル幅を変更したいならば<td>タグに、width=”横幅”height=”高さ”で、セルのサイズを指定することができます。

この色ってどう表すの?

web上で表現される色には、色の名前とカラーコードがついています。
どちらでも好きな方を使うことができますが、色の名前よりもカラーコードの方が多いので、わたしはそちらを使うことが多いですね。
カラーコードは 「#」から始まり、16進数で表現されます。
16進数とは、0~9までの数字にA~Fまでのアルファベットを足した16桁です。
カラーコードの最初の2桁は赤、真ん中の2桁は青、最後の2桁が緑です。
また、0~Fの中で0が最も薄く、Fが最も濃い色になります。

例えば、黒を表現するのは「black」そして「#000000」というカラーコードです。
対して、白を表現するのは「white」そして「#FFFFFF」というカラーコードです。

実はこれ、最初物凄く混乱しました。最も薄い0を重ねたものが黒で、最も濃いFを重ねたものが白…、普通逆じゃないの?と。
絵の具の感覚でついそう思ってしまうのですが、黒にはすべての色がない、白にはすべての色があるという加法混色という考え方だそうです。(結局よくはわかりません!)

私はだいたい色を探す時には、「原色大辞典」さんか、「ホームページ作成、運営、管理ガイド」さんというサイトの中にある、「カラーコード一覧表」というページを参考にさせていただいています。
「原色大辞典」さんは、通常の原色以外にも、和色や洋色、パステルカラーやビビットカラーなどに分けた時点を作ってくれているので、色を選ぶ時にとても重宝します。
「カラーコード一覧表」は、色名にカーソルを移動させると背景色をその色に変えてくれるのでとても分かりやすいです。しかも色に関するタグも載せてくれている親切設計です。

Posted by pam