CSS基礎 ２カラムレイアウトの演習
CSS基礎演習１使用するテキスト卵料理カフェ CockeyollyHomeニュースメニュー今月のおすすめオリジナル雑貨マップメール今月のおすすめきのこのオムライスふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレ...
CSS基礎
CSS基礎 CSS基礎 第1回実技試験の内容
webサイト制作CSS基礎作例今回の実技試験の概要フォルダー名を「自分の名前_test01」として、試験終了後、講師に提出する事画像は各自で用意し指定されたサイズにトリミングする事headerの幅960px高さは350px。背景画像に「CA...
CSS基礎 2カラム演習問題
CSS基礎ヘッダー要素の幅960px 高さ350pxナブ要素は幅960px高さ50pxコンテント要素の幅600px 高さ400px（メインコンテンツ）フッター要素の高さ100px各要素の空き10px各要素の背景色は適宜a要素をホバーした際に...
CSS基礎 複数ページの制作
CSS基礎webサイト制作最近ではシングルページのサイトもよく見かけますが、ほとんどのサイトは複数ページをリンクさせていくという形でこちらの方が一般的です。複数ページでサイトを作る際に気をつけないといけないのがフォルダー構成です。以下のよう...
CSS基礎 CSS演習問題 回答
CSS基礎<body>style要素style elementHTML文書内にまとめて設定します。</body>解答例<!doctype html><html lang="ja"><head><meta charset="utf-8"><t...
CSS基礎 CSS演習問題
CSS基礎演習１<body>style要素style elementHTML文書内にまとめて設定します。</body>演習２<body>About wineChianti Classico Riserva1435年創業の由緒あるワイン醸造メ...
CSS基礎 うちのにゃんこ
CSS基礎以前マークアップしたhtmlデータにcssを追加してページを完成させてしまいましょう。<!doctype html><html lang="ja"><head><meta charset="utf-8"><title>うちのにゃん...
CSS基礎 positionの使い方
CSS基礎positionとは要素の位置を動かす事の出来るプロパティで、positionを使用する事でより自由なレイアウトが作れるようになります。さらに、「z-index」を指定する事で要素の重なり順を変える事が出来ます。<style>.c...
CSS基礎 CSS-spriteを使った3カラムレイアウト
CSS基礎CSSスプライトとは複数の画像を１つの画像にまとめる事でサイトの読み込み速度を速くする手法です。FacebookやGoogleでも使われている手法です。background-positionを使用して背景画像を動かします。メリット...
CSS基礎 floatを使ったレイアウト
CSS基礎divなどのブロックレベル要素は通常ソースで書かれた順番に上から下に縦に並びます。しかしfloatを使う事で要素を浮かす事が出来、さらに左右どちらかの方向を指定する事で横に並べる事が出来ます。floatを使う事でHTML内の文章構...