JS系フレームワーク入門前にHTMLとCSSをかいつまんでキャッチアップする

個人的に理解が必要となった要点を抜き出してみたので、何から始めればよいかわからない方はガイドブック代わりに使ってください。

HTML

コーディングで一番初めに覚える言語といっても過言ではないかと思います。
直感的に使えるので疎かになりがちですが、内部SEO対策の中で大きな役割を担っている言語でもあるので、見やすくきれいに書くためにではなく検索エンジンに気に入ってもらえるようにという意識でいきましょう。(適当)

  • インライン要素・ブロックレベル要素
  • id・class
  • link・style・script
  • 属性(attribute)

インライン要素・ブロックレベル要素

body内で使用したタグは種類には、インライン要素ブロックレベル要素があります。
意味合い的には文章につけるタグがインライン構造を作る時に使うタグがブロックレベルと覚えておくといいと思います。
境界線がわかりづらいタグもあるので、その時はMDNが役立ちます。

例えばこのように書くと、

<span>span要素</span>
<strong>strong要素</strong>
<p>p要素</p>
<div>div要素</div>

————こんな感じに————

span要素 strong要素

p要素

div要素

————反映されます————

spanstrongは右側に並んでいきますが、pdivは下に重なっていきます。
これはインライン要素であるspanstrongの横幅(※厳密には横幅はない)が文章に必要な分しかなく、ブロックレベル要素であるpdivがもともと目一杯の横幅を持っているためです。
これが二者の大きな違いになります。
横並び、縦並び、と覚えてしまうと、デザイン的に使いたくなりそうですが、後々泣きを見るのでデザイン面は必ずCSSで整えるようにしましょう
また、両者の用途で考えると気づく方もいるかも知れませんが、インライン要素の中にブロック要素はいれてはいけません

id・class

ブラウザの画面上で右クリックすると、「ページのソースを表示」というのが出てくるので、そちらでいろんなサイトのソースコードを確認してもらうとわかるのですが、レギュラーで使われてるタグってだいたい決まってたりします。
そうなると、「この要素に色を付けたい!」「この要素を動かしたい!」みたいなことが出てきた時、区別ができなくなるので、そうならないために区別するための名前をつけよう!っていうのがidclassです。
使い方は至ってシンプルで

<div id="fruits">
  <span class="apple">りんご</span>
  <span class="orange">みかん</span>
  <span class="banana">ばなな</span>
</div>

こんな風に名付けます。

idは同じ名前が一度しか使えず、classは何度でもオッケーです。

<div id="fruits">
  <span class="apple">りんご</span>
  <span class="orange">みかん</span>
  <span class="banana">ばなな</span>
</div>
<div id="fruits">
  <span class="apple">りんご</span>
  <span class="orange">みかん</span>
  <span class="banana">ばなな</span>
</div>

↑この場合、classはOKですが、idはNGです。

またクラスの場合に限り、

<span class="apple green">りんご</span>

こういった複数命名も可能です。

idやclassの名前は構造的な意味だったり、タグの役割名(list-itemとかuser-name)にしておくと、後からソースコードを読む人(自分も含めて)にわかりやすいので心がけましょう。
主にCSS・JavaScript側から認識しやすくするために名付けるので、名付けただけでは何の意味も持ちません。
あ、HTMLだけで使用する例として内部リンクというのがありました。

link・style・script

linkscriptはCSSファイル・JavaScriptファイルなどの外部ファイルを読み込むのに使うタグという認識で大丈夫です。
また、scriptタグは外部ファイルだけではなく、タグ内で直接JavaScriptのコードを書いたりもできます。
styleも同様タグ内でCSSが書けます。

<!-- 外部ファイル -->
<link rel="stylesheet" type="text/css" href="style.css">
<script src="app.js"></script>

<!-- 直接 -->
<style>
body {
  margin: 0;
}
</style>
<script>
document.write('スクリプト');
</script>

こんな感じに使います。
タグ単位で取り上げたのは、内部SEO対策に繋がる可能性があるからです。
これらを改善したことで、検索結果に直接影響を与えるわけではありませんが、ページスピードへは大きく影響を与えたりするので、気になる方は調査してみても良いかも知れません。

