HTML&CSS×ポケモン「ノーマルタイプ」
HTML&CSSはプログラミングで最も最初に学習する項目の一つだと思います。
最も最初で最も基本的なことなのでポケモンの「ノーマルタイプ」と関連づけて覚えました。
あくまで僕にとって覚えやすいものなので「こんなんじゃ覚えられんわ」という批判は受け入れます。
しかしきっとこの方法が覚えやすいオタクな人たちもこの日本には確実に存在すると思うのでそんな人たちにこの情報を伝えたいです。
以下が関連付けの成果です。
------------------------------------------------------------
・切っても切り離せない(HTMLとCSS:親と子)のイメージから
・ノーマルタイプ最強レベルの性能
・<head>や<body>もガルーラと関連づける
2.<h>タグ、<p>タグ-ハピナス
・合わせてhp、HPの化物と言えばハピナス
・{h}a{p}iナスとも読める
3.id、class-ザングース
・idは「#」マークで表され、傷跡と関連付けられる
・classはclawsクロウズ、爪と関連付けられる
4.<ul>タグ系統-ウールー
・<ul>をウールーと読める
・<li>-[l](棒)のeye(i)から、ウールーの瞳孔は棒型
・<ol>- 丸っこく(o)連なる(l)耳?より
5.<a>タグ-ポリゴン
・電脳世界を移動するポケモン→リンクで移動するイメージ
・href属性、HyperTextReference→ハイパー(向こう側)から同じく電脳世界のイメージ
6.<img>タグ-ドーブル
・そのまま絵描きのイメージから
・src属性→source(ソース)から、ドーブルの尻尾
7.borderプロパティ-ハトーボー
・margin-ケンホロウ→目の周りに余分な赤い部分→marginがある
・padding-マメパト→黒目でない部分が広い→padding部分が広い
8.<table>タグ-ムーランド
・ムー{r}aン{d}o→<t{r}><t{d}>タグ
・ムーランドは髭が垂れて「白い」部分が横に伸びている→<colspan>を[凍る]と読み、「白い」と関連づける。結果<colspan>は横に繋がるタグと覚えられる。逆に<rowspan>は凍っていない茶色の部分=生=raw→rowspanと覚えられる。
・機械的なイメージと送信のイメージのリンク
・type属性からタイプが様々に変化するイメージ
・value属性は尻尾の形状(V)より
・method属性は頭部の角後部のギザギザをMと読める、かつアンテナの送信のイメージ
・action属性は頭部の角先端部、矢のような形になっているため「送る」イメージ
10.<meta>タグ-メタモン
・metaからそのままメタモン
・柔軟なイメージもつく
11.position:relative-イエッサン
・頭部がオスメスで大きく異なる(相対的relative)、position:relativeは親要素につける
・体はそれほど変わらない(絶対的absolute)、position:absoluteは子要素につける
・ただし実際に動くのは子要素positon:absolute、つまり体の部分
12.floatプロパティ-ビーダル
・水タイプもふくまれるため水に浮くイメージ
・overflow:hiddenでフロート解除、overを大歯と読む→ビーダルの出っ歯
・伸び縮みできそうな見た目→flex
・justify-content、尻尾の形状がJになっている
・wrap、手のヒレの部分が折り返している→wrap
・まっすぐ伸びる首から髪の分け目→Road→row→flex-flow:row(縦線で分けて横並び)
・逆に頭髪部分に横線もある→絡む→column→flex-flow: column(横線で分けて縦並び)
------------------------------------
とりあえずこんな感じで書いてみました。
剣盾が出たので最近になって改造した部分も一部あります。
まあプログラミングはアウトプットが大事なのでインプットはそこまで気合を入れる必要はないと思います。
しかし最初にHTML&CSSに好感を持つためにはこの方法で覚えるのは間違っていないと僕は考えています。
どんどん忘れていって使おうとするたびに調べるのはめんどくさいですし、上記の方法で全部頭に入れてしまうのも一つの手ではないでしょうか？
