ウェブデザイン

前回記事「各要素の配置を調整する」では、HTML要素のボックスの大きさと配置を調整しました。 今回は、article要素を罫線(境界線)で囲んでみます。 スタイル適用前後のイメージは次の通りです。 borderプロパティ 要素のボックスに罫...

前回の記事「スタイルシートでページの背景に色をつける」でbody要素、article要素、header要素、footer要素の背景に色をつけました。 今回は各要素の大きさ(ボックスの大きさ)を調整します。 HTMLのボックスモデル WEBブ...

コンピュータは、色(カラー)を表現する数値化されたデータを処理することで、ディスプレイ表示や印刷を行います。 私たち人間がディスプレイ上で写真や動画を見たり印刷物を見たりするときは、この数値化されたデータを意識する必要はありません。 しかし...

前回の記事「HTMLのマークアップ、artcle、header、footer」まででページのヘッダーと記事、フッターをマークアップしました。 今回はWEBページに色をつけて飾ります。 背景に色をつける HTMLでマークアップしたbody、h...

前回記事「HTMLのマークアップを学ぶ」では、見出し(タイトル)と段落をマークアップしました。 今回は artcle、header、footer を整理したいと思います。 article(記事) article を理解するのは少し難しいかも...

前回の記事で基本的なHTMLファイルを作成し、コンテンツの文章を入力してブラウザでWEBページを表示してみました。 まだテキスト文章だけしか記述していませんのでブラウザには文章しか表示されず、改行すら入っていません。 マークアップすることで...

WEBデザインの基本HTML5とCSS3について、実際に練習用ページを作りながら入門者向けにまとめてみたいと思います。 はじめに HTML/CSSはW3Cという非営利組織が標準化をしています。1994年の発足以来、何度かバージョンが更新され...

前回までの記事で、HTMLとCSSのボックスモデルについて説明しました。 ブラウザはコンテンツを表示するとき、HTMLの各要素(body、div、h1、pなど)をボックスとして扱い、HTMLに記述されている順に画面上に配置していきます。 W...

前回までの記事、「WEBデザイン HTML CSSのボックスモデル その1」と「WEBデザイン HTML CSSのボックスモデル その2」でボックスモデルの説明をしました。 今回は、ブラウザ上に配置されたHTML各要素のボックスに対し、スタ...

前回記事の WEBデザイン HTML CSSのボックスモデル その1 でボックスモデルの概要を説明しました。 今回はボックスについてもう少し詳しく見ていきたいと思います。 ボックスの配置 ブラウザはHTMLに記述されている要素(見出し、段落...