僕がWordPressテーマ自作で使用した全タグ等コードまとめ

WEB

勉強をしよう!と決心して努力を始めても、目標がないとなかなか身につかないし、途中で挫折してしまうもの。

とくにプログラミングは、教科書の通りに打ち込めばとりあえず動くし、かと言って教科書をなぞっていてもタグやコードをスラスラ覚えられるようになるわけじゃないし、「やっている満足感」は強いけど、それがなかなか成長につながらなかったり・・・しますよね?僕はそうでした。

また、ずーっと努力し続ける、というのも息切れするのが目に見えていたので、2ヶ月くらいをMAX期限にして、WordPressのテーマを自作〜それでBlogをやり始める、と目標を定めました。(今後はブログを書きながら、必要に応じてプログラミングを勉強・改良していきます)

僕は仕事柄、IllustratorやPhotoshopはよく使うのですが、プログラミングというのは全く未知の領域でした。2ヶ月でテーマ自作〜Blog開始が早いか遅いかはわかりませんが、振り返ってみるとそれほど多くの知識が必要だったわけではないので、復習も兼ねて振り返りをしてみます。

今回は、テーマ自作に使用した全htmlタグとcssプロパティを列挙していきます。もしこの記事を読んでいる方がいらっしゃったら、おそらく2ヶ月前の僕と同じレベル??だと思いますので、もしもくじけそうになったら、以下の一覧を見てみてください。

とりあえずこの程度を使えれば、テーマを自作するために必要なことは7割方できると思います。(残りの3割は、また別記事にて)

では、実際にリストアップしていきます。

使用したのはたったこれだけ。使用タグ・プロパティ一覧

※各要素の説明文は「僕が使用するにあたって」の用途や感想であり、公式なものではありません。

リストアップして気づいたのですが、結構勉強したのにこれだけだったのか〜という感じ。

実際には各タグやプロパティに細かい指定が必要だったり、その挙動は色々と使って試してみないと理解できなかったり・・・で、勉強時間の大半は使い方の方に使われるのですが、こうやって一覧にすると「この程度の要素が使えればwebデザインはできるんだ!」ということで勇気付けられ・・・ませんか?

しかも「画像を貼り付けたい→img」「幅を指定したい→width」などわかりやすいものも多いです。少しだけ悩んだり引っかかったりするのはdisplay、floatなどレイアウトに関するものくらいでしょうか。

あやふやな説明や僕の印象だけの説明も掲載していて間違っている部分もあるかもしれませんが、お伝えしたいことは「この程度の理解度でも、とりあえず作れます!」ということです。

とりあえず作れるなら作っちゃう→上手くいかない・満足できないことを使用しながら改善していく

というのが最良の勉強方法ですし、実際のほとんどの業界・仕事でもこうやって進めていく方が最終的に良い結果が得られることが多いと思います。(ちなみにこういうやり方を「PDCAサイクルを回す」と言ったりします)

使用タグは少ないけれど、実は奥深い記述のルール

僕自身、まだかなりいい加減、かつ「なぜ必要かわかっていない」ことも多いのですが、htmlの記述の仕方にはいろいろとルールがあるみたいです。理解している範疇では、主に以下2つが理由かなと。

  1. SEO対策自分や他プログラマーにわかりやすくするため
  2. 自分や他プログラマーにわかりやすくするため

1. SEO対策

SEO対策というのは、ざっくりとgoogleで検索した際に自サイトが検索結果の上位に表示されるようにするためのものです。googleとしてはユーザーが検索した時になるべくドンピシャな検索結果がすぐに見れるようにしなければgoogle検索を使ってもらえませんから、そこの質保証をする必要があります。

かと言って、人力で一つ一つのサイトを評価するわけにはいきませんから、クローラーというgoogleのプログラムがインターネット上を徘徊しまくって各webサイトの内容を精査、適切な検索結果がでるようにします。

でもクローラーはプログラムですから、webの構造がクローラーにも理解できるように「ここがheadだよ」とか「これがこのページの大タイトルだよ」とか「これがナビゲーションだよ」とかを正確に記述しておく必要があります。

だから、記述する順番や「<main>の中に<footer>入れたらダメだよ」みたいな、表出するデザインに直接関係のないルールが大切だったりします。

2. 自分や他プログラマーにわかりやすくするため

紙デザイナーの僕からすると、webデザインとの大きな違いは「いつでも修正できる」ことと「一文字でも書き間違えると正しく機能しない」こと。

紙デザインにも機能性やデザイン性の善し悪しは当然ありますが、印刷できることであれば、何をどうデザインしても「印刷できちゃう」し、印刷しちゃったら「修正できない」です。

そして紙デザインは目に見えている結果が全て(線を引きたければ、線を引くだけ)ですが、webデザインは「デザインを作っているのが、全て機械言語」(線を引きたければ、borderを記述する)です。

ここのデザイン修正したいな〜とか、ここの機能がうまく働いてないな〜となった時、デザインをマウスポインタで直接触って修正することができません。

ただひたすら機械言語の羅列を見直して修正していかなければならないので、「どこに」「何が」記述されているのかを誰が見てもわかりやすいように記述しておく必要があります。

たとえそのwebページを触るのが作者である自分一人であったとしても、色々いじっているうちに訳が分からなくなっていきますので、なるべくわかりやすく、丁寧な記述を心がけましょう。

まとめ

記述の細かなルールに関しては、<body>内の<header><nav><main><footer>くらいでざっくりした区分を気にしつつ、とりあえずデザインを作ってみちゃうので良いと思います。

徐々に書き分け方などを学んで改善していくので支障はありません。とにかく、全部を一気に正しくやろうとしないで、サクサク楽しめるくらいのスピード感で進めていくこと、続けていくことが大切かなと思います。

WordPressのテーマとして使用するには、まだ後半の工程がありますので、そこは次回の記事でまとめていきます。

Profile


ここに自分のプロフィールを入れる。ほぼサイトの説明のような感じでも良いかと思っている。フリーランス、デザイン、絵、プログラムなどが主になってくるが、あまりに散漫にならないように気をつけなければならないのも、事実。