ウェブデザイン【初心者ノート】各要素の配置を調整する
前回の記事「スタイルシートでページの背景に色をつける」でbody要素、article要素、header要素、footer要素の背景に色をつけました。 今回は各要素の大きさ(ボックスの大きさ)を調整します。 HTMLのボックスモデル WEBブ...
ウェブデザイン
ウェブデザイン【初心者ノート】コンピュータで扱う色 HSV(HSB)とRGB
コンピュータは、色(カラー)を表現する数値化されたデータを処理することで、ディスプレイ表示や印刷を行います。 私たち人間がディスプレイ上で写真や動画を見たり印刷物を見たりするときは、この数値化されたデータを意識する必要はありません。 しかし...
ウェブデザイン【初心者ノート】スタイルシートでページの背景に色をつける
前回の記事「HTMLのマークアップ、artcle、header、footer」まででページのヘッダーと記事、フッターをマークアップしました。 今回はWEBページに色をつけて飾ります。 背景に色をつける HTMLでマークアップしたbody、h...
ウェブデザイン【初心者ノート】HTMLのマークアップ、artcle、header、footer
前回記事「HTMLのマークアップを学ぶ」では、見出し(タイトル)と段落をマークアップしました。 今回は artcle、header、footer を整理したいと思います。 article(記事) article を理解するのは少し難しいかも...
ウェブデザイン【初心者ノート】HTMLのマークアップを学ぶ
前回の記事で基本的なHTMLファイルを作成し、コンテンツの文章を入力してブラウザでWEBページを表示してみました。 まだテキスト文章だけしか記述していませんのでブラウザには文章しか表示されず、改行すら入っていません。 マークアップすることで...
ウェブデザイン【初心者ノート】HTML5 CSS3の基礎をしっかり学ぶ
WEBデザインの基本HTML5とCSS3について、実際に練習用ページを作りながら入門者向けにまとめてみたいと思います。 はじめに HTML/CSSはW3Cという非営利組織が標準化をしています。1994年の発足以来、何度かバージョンが更新され...
ウェブデザイン【初心者ノート】WEBデザイン HTML CSS ボックスの回り込み
前回までの記事で、HTMLとCSSのボックスモデルについて説明しました。 ブラウザはコンテンツを表示するとき、HTMLの各要素(body、div、h1、pなど)をボックスとして扱い、HTMLに記述されている順に画面上に配置していきます。 W...
ウェブデザイン【初心者ノート】WEBデザイン HTML CSS ボックスの大きさ
前回までの記事、「WEBデザイン HTML CSSのボックスモデル その1」と「WEBデザイン HTML CSSのボックスモデル その2」でボックスモデルの説明をしました。 今回は、ブラウザ上に配置されたHTML各要素のボックスに対し、スタ...
ウェブデザイン【初心者ノート】WEBデザイン HTML CSSのボックスモデル その2
前回記事の WEBデザイン HTML CSSのボックスモデル その1 でボックスモデルの概要を説明しました。 今回はボックスについてもう少し詳しく見ていきたいと思います。 ボックスの配置 ブラウザはHTMLに記述されている要素(見出し、段落...
ウェブデザイン【初心者ノート】WEBデザイン HTML CSSのボックスモデル その1
HTML/CSSでは、ボックスモデルという考え方でWEBページを作ります。 入門者、初心者はこのボックスモデルの考え方をしっかりおさえておく必要があります。 HTMLとCSSの違い・役割については、を参照してください。 ボックスモデルとは ...