雪愛のお絵かき研究手帳

絵の上達を目指して考えたことや実践したことをつれづれと書いてます。
2017 051234567891011121314151617181920212223242526272829302017 07

2011
10/25
22:12
CSS勉強中。。。

カテゴリ: ホームページ作成関連
つい最近になってなのですが。。。
CSS・カスケーディングスタイルシートってものをちょっと
真面目にやってみようかと思いまして。
CSS初心者向けのサイトなりをぐるぐる回ってお勉強してみました。

今の自分のwebサイトってば、おもっきりテーブルのみで構築してあって、
しかも何重にも入れ子になってたりしてHTMLがめちゃめちゃ複雑になってて
言ってしまえばなんか汚ねーって感じなんですよね。。。
とくにトップページなんか。。。

っていうのも、当時PCのOSがWinXPだった頃に使ってたHTMLエディタの
FrontPageExpressってやつが使いやすくてですね。
WYGIWIGタイプのエディタで、見た目だけ重視で簡単にページが作れて
難しーこととか面倒なこととかキライな私には重宝してたツールだった
のですが。。。

PCの買い替えとともにOSがVistaになると命の綱だったFrontPageExpress
使えなくなってしまった訳です。。。
編集はできても何故か保存できなくて。。。

非常に困りました。
サイトの更新どーすんだよ!?
という事態になりパニクりかけましたがそこはまた次のWYGIWIGエディタ
αEDITに助けてもらおー・・・かと思いきややっぱりなんか不具合が!
そこそこ編集はできたんだけどね…テーブルの入れ子がどうもうまくなかった
らしく、これまで通りのやり方じゃもう無理っぽかったのね。。。
挙句セキュリティソフトが反応して危険なモノ扱いされるし…。。。

仕方ないから今度は純粋にHTML編集のStyleNoteでだましだまし
やってはみたものの
いままでWYIGWIGに頼りっきりだったせいでHTMLが身についてない&
αEDITからあったバグというかレンタルツールのカウンターが
センタリングできなくなった症状を治せませんでした。。。

つーわけで今現在もカウンターが左寄せ状態で詰んでます(笑)。。。


これではイカン!
いい加減テーブルでガチガチなのもなんかダサいしもうちょっとマシなサイトに
したいぞーーー!!!

っていうんで今日の記事の文頭に戻るわけです。


久々にノートなんかひっぱり出してきてガリガリ書き込んで赤ペンでマークしたり
緑とか青のペンで色分けしたりして学校で板書でもしてるんか???みたいに
ジャンジャンバリバリやりましたよぉ~。。。

そうしたらようやく、CSSってなんなんかがだいぶ解りまして。
BOXデザインがどんなふうに成り立ってるかってことも理解できまして。
ブログテンプレートのソースとか、今まであの膨大な英語?と数字の羅列が
ちょっと怖かったりしてたのですが。

今ではなんのこたーない、CSSが逐一HTMLにどんな指示出してるのかが分かっちまえば
なーんにも怖いこたぁなかったんだな、って思いました。


しかも!
実際手でガリガリ書いたおかげで、CSSの宣言文ていうのかな?
例えば

h1{font-size:○○px;color:#??????;} みたいなやつですよ。

どこに{}カッコが入るとか:とか;とかの打ち方ルールなんかも覚えられて
なんか当時数学とかの公式覚えたりしてた頃を思い出しました。。。
暗記って大事ですねぇ。。。
でもいずれ面倒になってコピペとかするだろうなぁみたいな…。

ちゅーても全然基本的なことしかやれませんけどね(汗)。。。
あくまでも基本がわかったっていうレベルです。
なのでサイト作ったら割とシンプルな感じになるかも…いや別に
今でもじゅうぶんシンプルなんだけど。。。


Win7になって今使ってるエディタはkompozerです。
フリーのエディタをジプシーしてきた中でもこれは結構いいですよ。
WYIGWIGなのでデザインをそのままプレビュー表示できるし
外部スタイルシートを読み込むとスタイル通りにプレビューされるので
個人的にとても作業しやすいですね。

kompozerの中にもCSSエディタがついてますが
使い方がいまいち不明なのでメモ帳に直接打ってCSSとして保存したものを
エディタ内で呼び出してます(汗)。。。

というわけで、
サイト自体の改装も追々やってこうと思いまーす。。。
頑張ればブログテンプレも作れるようになったりするかも?
(だといいなぁ~)。。


◆おすすめCSS講座サイト(私が実際お勉強しにいったサイトさんです)

・CSSだけでなくHTMLの基本的なことから解説してくれています。
特にボックスデザインについての説明がとても分かりやすかったです。
人気ホームページが作れる簡単作成講座
http://homutuku.com/beginner/


・基礎から応用までCSSのテクニックがたくさんあります。
制作実習編のGIFアニメで見る制作過程を見てCSSの役割が理解できました。
WEB工房きくちゃん
http://www.stylish-style.com/


関連記事

web拍手 by FC2

テーマ : ホームページ作成 ジャンル : コンピュータ CM:(0) TB:(0) TOP
コメントの投稿












管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL

カレンダー
05 ≪│2017/06│≫ 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
2016-17・主なCG一覧
2015・主なCG一覧
カウンター