2010年11月24日

CSSの基礎 〜文字・画像・背景など〜

HTML/CSSを使ってのサイトデザインを行っています。
使いこなせては全くいないけど、どうやってサイトがデザインされてるのかなんとなく分かってきた。


【この課での目標】

CSSを用いてのサイトデザイン

【教材範囲】

はじめてのホームページHTML入門 の141〜191ページ

【成果物】

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

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

CSS上の効果を二つ使う方法がわからない。
→spanで二度囲んでやる。

CSS上に書き込んだ結果が表れない。
→;の書き忘れ。

span crass="◯◯"が有効にならない
→CSS上で.の打ち忘れ。

画像の挿入の際にフォルダの中に入れておくと検知されない
→同じ層へ。

positionの後のcenter、topなどは半角スペースで並列化能。


【未解決の悩み】

text-indent: -1.5em;
が表示されず。


【ソース】

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

〜HTML〜

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

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

</head>
<body>
<h1>CSSを使った記述の練習<span id="small">〜少しずついじっていきます〜</span></h1>

<div id="padding-20151015">
こんにちは。<br>
<span id="big-t">CSS</span>を使って<br>
<span id="big-t2">サイトのデザイン</span>を行っています。<br>
</div>

<div id="margin-1em">
<span id="cap-i">この行では斜体表示を行います。</span><br>
<span id="over-t">この行では上線を表示します。</span><br>
<span id="under-t">この行では下線を表示します。</span><br>
</div>

<p class="l-space-25">
ここでは文章の行間の調整あたりを行っています。<br>
PCはMacでテキストソフトはmiを使っています。<br>
何が一番使いやすいんだろ。<br>
</p>

<p class="background">
画像の背景表示<br>
テスト
</p>

<p id="indent-t" class="bottom-em40">
文章の一文字目にだけ空白を加えます。<br>
色々とやってみて、
ちゃんと出来ているかテスト。

<div id="photo-border">
<image src="india01.jpg">
<span id="big-t"><span id="under-t">写真です。</span></span>
</div>

<div id="right-a" class="padding-20151015">2010/11/24</div>
</body>
</html>


〜CSS〜



body {
color: gray;
background-image: url(gradient.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-color: pink;
}

h1 {
color: #ff6600;
font-size: 2.5em;
text-align: center;
padding: 0.5em;
border-style: double;
letter-spacing: -0.15em;
}

#small {
font-size: 50%;
}

#right-a {
text-align: right;
}

#big-t {
font-weight: bold;
padding: 0.2em;
border-style:solid none solid none;
border-width: 3px;
border-color: #ff6666;
background-color: #ffff00;
line-height: 40px;
}

#big-t2 {
font-weight: 900;
text-indent: -2em;
}

#cap-i {
font-style: italic;
}

#indent-t{
text-indent: 1em;
}

#over-t{
text-decoration: overline;
}

#under-t{
text-decoration: underline;
}

.bottom-em40{
padding-bottom: 5em;
}

#padding-20151015{
padding: 20px 15px 10px 15px;
}

#margin-1em{
margin: 1em;
}

#photo-border{
margin-bottom: 1em;
padding: 1em;
border-style: solid;
border-width: 1px;
background-color: #ccff99;
background-image: url(gradient.jpg);
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}

p {
line-height: 1.5em;
}

.l-space-25 {
letter-spacing: 0.25em;
}

.l-space-25:first-letter{
color: #ff6600;
font-size: 200%;
border: solid 2px;
padding: 3px;
margin: 3px;
}

.background{
background-image: url(gradient.jpg);
}
posted by yuuya1986 at 13:22| Comment(0) | HTML/CSS | このブログの読者になる | 更新情報をチェックする

2010年11月22日

PHP 〜if文、ループの応用〜

このままのペースだと今月中にやりたいことが終わらない。
「やり切る」ことの大切さ。

そういえばソース上ではインデント入れてるんですがここでは反映されてないみたいです。
苦肉の策で<を<に置換してソースここに書いてるんだけどどうしたもんか。

【この課での目標】

PHPのif文、ループの応用

【教材範囲】

http://y-mahata.s-tanno.com/pukiwiki/?10_weeks_webdev_learninng
※10週間web開発講座の3週目後半部分

【成果物】

http://programming.so.land.to/20101122-1.php
※Chromeだと見れません。

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

if文でエラー多発
→$変数の後には半角スペース。

各種エラー
→for,while文がまだ完全に覚えられてない。

変数同士の掛け算の後のピリオドの位置
→半角スペース後にピリオド。

【未解決の悩み】

特になし

【ソース】

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

<html>
<head>
<title><?php echo "2010/11/22 @";?></title>
</head>
<body>
<?php

$ten = 10;

if (0 < $ten) {
echo "$ten は0より大きいです<br />\n";
}

if (0 > $ten) {
echo "$ten は0より小さいです<br />\n";
}

//変数の後には半角スペース

if (0 < $ten){
echo "$ten は0より大きいです。<br />\n";
} else {
echo "$ten は0より小さいです。<br />\n";
}

echo "<br />\n";

echo "forでの九九<br />\n";
for ($i = 1; $i <= 9; $i++){
for ($j = 1; $j <= 9; $j++){
echo $i * $j ." ";
}
echo "<br />\n";
}

echo "<br />\n";

echo "whileでの九九<br />\n";

$i = 1;
while ($i < 10) {
$j = 1;
while($j < 10) {
echo $i * $j ." ";
$j++;
}
echo "<br />\n";
$i++;
}

?>
</body>
</html>
posted by yuuya1986 at 16:47| Comment(0) | PHP | このブログの読者になる | 更新情報をチェックする

PHP ~配列・ループ~

今回もPHPの復習です。
ちなみに教材に照らし合わせると、4週目までは授業を受けています。
ですが、完璧に理解してるとは言えないので反復に重きを置きます。

【この課での目標】

PHPで配列・ループ

【教材範囲】

http://y-mahata.s-tanno.com/pukiwiki/?10_weeks_webdev_learninng
※10週間web開発講座の3週目途中まで

【成果物】

http://programming.so.land.to/20101121-4.php
※Chromeだと見れません。

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

各種エラー
→;の入力し忘れが多発。慣れる。

echo $hairetsu["blue"]などの際に、配列の値名が文字列の場合ダブルクオテーションで挟むことに気づかなかった。

【未解決の悩み】

echo $hairetsu["blue"]のように書いた場合の改行はどうやるのか。
次の行でecho "<br />\n"を入れてやれば改行できる

【ソース】

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

<html>
<head>
<title><?php echo "2010/11/21 C";?></title>
</head>
<body>
<?php

$hairetsu = array("blue ", "gray ", "red ");
$hairetsu[2] = "yellow";

echo $hairetsu[0];
echo $hairetsu[1];
echo "$hairetsu[2]<br />\n";

$hairetsu = array("blue" => "青色 ", "gray" => "灰色 ", "red" => "赤色 ");

echo $hairetsu["blue"];
echo $hairetsu["gray"];
echo $hairetsu["red"];
?>

<?php

for($i =1; $i <= 5; $i++){
echo "$i<br />\n";
}

$i = 1;
while($i <=5){
echo "$i<br />\n";
$i++;
}

$hairetsu = array("blue ", "gray ", "red");

foreach ($hairetsu as $color){
echo $color;
}

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

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