スタイルシート（ＣＳＳ）を独学で勉強してみた
こんにちは。 のんびりゴローのブログにお越しいただきありがとうございます。
今日は自習形式でCSS(Cascading Style Sheetの略称)の勉強をした内容を投稿します。
【更新:2020/02/22】
早速、昨日の自習を応用して無料版はてなブログのデザインCSSの記述に反映してみました。
タイトル表示と各記事表示に対して表題のスタイルを調整しています。
ご参考として追記したCSSは最下段に添付いたしました。
目次
はじめに
特に改まってホームページを作成したいとか思っているわけではないのですが、常々ホームページってどんな感じで出来ているの？と思っていました。
書籍等を読んで学習する方が一般的かもしれませんが、今日はインターネットを活用した無料の自習サイトを見つけましたので”60の手習い”を地で行くことになりますがチョッとお世話になりました内容(現在進行形です)を投稿いたします。
学習してみての感想
- 実際に手を動かして作業することで、理論(理屈)と一緒にその使い方をパターン化（ルーティン)としてが覚えることが出来たと感じています。（いつまで記憶が続くかは別問題です(笑)。
- 今回利用させていただいたインターネットサイトは会員登録は不要です。
- ブラウザーさえ稼働すれば体験出来るサイトでしたのでとてもお手軽です。
- 学習のテーマはスタイルシートに関して学びました。
- ド素人ゴロー衛門ですので、スタイルシートの意味や使い方、記述方法を中心に学びました。
- お金と時間が豊富にあれば学習教室への参加もアリかと思いますが、自習できる教材は探せば豊富に存在しています。
- それらを活用できていないだけなのかな？と感じた次第です。
学習の経緯と内容
- 元々の動機は、無料版はてなブログで記事を寄稿するときに気が付きました。
- 無料版はてなブログでは記事を寄稿するときには「見たまま・はてな記法・Markdown、 HTML編集」の4つのモードが選択できます。
- それらを駆使すれば記載内容は編集・更新できますが、他のサイトの方のようなカッコいい見た目にすることは困難です。(ゴロー衛門だけが出来ないだけかも??)
- 管理画面のデザイン→カスタマイズの配下に”デザインCSS”との言葉を見つけ何かイジレルのかな？と覗いてみても【上級者向け】CSSを記述できます。。 詳しくはこちらと初心者にはハードルが高そうな文言が・・・・。
- その詳しくはこちらのリンク先を見てみても、何を言っているのか？？の状態。
- そこでハタと元々CSSって何よ!という根本的な疑問点に立ちかえりCSSの学習に取り掛かることにしました。
インターネットを彷徨っているうちにTECH ACADEMYさんのサイトに出合い、この中で今回は</>Markupさんのサイトを利用させていただきました。
出典：運営会社 | TechAcademy [テックアカデミー]
- 学習の内容はStep1~4で各々のStepでLessonのカリキュラムが組まれています。
- ゴロー衛門は現時点でStep2 Lesson5に取り掛かるところで現在進行形です。
- 1 Lessonにかかる時間は30分程度なので、細切れ時間を活用しても勉強できると考えています。
- 無い知識が自己努力により少しづつでも向上することを感じるのは何歳になっても充実感と楽しさを実感できますね。
- このまま継続利用させていただき、スキル向上に役立てたいと思っています。
ここでハプニング発生！
- 自習が一区切りついたところで、居間に戻るとパートナーがぐったりしているではありませんか。
- な～～んと一人で庭の草取りをしていたということでヤッバ～～っと思ったところ、退職後に最近始めた家事手伝いの習慣が功を奏してか特にお咎め無し。
- 日頃からのリレーションシップの形成は大切と肝を冷やしつつ痛感した次第です。
まとめ
- スタイルシートに関しインターネットでの学習（e-ラーニング）は効果的です。
- 手を動かしての体験型学習なので身体で憶えられます。(スポ根ドラマみたい(笑))
- 自分のペースで学習を進められます。
- 1レッスンが30分程度なので細切れ時間を利用しても学習できそうです。
追伸：家庭内での協業体制の維持⇒健全な家族関係の維持に貢献(?) ゴロー衛門談
ゴロー衛門の経験が少しでも皆様のお役に立てれば嬉しく思います。
本日も最後までお読みいただきありがとうございました。
WordPress。 後ろ髪引かれるな～～。
レンタルサーバーもお手軽価格になっているし・・・。
【ご参考】
2020/02/22 デザインCSSに追記したCSS記述です。
.entry-title {
color: #000000;
padding: 15px 15px;
background: #ffffff;
border-left: 2px solid #ff6347;
font-size: 16px;
border-bottom: 2px solid #ff6347;
}
.entry-content h4 {
color: #ffffff;
padding: 15px 15px;
background: #00008b;
border-left: 10px solid #00ffff;
font-size: 16px;
border-bottom: 5px solid #00ffff;
}
リンク
