Toshi’s Enjoy Life

書きたいことを書く雑記ブログ!

【1からの挑戦】HTMLとCSSのテキスト終了!完成したホームページも公開

 

みなさんこんにちは!

今日の夕方についに終わりました!なにが終わったかと言うと・・・

テキストでHTMLとCSSの勉強をしていましたが、それがやっと終わりました♪

いや・・・ここだけの話、本当は全部は終わってないんですがね(笑)

(内緒ですがテキストの最後はどうでもよかったのです・・・ボソッ)

 

な、なにも聞こえていませんよね!?なんせボソッと言ったので!(うん聞こえてないな)

そんなこんなですが、0から始めた私がテキストのみでどこまでできるようになったかを、自分自身の記録もかねて発表します!

f:id:tosikun0119:20161106210138j:plain

皆さんにとっては本当に低レベルな内容となっていますが、よろしければしばしのお付き合いをお願いします(。-∀-)

 

それでは今回もいってみましょう!

 

目次

  1. 作業環境
  2. テキストで使うテキストエディタ
  3. 基礎中の基礎
  4. 最初の壁「表」
  5. CSSで一気に楽しく
  6. 重要なグローバルナビゲーション
  7. 細かい部分まで設定
  8. 出来上がったサイト
  9. まとめ
  10. 最後に

 

作業環境

f:id:tosikun0119:20161106200616j:plain

 

テキストを買った時点ではノートパソコンを購入する前でしたので、後ろに写っているデスクトップで作業していました。

現在はノートがあるので、プログミングとブログ専用として使っているノートで作業やブログ更新などをしています。

(後ろにちょっと写っているファブリーズは気にしないでください!)

やっぱり専用として使うのは大事なことだと私は感じてしまいました。

フォルダやショートカットなどがすぐ見つかるし効率が全然違います。

 

目次へ ↑

テキストで使うエディタ

このテキストでは”Tera Pad”を使っています。ググってみるといろんなエディタがありますが、今回はTera Padのみで進めていきました。

逆にTeraPadで慣れてしまったので、他のエディタ使ったらとんでもないことになりそうです(;´∀`)

 図は一部ですがこんな感じで進めていました。

 

f:id:tosikun0119:20161106202129p:plain

 

 みなさんはご自身でデザインなどをされている方ばかりだと思うので、すこし恥ずかしいですが公開してみました。 

そして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」でしょう。画像のサムネイルなどにマウスを近づけると光ったりさせることができる、いわゆるアニメーション効果をつけることができた時は「すげー!」と(略)

テキストでは写真集の中のサムネイルに適用しました。

ポイントするとサムネイルが徐々に薄くなってその後だんだんと色が濃くなっていき、外すと徐々に元に戻るというアニメーションをつけました。

 

f:id:tosikun0119:20161106213027p:plain

 

サムネイルだけじゃなく、グローバルナビゲーションにもつければいろんなことができそうです!ワクワク

  

目次へ ↑ 

重要なグローバルナビゲーション

アクセスUPにも繋がる重要な要素、グローバルナビゲーションについてもテキストでも触れていました。これだけは本当に使いこなしたい!と思う今日この頃。

jQueryなどの言語を使えればいいのでしょうが、とてもそこまでいけるレベルまで達していないので徐々にやっていけたらなと。

CSSだけでもドロップダウンメニューを作ることもできますが、とてもそこまでは無理そうです。

 

目次へ ↑ 

細かい部分まで設定

目に見えない部分や、細かい部分まで設定することもテキストでも紹介されてました。

一部を紹介すると・・・

  • SEOにも。<meta name="keywords">や<meta name="description">の使い方
  • スマホでもきれいに表示。「viewport」の使い方
  • ファビコンの追加の仕方

などをやりました。

metaタグは文字コードだけではなく、SEOやスマホの表示にも関係する大事な要素なんだとここで再認識。

認識できただけで、使えるかどうかは別問題ですが(;・∀・)

 

目次へ ↑ 

出来上がったサイト

テキストに倣い、出来上がったホームページがこれです!

www.geocities.jp

 

Yahoo!ジオシティーズを使ってるのもテキストに倣ってなのでここでアップしています。

viewportでスマホでの閲覧でも調整していますが、いまのスマホと合うかどうか分かりませんが設定済です。私のスマホではビミョーでしたが・・・。

ファビコンやアニメーションが適用されてるのも地味に嬉しいですね。

これがオリジナルでできるようになればどんなに楽しいことか・・・。

  

目次へ ↑ 

まとめ

テキスト自体はこれで終わりですが、まだまだ勉強しなければいけないことが山ほどあります。

すくなくともテキストと同じものを作れるように、何度も練習しなければいけないですね。時間が空いてしまうと、せっかく覚えた内容を忘れてしまうことになりますし。

なにはともあれ反復練習だ(。-`ω-)

 

目次へ ↑ 

最後に

そしてなんとも恥ずかしい内容となってしまいましたが、これからHTML、CSSを覚えたい。という方がこの記事を見てくれて少しでも参考になれば・・・と思っています。

 この記事を書いたのも、私自身のモチベーション維持の為でもあります。

そしていつか、自分がこの記事を見た時「こんな時もあったな」と振り返ることができるように頑張っていきたいですな!

それよりも挫折してないことを将来の自分に問いたいのもありますが!

 

目次へ ↑ 

 

以上、テキストでどこまで出来るか、そしてその結果を紹介しました。

それでは今回はこの辺で☆

広告を非表示にする