CSSって慣れるまでが・・・

大学1年の頃からHTMLに触れてきた自分にとって、HTMLのコードを編集するくらいは楽勝。

でもそのあとから出てきたスタイルシート、CSSってやつには、避けてきたせいか、ほとんど

理解不能。使おうと思ってもうまく使えず、ま、いっかと思ってたら、アフィリエイトで避けて

通れなくなってしまったので、今回ぶつかってみました。

リファレンス的なものは、上手に、詳しく載せてくれているサイトがあるので、そちらを調べるべし。

1.サイトの基本情報(文字の大きさ、背景色)などは変更せず、テーブル内だけ文字のサイズを変えたい

→独自のクラスを設定すればよい。

例)Siriusのデフォルトはいじらず、オリジナルを加える

css1

①上の「編集」タブから、一番右のスタイルシートを選ぶ

②Siriusのスタイルシート群は全部で4枚

・styles.css、tables.css、commonstyles.css、textstyles.css。

本体のHTMLファイルでは、下記のようにしてstyles.cssからほかの3つを読み込んでいる模様

@import url(“./css/tables.css”);

@import url(“./css/commonstyles.css”);

@import url(“./css/textstyles.css”);

おもに役割分担されていて、テーブル系なら、tables.cssとか、フォント系ならtextstyles.cssなんかに

分けて書かれている

 

今回はテーブルの一部を変更したかったので、tables.cssと格闘。

css2

この最下部(読み込みは上から順です。したがって一番下に追記すれば、基本的にはそれが優先されます。)に記述を追加。

css3

tdやthタグへオリジナルの設定を施したかったので、安易な名前を設定。

.orgtdthを選択すると(選択方法は後述)

・テキストを中央配置

・フォントサイズを全体の8割へ

・背景色を変更(←じつはこれが一番やりたかった)

が設定される。設定方法はこんな感じ↓

css4

そうすると、このクラス「orgtdth」を設定されたテーブルのみ、上記の中央寄せやフォントサイズ変更がかかる

さらに、とあるtdタグのみを左寄せにしたかったので、さきほど追加したクラスの下に「tdl」クラスを新設

これをすると、orgtdthの中の、「tdl」セルだけが左寄せになる。(もっといい方法はあるはず。今回は時間が

ないのでこれにする)

設定方法はさきほどと同様。

css5

二行目のpaddingってのは、左寄せにすると、テーブル内の仕切り線とものすごくくっついてしまうので、それを避ける

ための記述(やればやるほどハマった)

う~ん、本来はココではないのに、こんなに時間を使ってしまうなんて・・・・。ま、これも経験経験!