2010年12月02日

HTML/CSSを用いたサイトデザイン

あと1日かければ今回使ってる2冊目のテキストは終わらせられると思う。

ただ、根本的に理解するためには反復が必要。
焦らず、じっくりと。

【この課での目標】

HTML/CSSを用いたサイトデザイン

【教材範囲】

HTML/XHTML&スタイルシートレッスンブックの1〜232ページ。

【成果物】

http://programming.so.land.to/20101201-1.html
※今回から書式をちゃんと宣言して書くようにしたので、Chromeなどでも見られるようになっています。

【つまづいた箇所・解決法】

ロゴ作成時に余白部分が切り取れない。
→新規作成ボタンを押した直後に確定させる。

今までfirefoxでしかページが表示されなかった。
→コード内で宣言をすることによってChrome見られるように。

【未解決の悩み】

特になし

【ソース】

※タグの囲み(<)を半角から全角に置換してあります。


<!DOCTIPE 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>HTML/CSSの勉強</title>
<style type="text/css">

body {color: #444444;
background-color: #66aa66;
background-image: url(back.jpg)
}

div#container {border: ridge 10px #bbffaa;
padding: 20px;
background-color: #ffffff;
width: 90%;
margin-left: auto;
margin-right: auto;
}

div#header {background-color: #66aa66;
padding: 5px 20px;
padding-bottom: 20px;
}

div#header p {color: #222222;
margin-bottom: 0;
}

h1 {font-size: 2.25em;
font-family: Verdana,Helvetica,sans-serif;
color: white;
text-align: left;
margin-bottom: 0;
}

p {font-size: 0.95em;
line-height: 1.6
margin-top: 0;
}

address {font-size: 0.75em;
font-style: normal;
clear: both
}

a {color: gray
}

a:hover {color: blue;
background-color: #ccffff;
font-size: larger
}

a:visited {color: black}

address a:hover {color: #ffaa00}

ul {list-style-type: none;
margin-left: 0;
padding-left: 0;
background-color: #bbffaa;
padding: 3px 20px
}

li {display: inline;
padding-rifht: 10px;
font-size: 0.75em
}

li a {text-decoration: none
}

h2 {fibt-size: 1em;
padding-left: 5px;
border-bottom: solid 2px #66aa66;
padding-bottom: 3px;
background-image: url(back.jpg);
background-repeat: no-repeat;
background-position: 13 -2px;
padding-left: 30px;
clear: both;
margin-bottom: 0;
}

h2#summary {margin-top: 40px;
}

img {float: right;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
clear: both;
}

img.photo-odd {float: left;
margin-left: 0px;
margin-top: 2px;
margin-bottom: 15px;
}

img.photo-logo {float: left;
margin-left: 0px;
margin-right: 50px;
margin-bottom: 15px;
}

img.photo-even {float: right;
margin-right: 0px;
margin-top: 2px;
margin-bottom: 15px;
}

p#massage {margin-left: auto;
margin-right: auto;
text-align: center;
line-height: 1.3;
}

</style>
</head>
<body>

<div id="container">

<div id="header">

<h1><img src="logo03.jpg" alt="「プログラミング初心者・虎の穴」自作ロゴ画像" class="photo-logo" />
<a href="http://programming-ana.seesaa.net/">プログラミング初心者・虎の穴</a></h1>
<br>
<p>
このページでは、<strong>プログラミングど素人・初心者</strong>の僕が、<br />
HTML/CSS・PHPを勉強していく上での記録を行っていきます。
</p>
<p>
HTML/CSSはほぼ独学、PHPは勉強会に参加もしながら習得を目指します。
</p>
</div>

<h2 id="summary">HTMLとは?</h2>

<p>
HTMLは文書の論理構造や見栄えなどを記述するために使用される。<br />
また、文書の中に画像や音声、動画、他の文書へのハイパーリンクなどを埋め込むこともできる。
</p>

<h2>CSSとは?</h2>

<p>
ワープロソフトなどで、フォントの種類や文字の大きさ、色、行間の幅、修飾など、<br />
文書の見栄えに関する情報をひとまとめにした、文書の雛形のこと。
</p>

<h2>今までの成果物の一部&おまけ</h2>

