みなさんこんにちは！
今日の夕方についに終わりました！なにが終わったかと言うと・・・
テキストでHTMLとCSSの勉強をしていましたが、それがやっと終わりました♪
いや・・・ここだけの話、本当は全部は終わってないんですがね（笑）
(内緒ですがテキストの最後はどうでもよかったのです・・・ﾎﾞｿｯ)
な、なにも聞こえていませんよね！？なんせボソッと言ったので！(うん聞こえてないな)
そんなこんなですが、０から始めた私がテキストのみでどこまでできるようになったかを、自分自身の記録もかねて発表します！
皆さんにとっては本当に低レベルな内容となっていますが、よろしければしばしのお付き合いをお願いします(。-∀-)
それでは今回もいってみましょう！
目次
作業環境
テキストを買った時点ではノートパソコンを購入する前でしたので、後ろに写っているデスクトップで作業していました。
現在はノートがあるので、プログミングとブログ専用として使っているノートで作業やブログ更新などをしています。
(後ろにちょっと写っているファブリーズは気にしないでください！)
やっぱり専用として使うのは大事なことだと私は感じてしまいました。
フォルダやショートカットなどがすぐ見つかるし効率が全然違います。
テキストで使うエディタ
このテキストでは”Tera Pad”を使っています。ググってみるといろんなエディタがありますが、今回はTera Padのみで進めていきました。
逆にTeraPadで慣れてしまったので、他のエディタ使ったらとんでもないことになりそうです(;´∀｀)
図は一部ですがこんな感じで進めていました。
みなさんはご自身でデザインなどをされている方ばかりだと思うので、すこし恥ずかしいですが公開してみました。
そしてTeraPadやりやすい！(それしか使ったことない)
基礎中の基礎から
なにはともあれ基礎から始めていきました。DOCTYPE宣言や言語、文字コードからスタート。そしてこの時点でスペルミスを連発・・・この先が思いやられると感じながら始めました。というかスペルミスは非常に致命的ですね(^◇^;)
あと半角と全角のスペースだけでもよく間違ったなぁ。今もやりますけど汗
このテキストでは「Shift JIS」を使ってましたが、今はUTF-8が主流っぽいのでコードをUTF-8に設定したら文字化けを起こしてしまい、Shift JISでやらざるを得ない中でやっていきました。
最初の壁「表」
はい・・・これ苦手です。
<table><thead><tbody><tr><th><td>がありますが、どれがどれだっけ？なんてことになってしまいました。
きっと表をつくることになったら、まずテキストみながらやらないとすっごい時間が掛かりそうです。そうです。これが苦手ということは表に設定するCSSも苦手です。
「border-collapse」や表の中の「padding」「margin」になると混乱して発狂しそうになります！
なので今後も含めて一つ目の課題でもある「表」でした。
CSSで一気に楽しく
装飾する言語のCSS。これのおかげで楽しくなってきました。これを使いこなせるようになるともっと楽しくなるんだろうな。
プロパティ「background-attachment」で、スクロールした時の背景を決めることができるのを知ったときは「すげー！」と叫びました（笑）
そのほかに感動したのが「transition」でしょう。画像のサムネイルなどにマウスを近づけると光ったりさせることができる、いわゆるアニメーション効果をつけることができた時は「すげー！」と(略)
テキストでは写真集の中のサムネイルに適用しました。
ポイントするとサムネイルが徐々に薄くなってその後だんだんと色が濃くなっていき、外すと徐々に元に戻るというアニメーションをつけました。
サムネイルだけじゃなく、グローバルナビゲーションにもつければいろんなことができそうです！ﾜｸﾜｸ
重要なグローバルナビゲーション
アクセスUPにも繋がる重要な要素、グローバルナビゲーションについてもテキストでも触れていました。これだけは本当に使いこなしたい！と思う今日この頃。
jQueryなどの言語を使えればいいのでしょうが、とてもそこまでいけるレベルまで達していないので徐々にやっていけたらなと。
CSSだけでもドロップダウンメニューを作ることもできますが、とてもそこまでは無理そうです。
細かい部分まで設定
目に見えない部分や、細かい部分まで設定することもテキストでも紹介されてました。
一部を紹介すると・・・
- SEOにも。<meta name="keywords">や<meta name="description">の使い方
- スマホでもきれいに表示。「viewport」の使い方
- ファビコンの追加の仕方
などをやりました。
metaタグは文字コードだけではなく、SEOやスマホの表示にも関係する大事な要素なんだとここで再認識。
認識できただけで、使えるかどうかは別問題ですが(;・∀・)
出来上がったサイト
テキストに倣い、出来上がったホームページがこれです！
Yahoo!ジオシティーズを使ってるのもテキストに倣ってなのでここでアップしています。
viewportでスマホでの閲覧でも調整していますが、いまのスマホと合うかどうか分かりませんが設定済です。私のスマホではビミョーでしたが・・・。
ファビコンやアニメーションが適用されてるのも地味に嬉しいですね。
これがオリジナルでできるようになればどんなに楽しいことか・・・。
まとめ
テキスト自体はこれで終わりですが、まだまだ勉強しなければいけないことが山ほどあります。
すくなくともテキストと同じものを作れるように、何度も練習しなければいけないですね。時間が空いてしまうと、せっかく覚えた内容を忘れてしまうことになりますし。
なにはともあれ反復練習だ(。-`ω-)
最後に
そしてなんとも恥ずかしい内容となってしまいましたが、これからHTML、CSSを覚えたい。という方がこの記事を見てくれて少しでも参考になれば・・・と思っています。
この記事を書いたのも、私自身のモチベーション維持の為でもあります。
そしていつか、自分がこの記事を見た時「こんな時もあったな」と振り返ることができるように頑張っていきたいですな！
それよりも挫折してないことを将来の自分に問いたいのもありますが！
以上、テキストでどこまで出来るか、そしてその結果を紹介しました。
それでは今回はこの辺で☆
