html・cssをとりあえずは書けるようになったけれど、それでも自信がなく日々インプットばかりしている私です…
そんな私が先日、はじめて現役フリーランスのプロの先生にチェックしていただきました。
プロの先生とは
今私が入っている、オンラインサロン「フロントエンド系 Webクリエーター養成所 shibajuku」のオーナー、柴田先生です。
htmlを全く理解していなかった（結論）
結論からいうと、私のhtmlは表面だけを捉えたマークアップで、想像以上にできていませんでした。
サイト制作後には、HTML 5 Outlinerでチェックしたり、
cssチェックしたり。
これらがクリアしていれば、最低限のhtmlはできているだろうと勝手に思い込んでいた私です。
そう、見た目ができていればそれで良いというhtmlになっていたのです。
[chat face="me03.jpeg" name="ただのお母さん" align="right" border="none" bg="yellow"] そんなつもりじゃ！！！[/chat]
htmlはそうカンタンではない理由
今回先生からフィードバックをもらって気づいたこと。
[su_list icon="icon: check" icon_color="#424040"]
- 文章の意図を深く読み取る力がない
- そもそも、タグの使い方をきちんとわかっていない
[/su_list]
この2点。
フィードバックをもらったときは、生まれてはじめて天地が逆さまになる衝撃を受けました。
当たり前、間違いないと思っていたことが、けっこう違っていたんです。
[chat face="me.jpeg" name="ただのお母さん" align="right" border="none" bg="yellow"] 上記2点は、先生に見てもらわなかったら一生気づかなかったと思います。（こわっ！）[/chat]
何ができていなかったか
恥ずかしながら、私の思い違いをメモがてらここに綴ります。
- ・見出しだと思っていたら、ただのリストだった！
→見出しのみでコンテンツがないものはそもそも見出しではない。 - ・見出しだと思っていたら、用語説明リストだった！
→なんでも見出しにすれば言い訳ではない。
そこは本当に見出し？と疑う心が必要。 - ・figure、figcaptionの使い方が間違っていた！
なんとなく画像にfigureを使っていた私。
文章の一部にあたるのか、それとも、捕捉にあたるのかを全く考えられていなかった。 - ・ヒーロー画像、
background-imageで表示していた！
けっこう調べるとbackground-imageで紹介しているところが多いのではないでしょうか？
でも、その画像、本当にバックグラウンドでいいの？？
意味のある画像はbackground表示ではおかしいよね。。。 - ・単純な
pではなく、用語説明リストにした方がふさわしい場所が何点かある - ・リストではなく、コンテンツ量が多いものは
divsectionがふさわしい
もっと細かいことを書けば、たくさんあります。。。
とにかく上記の点は、
指摘されなければ全く気づいていなかった、恐ろしい点を挙げました。
改めて読み返すと、「そうだよね、確かに、なぜそこをそれでマークアップした？」と頷ける点ばかり。
けっこう思い込みで作業していることに気づかされました。
htmlはプロに見てもらうべき！
今回の件で、htmlの考え方が少しわかった気がします。
そしてほんの少しですが、ちょっとだけ自分に自信がつきました。
それでも、まだまだ！
何回かプロの方にチェックしてもらったら、絶対に揺るぎない自信につながると思います。
やはり「見ていただく」というのは大事。
これからも「shibajuku」柴田先生の目指している優しさあふるるサイトがネットに溢れるように、html/cssの理解を深めて行きたいと思った今日この頃でした！