2012-05-12

CSS09　背景画像と枠線

ねこだまのCSSリファレンス&デモの概要
このサイトでは、CSS3まで含めたリファレンス（解説）とブラウザのサポート状況、CSSリセット、バグ対応などをCSSに関連することをまとめて公開しています。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>背景画像と枠線</title>
<style type="text/css">
body {
margin: 0;
background-image: url("http://cdn-ak.f.st-hatena.com/images/fotolife/w/web-design-advance/20120415/20120415210237.jpg");
background-repeat: repeat-y;
}
h1 {
color: #8D0B00;
font-family: sans-serif;
border-bottom: dashed 4px #999;
}
p {
color: #333;
font-weight: bold;
line-height: 1.6em;
}
h1,p{
padding:10px 20px;
margin-left: 70px;
}
</style>
</head>
<body>
<h1>Page Design</h1>
<p>背景に色数を減らした画像を用意します。背景画像は、縦方向び繰り返しを指定しています。<br>
また、見出しの文字は、大きく、インパクトの強い色を指定し、目を引くようにしています。<br>
このように、やり方次第でデザインの幅が広がります。いろいろ試してみましょう。</p>
</body>
</html>

2012-05-11

授業日誌　5/10　floatの段組み

理解があやふやなところが多かったので、自分なりに整理し記述をして見ました。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>floatの段組み</title>
<style type="text/css">
<!--
body {
  background-color: #f0f8ff;
}

#container {
  width: 700px;
  height: auto;
  margin: 50px auto;
}

#header {
  width: 700px;
  height: 100px;
  background-color: #7fffd4;
  margin-bottom: 20px;
}

#wrapper {
  width: 700px;
  height: auto;
  background-color: pink;
/* overflow: auto; */
}

#content {
  width: 450px;
  height: 300px;
  background-color: #ffa07a;
  margin: 0 50px 20px 0;
  float: left;
}

#sidebar {
  width: 200px;
  height: 300px;  
  background-color: #f0e68c;
  float: right;
}

#footer {
  clear: both;
  width: 700px;
  height: 100px;
  background-color: #00ced1;
}

-->
</style>
</head>
<body>
<div id="container">
      	  <div id="header">header</div>
   <div id="wrapper">
	   	 <div id="content">content</div>
	     <div id="sidebar">sidebar</div>
   </div>
	     <div id="footer">footer</div>
</div>
</body>
</html>

標準画面サイズの変遷 640px → 760px → 960px

float は浮き上がる（floatしていないものはその背景に潜り込んむ）
contentとsidebar　両方浮き上がるとwrapperは、潰れる
レイアウトは幅指定が大切
footerにclear: bothを付けた（回り込み解除する）
margin はfloatしてるオブジェクトの長い方につける→もう一方を押し出しす

2012-05-11

授業日誌　5/11

jimdo 登録

パスワード変更
ページタイトル設定　（サイトタイトル）
ホームページタイトル設定　（キーワード、サービス、カテゴリー）
ページ内容詳細　（３文節、キーワードから始まるのがベスト）

　　　商売の場合は連絡先も入れる
　　　定期的に変更するのもよい

Metaタグ　（キーワード必須、１〜５コまでに）
スタイルの設定
レイアウトの設定

　サイトを作る。

Photoshop

スクリーンショットで画像保存
起動時、目盛りの記憶をリセットする（alt,ctrl,shiiftを同時に押す）
編集メニューからカラー設定（Web用に）
画像サイズの変更

画像サイズの変更方法

トリミング
イメージメニューから画像解像度（幅の変更　今回は500pixel)
解像度７２　WEBの場合はOK

ブログに画像をアップロードした

宿題

　就職活動に向けてのトレーニング（色々なサイトを見て、研鑽が必要）
　
　A4サイズ指定　構造を描く
　
　気づいたことを箇条書きで、まとめる
　

2012-05-10

授業日誌　5/9

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>疑似クラスで指定（１）</title>
<style type ="text/css">
<!--
*{
padding:0;
margin:0;
font-family:"メイリオ",Meiryo,Osaka,"MS Pゴシック","MS PGothic",sans-serif;
}
.nav	{
	font-size: 0.875em;
	margin: 50px; /* 上・左を空ける */
}
.nav li {
	margin-bottom: 5px;
	color: #F00;/* 赤 */
}
.nav li a {
	color: #000;
	text-decoration: none;
｝
.nav ul a:link{
	color:#000;
	text-decoration:none;
}
.nav ul a:visited{
	color:purple;
	text-decoration:underline;
}
.nav ul a:hover{
	color:orange;
text-decoration:underline;
}
.nav ul a:active{
	color:red;
	text-decoration:underline;
}
-->
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">メニューのリンク１</a></li>
<li><a href="#">メニューのリンク２</a></li>
<li><a href="#">メニューのリンク３</a></li>
<li><a href="#">メニューのリンク４</a></li>
<li><a href="#">メニューのリンク５</a></li>
</ul>
</div>
</body>
</html>

一部修正しました。

2012-05-09

ＣＳＳ12　疑似クラス（１）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>疑似クラスで指定（１）</title>
<style type ="text/css">
<!--
* {
	margin: 0;
	padding: 0;
}
body {

}

.nav ul a:link{
color:#000;
text-decoration:none;
}
.nav ul a:visited{
color:purple;
text-decoration:underline;
}
.nav ul a:hover{
color:orange;
text-decoration:underline;
}
.nav ul a:active{
color:red;
text-decoration:underline;
}
.nav{
padding:3em;
}
.nav ul li{
color:red;
}
-->
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">メニューのリンク１</a></li>
<li><a href="#">メニューのリンク２</a></li>
<li><a href="#">メニューのリンク３</a></li>
<li><a href="#">メニューのリンク４</a></li>
<li><a href="#">メニューのリンク５</a></li>
</ul>
</div>
</body>
</html>

中間の問題　飛ばしました。

2012-05-09

ＣＳＳ０６　背景画像を設定

<html>
<head>
<title>ＣＳＳ０６背景画像を設定</title>
<style>
<!--
body {
background-image: url("01.jpg");
}
-->
</style>
</head>
<body>
</body>
</html>

2012-05-09

ＣＳＳ04　リンクの背景色（疑似クラス）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>リンクの背景色（疑似クラス）</title>
<style type="text/css">
<!--
ul {
	list-style-type: none;
}
li a {
	display: block;
	color: white;
	font-size: 1.5em;
	font-weight: bold;
	width: 300px;
	padding: 2px 10px;
	margin: 2px 0px;
	text-decoration: none;
}
	
li a:link {
	background-color: coral;
}
li a:visited {
	background-color: turquoise;
}
li a:hover {
	background-color: skyblue;
}
li a:active {
	background-color: lawngreen;
}
-->
</style>
</head>
<body>
<ul>
<li><a href="#">LINK-link-coral</a></li>
<li><a href="#">LINK-visited-turquoise</a></li>
<li><a href="#">LINK-hover-skyblue</a></li>
<li><a href="#">LINK-active-lawngreen</a></li>
</ul>
</body>
</html>