<p id="massage">
<ul>
<li><a href="http://programming.so.land.to/20101124-3.html">HTMLとCSSを使ったページ</a></li>
<li><a href="http://programming.so.land.to/20101122-1.php">PHPを使った掛け算</a></li>
<li><a href="http://programming.so.land.to/20101124-4.html">PHPを使った投稿フォーム</a></li>
<li><a href="http://twitter.com/yuuya1986">twitterアカウント</a></li>
</ul>
</p>

<h2>インドでの写真</h2>
<p>
<img src="india03.jpg" alt="カシミールの空・湖" width="400" height="267" class="photo-even" />
インド・カシミール地方で撮影した写真。<br />
テロが多発する危険地帯ではありますが、自然に囲まれた美しい土地でした。<br />
<br />
※カシミール地方とは<br />
この地域についてはパキスタンとインドが領有を主張し、これまで大小の軍事衝突(カシミール紛争)を繰り返してきた。<br />
現在は、ほぼ中間付近に停戦ラインが引かれている。<br />
日本の学校教育用地図帳では、パキスタンから中国へ割譲された地域を除き、中印パ三国の主張するすべての地域を所属未定とし、実効支配線(停戦ライン)のみ描く手法がとられている。

</p>

<h2>インドでの写真2</h2>
<p>
<img src="india01.jpg" alt="タージ・マハルの裏" width="400" height="267" class="photo-odd" />
有名な歴史的建造物「タージマハル」<br />
その裏に流れる川を撮影したものです。
<br />
<br />
※タージマハルとは<br />
ムガル帝国第5代皇帝シャー・ジャハーンが、ペルシャやアラブ、果てはヨーロッパから2万人もの職人を集め、22年の歳月をかけて建造させたといわれているインド=イスラーム文化の代表的建築。<br />
名前の由来はよくわかっていないが、王妃の名ムムターズ・マハルを縮めたものではないかという説が有力である。<br />
ムムターズ・マハルはペルシャ語で「宮殿の光」、「宮廷の選ばれし者」を意味する言葉であり、第4代皇帝ジャハーンギールから授けられた称号である。<br />
彼女の本名はアルジュマンド・バーヌー・ベーガムという。タージ・マハルを言葉どおりに訳せば「王冠宮殿」もしくは「宮殿の王冠」という意味になる。
</p>
<address>Copyright (C)<a href="mailto:tekitou@gmail.com"> yuuya1986</a></address>

</div>
</body>
</html>
posted by yuuya1986 at 00:41| Comment(0) | HTML/CSS | このブログの読者になる | 更新情報をチェックする

2010年11月24日

CSS 〜リンク・画像・表〜

これでひとまずはじめてのホームページHTML入門 は終わりです。
次からは新しい本に入ります。

ですが、完璧に覚えているかといえば全くそうではないので、反復の重要性を感じます。

【この課での目標】

CSSを用いて画像、表、リンクの調整

【教材範囲】

はじめてのホームページHTML入門 の200〜214ページ

【成果物】

http://programming.so.land.to/20101124-3.html
※Chromeだと見れません。

【つまづいた箇所・解決法】

特に無し

【未解決の悩み】

画像を囲む罫線をいじっても表示が変わらない。

【ソース】

※タグの囲み(<)を半角から全角に置換してあります。

〜HTML〜


<html>
<head>
<title>CSSを使った記述3</title>

<link rel="stylesheet" type="text/css" href="20101124-3.css">

</head>
<body>

<div>
今までの成果物
</div>
<ol>
<a href=http://programming.so.land.to/self.html><li>2010年10月末に作成してみたもの</li></a>
<a href=http://programming.so.land.to/20101120-1.html><li>HTMLタグ基本の基本</li></a>
<a href=http://programming.so.land.to/20101120-2.html><li>表作り</li></a>
<a href=http://programming.so.land.to/20101120-3.html><li>箇条書き</li></a>
<a href=http://programming.so.land.to/20101121-1.html><li>画像・音楽ファイルの挿入</li></a>
<a href=http://programming.so.land.to/20101121-2.html><li>リンク作成</li></a>
<a href=http://programming.so.land.to/20101121-3.php><li>PHP〜基礎の基礎〜</li></a>
<a href=http://programming.so.land.to/20101121-4.php><li>PHP〜配列・ループ〜</li></a>
<a href=http://programming.so.land.to/20101122-1.php><li>PHP〜if文・ループの応用〜</li></a>
<a href=http://programming.so.land.to/20101124-1.html><li>HTML/CSS〜文字・画像・背景など〜</li></a>
<a href=http://programming.so.land.to/20101124-2.html><li>HTML/CSS〜箇条書き〜</li></a>
<a href=http://programming.so.land.to/20101124-3.html><li>HTML/CSS〜画像・表・リンクなど〜</li></a>
</ol>