ここでは詳しく書かないので、参考記事のみ載せておきます。

また時間あるときにでも覗いてみてください。

属性(attribute)

さり気なくHTMLでタグ内にidclassを書いてましたが、これらは全て属性と呼びます。
タグ毎に指定できる属性は変わるので、一つ一つ紹介するわけにはいきませんが、特に初心者を苦しめるのはフォーム系タグ(だと思っています)。

理屈も大事ですが、実際に動かす方が頭に残りやすいので、ドキュメントを参考に色々試してみてください。

CSS

CSSを書くことはスタイリングといったりすることもあり、主に装飾レイアウトの調整形を整形するなどユーザーに少しでも見やすくなってもらえるような情報を盛り込みます。
HTMLと比べて事前に考えないといけないことが意外と多く、設計の概念もあるほど実は奥が深かったりします。
ただこれも直感的に扱えてしまうため、気づいたらものすごく散らかっていた、なんてことも起こりえます。
個人的にはサボりがちになってしまう言語です。

  • セレクター
  • プロパティ
  • 優先順位
  • メディアクエリとViewport

セレクター

要素を指定するための書き方です。
例えば、

<div>
  <span>文章</span>
</div>

こういうHTMLに対して

span {
  color: red;
}

とすると、

————こんな感じに————

文章

————反映されます————

また、スタイルは該当する要素すべてに適用するので

<div>
  <span>文章</span>
</div>
<div>
  <span>文章</span>
</div>

このような場合、

————こんな感じに————

文章
文章

————反映されます————

まとめてできるのは便利ですが、適用する要素をある程度の粒度に絞るためにセレクターがあります。
参考記事載せておきます。

プロパティ

CSSのスタイルの指定としてcolor: red;の様な書き方をしておりましたが、こういった見た目を変えるために指定する項目が山ほどあります。

その中でも

これらを重点的に学んでおけば案外馴染めてしまうと思います。
同時にCSSの勘所にも気づけると思います。

優先順位

優先順位による問題点はコーディングを始めた序盤ではなく、中盤や終盤に目立ち始めるので、初心者の頃はものすごく苦手で気をつけるべきポイントの一つでした。

例えば

<ul class="card-list">
  <li class="card-item">list</li>
  <li class="card-item">list</li>
  <li class="card-item">list</li>
</ul>

こんな感じのリストがあってWordPressのテーマ側で既にスタイリングがされていたとします。

しかし自分はスタイルに気に入らない部分を見つけ、改善しようとするのですが、

.card-item {
  padding-left: 10px;
}

このように書いても直りませんでした。

スタイルのソースファイルが問題なく読み込まれているのであれば、こういった場合、概ね優先順位の問題が絡んでます。
自分の書いたスタイルが他で書かれているスタイルの優先順位に劣っている可能性があるのです。

じゃあ全部に優先順位が高めのセレクターをつければ・・・

と思ってしまいそうですが優先順位は青天井ではなく、最上位が存在するので、今回で問題なかったとしても、次デザインを変えたくなった際に苦しめられます。
ただ頭で理解してても経験がなければ実際には苦しむイメージがつかみにくかったりもするので、自分しか触ることがないのであれば一度試してみてもいいと思います。

とはいっても結局はオークション形式に優先順位をあげていくしか解決法がなかったりすることも多いので、よくベテランの方が考え込んだりしてるのを見たことがあります。

優先順位の具体的な点数基準の記事がありましたので、載せておきます。

メディアクエリとViewport

メディアクエリはレスポンシブデザインでよく出てくるもので、「このサイズの時はこのスタイルを適用」みたいなことがしたい時に使用します。
Viewportはデバイスによって画面サイズも変わってくるので、「表示に関するルールを決めるもの」として覚えておくといいと思います。

CMSの場合、テーマ側でいい感じにしてくれてることが多いので、「もっと細かくカスタマイズしたい!」と思ってからでも十分間に合います。
今は予備知識程度に頭にいれておきましょう。