インターン初期トレ 5回目

今回やったこと

indexファイルを新しく作り、divタグを使用し、ブロックを作り、その中にheadlineとparagraphタグのインライン要素を入れ込んでその文字の色を簡単に変えるようにする。

 

初めて使ったのがcss(Cascading Style Sheets)というもの。これはhtmlと組み合わせて使うもので、どのように装飾するのかということに関して使われる。

htmlでは一つ一つコードを書いてしていたものを、cssではまとめて文字のサイズや色などを指定して作業できる。

htmlでサイトを綺麗にできるっちゃできるけど、いちいちコードを書かないといけないからめんどくさくなるというのは初期トレ中聞いたけど、もともとhtmlは情報構造を定義するためのものだから、ウェブページのスタイリングには使うべきではないと書いてあった。それはなぜか、見栄えのためにhtmlを使うと文書の情報構造がでたらめになってしまうから。コンピューターとかが理解できない構造になってしまうらしい…。そうなったら書き直しとかまた時間かかるのが想像できるし、なにより、わざわざhtmlをそんな風に使う人っているのかな?とも思う。

後、html5ではfontが廃止されるそう。だから完全に装飾はcssでしかできなくなるんだろう。

 

また、コードを書く時の注意。ブロック要素を作るときどこからどこまでとわかりやすいようにスペースを入れたりすること。これをまだ習ってないときに、黒執事関連でツイステッドワンダーランドのサイトのソースを見て、あまりのページのソースの見やすさに、これを美しいっていうんじゃないか?とか勝手に思ってた。でもすごくきれいで見やすいからぜひみんなも見てほしいと思う。お金かかってるんだなぁ…。

 

資料のスライド14「セレクタとプロパティ」のプロパティ欄のリンクはセレクタなので注意すること。

 

覚えること

1.<link rel="stylesheet" type="text/css" href="./style.css"/>

  →「このhtmlファイルにstyle.cssを適用する」

 

2.入れ子構造を作る

  <div>

  〇tab<h1>タイトル</h1>

  ○○tab<p>文章</p>

  </div>

  

3.h1〇半角スペース{

  ○○tabcolor : red ;
  }

 

  • h1→どれを(要素=セレクタ
  • {}→大かっこ
  • color→何を(プロパティ
  • :→コロン
  • red→どういう風に(
  • ;→セミコロン