タグ: HTML・CSS

HTML・CSSについて。

HTML

HTMLはマークアップ言語で、Webサイトのページの内容を記述する時に使用する。HTMLタグと呼ばれる<タグ名>のようなマークで、文字や画像などページに使用する項目を定義する。

HTMLのルールに沿って書かれた.htmlの拡張子のついたファイルなどをHTMLファイル、HTMLと略して呼んだりする。

CSS

CSSは記述されているHTMLに対して、色を付けたり大きさを指定したり、アウトを指定するための装飾用のファイル。拡張子は主に.css。

拡張子は.htmlや.cssじゃないといけないのか?

HTMLとCSSは.htmlや.cssで記述されることが多いが、プログラムでルールに沿って記述されたコードを表示させることで、HTML・CSSとして表示させることも可能。サーバーの設定やプログラムでそのように表現することも可能。

HTML・CSSを使ってどういった表現が可能か?

  • 見出し
  • 段落
  • リスト
  • テーブル
  • 画像
  • 動画

など様々な要素がある。基本的には縦に要素が表示されるものだと思っていればシンプルに納得できる(厳密に言うと違うが)。
例えば、縦に並ぶ要素を横に並べたいときはCSSを横に並ぶように記述する。

※ただし、横に並べるには横に並ぶようにHTML側もそのように記述しておかなかければいけない

HTMLタグの組み合わせとCSSの組み合わせは対なので、どちらも矛盾がないように記述する。
プログラム言語ではないため、自分で作成したHTML・CSSファイルはエラーが表示されず処理されて表示される。表示された時に思ったようなレイアウトになっていない場合は、どちらかあるいはどちらも記述内容をチェックする。

レイアウトによく使用するプロパティ

レイアウトは表示が問題なければ、以下のプロパティ以外でも可能。

  • display:flex;
  • display:table;
  • width:***px;
  • width:***vw;

文字の設定に使用するプロパティ

様々な単位がある。

  • font-size:***px;
  • font-size:***vw;
  • font-size:***vw;

文字の色変更に使用するプロパティ

文字の色設定は16進数表記やrgba表記でも可能。

  • color:#******;
  • color:rgba(***,***,***,*);

背景に使用するプロパティ

背景は単色・グラデーションの他、画像を使うことも可能。

  • background:#******;
  • background:url(***.***);

印刷など

CSSは印刷の文書も表現できる。単位はmmなども使用可能。

JavaScript

HTMLやCSSを操作するためにあるスクリプト言語。HTMLやCSSと同じように.jsとすればJavaScriptファイルとして認識される。HTML・CSSと違い、記述方法を間違えるとうまく処理結果が表示されないことがある。
※ブラウザに搭載されている

    [IE6のバグ] floatしている要素にマージンを指定すると幅が2倍になる

    IE6の中でももっとも有名で鬱陶しいバグの一つ。floatをしている要素にマージンを指定すると幅が2倍になってしまう。そのため、設計通りに横に並べようとしたときにうまくいかなくなる。 XHTML/HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Ty...

    [IE6のバグ] brにletter-spacingを適用すると解釈がおかしくなる

    たまには、文字と文字の間にスペースを入れて読みやすくするために、「letter-spacing」を入れると思います。そういう時に出くわしちゃった問題がありました。 XHTML/HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv=...

    [HTML+CSS] を利用したfloat解除(ボックスの浮きを解除)

    CSS3のflex 下記の通りflexを使って対応するのがスマート。 .sample{ display:flex; flex-wrap:wrap; } 大事なのは折り返すように指定しているところ。 clearfixを使った方法 <br class="clear">だとちょっと...という時は、clearfixを使って対応していた。floatの親要素にclearfixというクラス名(任意)を付与して、cssをうまくclearできるようにしたもの。検索すればどこかのソースコードが引っかかってくるの...

    [IE6のバグ] floatをかけたボックスにマージンを設定すると長さが2倍になる

    以下のソースコードを打込み、IE6・IE7で確認するとボックスの左にかけた10pxのマージンが10pxではなく、20pxとなって表示される。IE8、Firefox、Chrome、Safariなどではこのようなことは起こらない(右にマージンを10pxかけても同様に2倍となる)。 もっとも有名な旧IE系のCSS解釈の計算バグです。 ただし、このケースのようにSample1がfloat:left;と指定している時にSample2に同じくfloat:left;とすると、Sample2の左のマ...

    [CSS+HTML] 背景を画面全体に設定する方法

    CSS3での方法 <p>にマージンがついていると都合が悪いのでリセットしています。基本的にはやり方は同じ、縦がひっつかないので、#containerをストレッチしている。bodyに背景を敷く場合はこんなことしなくてもいい。 <style type="text/css"> body{ margin:0; padding:0; background:#f00; overflow:auto; } #container{ position:absolute; top:0; right:0; bottom:0; left:0; margin:0; padding:0; backgroun...

    [IE6のバグ] ナビゲーションに利用しているリスト(ul)にpaddingをかけるとhoverした時に隙間が出来る

    問題への経緯 ナビゲーションでよく利用する手段。<ul>を利用したマークアップ。 <ul>の中に当然<li>を入れて、<a>を入れる。 <a>のテキストをtext-indentでマイナスにして文字を消して、代わりにblockにして背景を表示させてボタンにさせる(overflow付き)。 ちょっとパディングを持たせたいので<ul>指定。 問題の内容 IE6でそういう風に指定すると、a:hoverした時に&...