6/17(火)授業メモ
午前の授業は、昨日につづきレスポンシブWebデザインです。
午後は、CSS3を使用し角を丸くするborder-radiusと、PHPでブログやYahoo!のトピックスのrssを取得する方法を学びました。
①レスポンシブWebデザインは、固定レイアウトによるレスポンシブWebデザインでした。テキストP48と学校ブログ 7/9 の記事 固定レイアウトパターン | 構造 以降を参照し制作を行いました。
1-1 ) max-width
※<img>の幅の最大値を指定。実数値にpxなどの単位をつけて指定する方法と、親ボックスに対する割合を％で指定する方法があります。 また、幅を制限させないようにするにはnoneを指定します。
1-2 ) border-bottom: solid 5px taransparent;
※ taransparentは透明(初期値)
※ Firefox、Safari、Chromeは、この指定がなくても透過されます。（IEやOperaではこの指定が必要です）
②CSS3を使用し角を丸くするborder-radius
2-1 ) IEは対応していないので四角のまま
2-2 )グローバルナビゲーションが丸いのは主にCSS3で角丸にしている
2-3 ) border-radius: 10px 20px 30px 40px;
※ 左上 右上 右下 左下
※ radiusは半径
2-4 ) それぞれ指定して角を丸くする
#radius3 {
border-top-left-radius: 10px;
border-top-right-radius: 15px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 25px;
}
※ 上から、左上 右上 右下 左下 への命令。
2-5 ) 真円にする
#radius4 {
width: 100px;
height: 100px;
border-radius: 50%;
}
③rssを取得
外部ブログのRSSを取得し表示（学校ブログ 7/25の記事を参照 )
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Yahoo! トピックスの RSS を表示</title>
<style>
span {
margin-left: 1em;
}
</style>
</head>
<body>
<h2>RSSを表示</h2>
<?php
$url = 'http://rss.dailynews.yahoo.co.jp/fc/rss.xml';
$rss = file_get_contents($url);
$xml = simplexml_load_string($rss);
$channel = $xml->channel;
$feed_title = $channel->title;
print '<h3>'.$feed_title.'</h3>';
print '<ol>';
foreach ($channel->item as $item) {
$link = $item->link;
$title = $item->title;
$date = $item-> pubDate;
$date = date('Y.m.d', strtotime($date));
print "<li><a href=\"$link\" title=\"$title\" target=\"_blank\">$title</a><span>($date)</span></li>\n";
}
print '</ol>';
?>
</body>
</html>
※ http://rss.dailynews.yahoo.co.jp/fc/rss.xml 部分にをrss取得したいブログのアドレスを入れる
※ 取得したいブログ等のアドレスの後ろに、/rssを入力。
※ RSSは、ニュースやブログなど各種のウェブサイトの更新情報を簡単にまとめ、配信するための幾つかの文書フォーマットの総称である。(wikipedia参照)
★余談★
6/12(木)放送のカンブリア宮殿：２５兆円企業 トヨタ復活劇の真実！〜豊田章男 激動の5年〜を見て、「継続は力なり」だな！仕事は、面白みやワクワク感がないとダメだなと感じた。何かワクワクできるようなWebサイト・喜んでもらえるWebサイト制作をしたい。