<div id="nikki-box">
<img src="india01.jpg" width="50%" title="インドの風景@" class="nikki-photo" id="main-photo">
タージ・マハルの裏を流れる川
<img src="india03.jpg" width="50%" title="インドの風景A" class="nikki-photo" id="main-photo">
カシミールの湖
</div>

<div>
<table border="1" width="80%" height="50%" cellpadding="10">
<caption align="right">カードゲーム勝率一覧</caption>

<tr id="tr-size">
<th>ゲーム名</th>
<th>ルール</th>
<th colspan="2">勝率</th>
</tr>

<tr align="left">
<td rowspan="2" valign="top">ソリティア</td>
<td>カードのめくり方(3枚ずつ)</td>
<td>43%(試行100回)</td>
<td>100回中43回成功</td>
</tr>

<tr align="right">
<td align="center">カードのめくり方(1枚ずつ)</td>
<td>14%(試行100回)</td>
<td>100回中14回成功</td>
</tr>

<tr>
<td rowspan="3" valign="top">スパイダーソリティア</td>
<td>初級:1組</td>
<td>38%(試行100回)</td>
<td>100回中38回成功</td>
</tr>

<tr>
<td>中級:2組</td>
<td>20%(試行50回)</td>
<td>50回中10回成功</td>
</tr>

<tr>
<td>上級:4組</td>
<td>0%(試行50回)</td>
<td>50回中0会成功
</tr>

<tr>
<td>フリーセル</td>
<td>なし</td>
<td>38%(試行50回)</td>
<td>50回中19回成功</td>
</tr>
</div>




</body>
</html>


〜CSS〜

#nikki-box{
margin-bottom: 1em;
padding: 1em;
border-style: solid;
border-width: 1px;
width: 900px;
height: 765px;
}

.vertical-align{
vertical-align: middle;
}

.nikki-photo{
vertical-align: middle;
margin-top: 10px;
margin-bottom: 20px;
}

#main-photo{
border-style: double solid double solid;
border-width: 10px 15px 10px 15px;
boeder-color: #ff6347;
}

table {
width: 900px;
height: 300px;
border-collapse: separate;
border-spacing: 10px;
}

#tr-size{
height: 3em;
}

a:link {
color: blue;
}

a:visited {
color: red;
}

a:hovor {
color: blue;
}

a:active {
color: red;
}
posted by yuuya1986 at 17:43| Comment(0) | HTML/CSS | このブログの読者になる | 更新情報をチェックする

第12回 CSS 〜箇条書き〜

今までHTMLで行っていた表現をCSSで。
非推奨とかよく分かんなかったけど今ならちょっと分かる気がする。
前回がちょっと長めだったんで今回の範囲は短め。

【この課での目標】

CSSを用いての箇条書き表現

【教材範囲】

はじめてのホームページHTML入門 の192〜199ページ

【成果物】

http://programming.so.land.to/20101124-2.html
※Chromeだと見れません。

【つまづいた箇所・解決法】

特に無し

【未解決の悩み】

CSS上の#を付けるor付けないの区別はなんだろう?

【ソース】

※タグの囲み(<)を半角から全角に置換してあります。

〜HTML〜


<html>
<head>
<title>CSSを使った記述2</title>

<link rel="stylesheet" type="text/css" href="20101124-2.css">

</head>
<body>

<div>
<ol id="list-style">
<li id="style-yazirushi">ね</li>
<li id="style-yazirushi">うし</li>
<li id="style-yazirushi">とら</li>
<li>う</li>
</ol>
</div>

<div>
<ul id="list-style">
<li>A</li>
<ul>
<li>AA</li>
<li id="style-circle">AO</li>
</ul>
<li>B</li>
<li>O</li>
<li class="new-icon">AB</li>
</ul>
</div>


</body>
</html>


〜CSS〜

#list-style {
list-style-type: upper-roman;
}

ul {
list-style-type: disc;
}

#style-circle {
list-style-type: circle;
}

#style-yazirushi{
list-style-image: url(yazirushi01.jpg);
}

.new-icon {
background: url(new01.gif) no-repeat 40px 2px;
}

body {
color: white;
background-color: gray;
}
posted by yuuya1986 at 16:45| Comment(0) | HTML/CSS | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。