ブロックレベル要素とインライン要素
CSSを使ってホームページの見栄えを自由に決められることがわかりました。次にページの要素(メニューやロゴ)の配置を決めるために必要な概念について紹介します。 ページ要素の配置のことをレイアウトと言います。 レイアウトを設… 続きを読む »
CSSを使ってホームページの見栄えを自由に決められることがわかりました。次にページの要素(メニューやロゴ)の配置を決めるために必要な概念について紹介します。 ページ要素の配置のことをレイアウトと言います。 レイアウトを設… 続きを読む »
さて、今まで背景色や文字色を変更する際に以下の方法を使っていました。 「red」「blue」など具体的な色の英語名(カラーネーム)を使った指定 各色の成分(RGB)を整数(0〜255)で指定 色を指定する方法はこれ以外に… 続きを読む »
前回は、要素の「外側の余白」と「内側の余白」について説明しました。これらを組み合わせることで、様々な表示の間隔を自由に設定することができました。 さて、だいぶ見た目が整ってきましたので、今回は仕上げをやっていきましょう。… 続きを読む »
前回はこのようにページコンテンツ全体を線で囲むところまでCSSを書きました。 線で囲えたのはいいのですが、線の中の余白が整っていませんね。今回はこれを直していきましょう。 要素の外側の余白を調整する margin まずは… 続きを読む »
自己紹介ページのレイアウトを整える 前回は特定のタグのスタイルを変えるためにclass属性が利用できることを解説しました。これで様々なタグの装飾を行えるようになりました。 今回は、自己紹介のページ(page1.html)… 続きを読む »
特定のタグのスタイルを変える 前回はCSSでタグのスタイルを変える方法を紹介しました。タグ名をセレクタに指定した場合、その指定したタグすべてのスタイルが変更されましたね。 今回は、スタイルを変えたいタグをピンポイントで指… 続きを読む »
ページの見栄えを良くする これまで自己紹介のページを作ってきましたが、色数も少なく、画面が左に寄っていたりと、見た目がちょっと…と思われた方もいるかもしれません。 今回はページのレイアウトや装飾を行う CSS… 続きを読む »
ホームページといえば、ページ間の移動が欠かせません。 別のページに移動する仕組みは「ハイパーリンク」と呼ばれます。 普通はハイパーを略してリンクと呼んでいます。リンク(link)は結びつけるものを表す英語です。 ひとつの… 続きを読む »
前回のおさらい 前回は自己紹介のページを完成させました。 HTMLソースがかなり複雑になってきたので、どこでどんな処理を行っているかが分かりにくいですね。 「コメント」を使うと、HTMLソース内にメモ書きができるので、処… 続きを読む »
前回のおさらい 前回は画像を表示するタグと、リストを作るタグについて解説しました。今回は前回作りかけだった自己紹介のページを完成させましょう。 まずは「好きなもの・嫌いなもの」の表を作ります。 表(テーブル)を作る テー… 続きを読む »