絶対的と相対的

Pocket

三週間ぶりの土日休み。
来週も土日出勤なので、しっかりとウェブサイトの更新に励みましたww
090412.jpg
いかがでしょうか?
え? 「どこを更新したのかわからない」って?
そりゃそうだ。
内容は、まったくいじっておりません。
更新したのは、CSSだけです。

CSSとは、Cascading Style Sheets(カスケーディング・スタイルシート)の略で、HTML文書の装飾部分を一括管理できる機能です。
もう少し分かりやすく言いますと、HTMLでは、文字の大きさや色、背景色などを個別に指定していましたが、CSSでは、一括で指定することができます。
もしHTMLのみでWEBページを作成していれば、文章構造が細かくなったり、ページ数が増えてくると、それぞれのページを修正することは大変な作業になりますが、CSSを活用することによって簡単に修正することができます。(出所:ブログ別!作成・カスタマイズ講座

ようするに、見栄えを変えたってこと。
CSSを編集することで、「写真の上下の余白は、○ピクセル」とか
「マウスカーソルを乗せると、色が変わる」などを、すぺてのページに指定することができます。
めっちゃ便利なんですけど、骨組み(基)をしっかり作っておかないと、
レイアウトやデザインが、ガタガタっと崩れてしまうという・・・。
きょう、一番苦戦したのは『絶対的と相対的』。
「Internet Explorer」と「FireFox」など、別のブラウザでは、
ウェブサイトの見え方が違うっていう、大問題があります。
つまり、こういうページが、
090412-2.jpg
こう見えちゃうんです。
090412-3.jpg
どうすればいいのか、パソコンと格闘すること数時間。
CSSの値や項目の設定をいろいろ変えても効果がない。。。
逃げ出しそうになったけど、そこであきらめたら終わり!
検索して、やっと該当の要素を発見!それが、『絶対的と相対的』という概念。
* absolute … 親の要素の左上を基準として位置プロパティ通りに配置する方式。
* relative … 本来配置されるべき位置からの移動距離を位置プロパティを使い配置する方式。
いまだに、ようわかりませんが。
なんとか、「Internet Explorer」と「FireFox」で同じように見えるようになりました!!
パチパチパチ。
こんな風に、独学(ネットと本のみ)で学んでつくったウェブサイト、
スローペースながらちょこちょこ更新しているんで、よかったら見に来てください♪
また来週は、アースデイ東京で「てんとう虫チョコ」を販売してきます♪
(次の更新、いつになるかな〜ww)

Pocket

 
About 召田 安宏 760 Articles
1984年生まれ。2008年より国際協力NGOの広報を担当しています。拓殖大学 国際開発学部を卒業後、一般企業を経て、NGOの世界に。世界の子どもを児童労働から守るNGO ACE(エース)を経て、2016年よりシャンティ国際ボランティアへ。広報・国内事業一筋。チョコっと世界をのぞいてみませんか?