css

カラムレイアウトの設計演習 続パターンC

css

検討 カラムレイアウトの設計演習 パターンC の続き レイアウトと素材 もっとも苦労したところ html <div class="post"> <a href="#"> <div class="date"> <span>1</span>AUG </div> <h2>風車と風の関係</h2> <p> <img src="img/windmill_thumb.jpg" alt="">本文 </p> <p class="more">READ MORE</p> </a> </div> css /*.post*/ .post{ border:1px solid #aaa; m…

positionを使ったレイアウト演習

css

positionを使ったレイアウト 下記の画像と同じカンプを作成せよ。素材は与えられたものを使用すること。 方針 大画像 160px × 160px 小画像 80px × 80px 大画像の4分の1 position:absoluteで配置する。親要素はstatic以外であること。 #containerは横 160 ×5…

カラムレイアウトの設計演習 パターンC

css

カラムレイアウトの設計演習 パターンC 検討はこちら 模範html <html lang="ja"> <head> <meta charset="utf-8"> <title>カラムレイアウトの設計 C</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <div id="header"> <div id="nav"> <ul> <li> <a href="#">HOME</a> </li> <li> <a href="#">CATEOG…</a></li></ul></div></div></div></body></html>

カラムレイアウトの設計演習 続パターンB

css

背景画像を中心に設計 はてな記法をためすhtml <html lang="ja"> <head> <meta charset="utf-8"> <title>カラムレイアウトの設計</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div id="header"> <h1> <img src="img/logo.png" alt="PICKUP STREAM"> </h1> <div id="nav"> <ul> <li> </li></ul></div></div></div></body></html>

カラムレイアウトの設計演習 パターンB

css

カラムレイアウトの設計 下図を参考にコーディングせよ。素材、テキストは与えられるものを使用。 教科書48ページ。 #content 方針 #header 「PICKUP STREAM」画像はh1とし、float:left、navはfloat:right。それぞれdivで囲む。 navはdisplay:inlineでイ…

Thumbnailで画像置換 応用

段取り 白黒サムネイルをマウスオーバーするとカラーメイン画像に変化させる。 レイアウトは下図の通り。 メイン画像360px*270px、サムネイルは画像間の空きも計算に入れる。上下左右の空きを10pxとすると、(360-10)/2=175、(270-10)/2=130。 html ja…

2カラムレイアウト演習 応用

css

2カラムレイアウト演習を以下のように変更せよ ロゴとビルボードの空きを「10px」に変更 ナビボタンの縦の面積を拡げる #contentのデザインを変更 #footer内をセンタリング 「#headerimg img」のmargin-topを10px に変更 「#nav li a」のpaddingを上16px、…

2カラムレイアウト演習

css

2カラムレイアウトの設計 下図を参考にコーディングせよ。素材、テキストは与えられるものを使用。 教科書38ページ。 方針 #header 「PICKUPSTREAMの画像」divで囲ってfloatで左側へ。アイコン群も浮かすのでフロートさせないとレイアウトが崩れやすいの…

色について

色の選び方 3色を基本とする。それ以上は使わない。 ベースとなる基調色 アクセントとしての強調色 (補色) 馴染ませるためのアソートカラー (類似色相) 自分の好みで色を選ぶのは初心者がよくおかす間違い 例Wedding ベース:白っぽい黄色 アクセント:…

ナビゲーション(2)

css

CSS Spretes ロールオーバー時の画像置換を、ひとつの画像内の部分部分を見せ画面上の画像表示を変更する手法。 複数の画像を一つの画像にまとめることでHTTPリクエスト数を減らす事できる。 今回はナビゲーションのlink時の画像とhover時の画像をひとつの画…

ナビゲーション(1)

css

ナビゲーションとは 閲覧者が迷わずに目的へ辿りつけるように手助けすることが役割。 各ページへのリンクをまとめたリンク集で項目を列挙したもの。 リンクの価値は同質なので番号のない箇条書きとして扱う。 ナビゲーションブロックのスタイル 下記の形が基…

ボックスの配置方法(1)

css

通常フロー CSSにおいてボックス(要素は全てボックス)を配置する最も基本的な約束で、ブロックボックス整形文脈とインラインボックス整形文脈が存在している。 ブロックボックス整形文脈ブロックボックスが包含ブロック内の左側上部から縦に下部へと並んで…

CSS基礎演習(1)

css

(問)下記の画像を使って以下のように記述しなさい。値は適宜で良い。 01.jpg 着眼 h1、h2,pで骨格ができそう・・宮沢賢治作品→h1いてふの実→h2画像→pにしようか・・ 画像はimg挿入ではなく、飾りだからバックグランドイメージだな・・ CSSリ…

ブロックレベル要素とインラインレベル要素(2)

ボックスモデルを構成する4つの要素 content contentとborder間の余白:padding border:線にも幅がある事に注意。 borderと他のボックスとの余白:margin 過去記事はこちら ボックスモデルの図 包含ブロック(コンテナブロック) 子孫要素を配置できる領域…

ブロックレベル要素とインラインレベル要素(1)

ブロックレベル要素 見出し(h1~h6タグ)や段落(pタグ)、ul、liタグなどのリスト、ボックスを定義するdivタグなど文章構造の基本となる。 包含ブロックいっぱいに拡がるブロックを作る。包含ブロックについてはこちら その為、続けて書いても横並びにならず縦…

擬似クラス

css

テキストリンク テキストリンクの色はブラウザのCSS初期値で「青色」になっている。 リンクの装飾はユーザーが一目で分かるようにする事が大切。 リンク色はデザインや配色などの統一感を考慮する。 リンクの色(擬似クラス:Pseudo-classes) 条件によって…

リセットCSS

css

リセットCSSの意義 ブラウザによって初期値として持っているスタイルシートの値が異なると意図したスタイルにならないので、リセットCSSといった手法を使う。 初学者は「リセットCSSの根拠」を理解する必要があるため、単純な記述からはじめて徐々に複雑にし…

セレクターの種類(2)

css

classセレクタ ページ内で同じ名前を繰り返し使用できる。 クラス名を半角スペースで区切ると複数のクラスをタグに適用できる。 classとidを同時に適用できる。 頭文字は英字。数字はダメ。 html class="class名" <p class="red">・・・・・</p> <p class="red" "center">・・・・・</p> <p class="red" id="container">・・・・・・</p> c…

htmlとcssのコメントアウトの方法

htmlコメント記述方法 「」で囲む。 コメントは複数行にもできる。 コメント部分はブラウザには無視されるので表示されない。 cssコメント記述方法 「/*」と「*/」で囲む */の直前が全角文字だと閉じタグとして認識しないブラウザがあるので、日本語でコメン…

ボックスモデル

css

ボックスを構成する4つの要素 content padding border margin ボックス幅=コンテント領域幅+パティング+ボーダーの太さ+マージン ボックスモデル図 padding:パディング ボーダー辺に対してコンテントの読みやすさを確保するために空ける領域。 記述はp…

セレクタの種類(1)

css

html要素のセレクタ h1要素の文字色をオレンジ、p要素の文字色を緑にする html <h1>大見出し</h1> <p>文章・・・・</p> css h1{ color:#F60; } p{ color:#090; } browser 複数セレクタ 要素を「,」カンマで区切って並列すると複数にスタイルを適用できる。 h1…

CSSとは

css

CSS(Cascading Style Sheets) 文章構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの具体的な仕様のひとつ。「cascade」=「階段状に流れる滝」のように親要素から子要素、孫要素にスタイルが継承する特徴を意味している。 スタイ…