My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

6/17 [HTML5/CSS] レスポンシブサイト(固定レイアウト)/ [CSS3] 角丸 / [PHP] 各種RSSを取得

  1. [HTML5/CSS] レスポンシブサイト(固定レイアウト)
  2. [CSS3] 角丸
  3. [PHP] 各種RSSを取得

[HTML5/CSS] レスポンシブサイト(固定レイアウト)

以下リンク先の演習課題によりレスポンシブサイトの作成方法を学びました。

[課題] 
固定レイアウトパターン:構造 - Webデザインの勉強|1月27日開講クラス 初心者の勉強法:
http://d.hatena.ne.jp/web-0127/20140709/p1

[模範回答]
固定レイアウトパターン:HTML+CSS - Webデザインの勉強|1月27日開講クラス 初心者の勉強法:
http://d.hatena.ne.jp/web-0127/20140710/p1

[CSS3] 角丸

基本書式:

border-radius:
X(水平)方向 左上 右上 右下 左下 / Y(垂直)方向 左上 右上 右下 左下
楕円の半径をセット


以下リンク先の説明にてしくみを理解、演習により使い方を学びました

参照:
角丸をつける - Webデザインの勉強|1月27日開講クラス 初心者の勉強法:
http://d.hatena.ne.jp/web-0127/20140724/p1

border-radius-CSS3リファレンス:
http://www.htmq.com/css3/border-radius.shtml

[PHP] 各種RSSを取得

各種RSS情報の取得方法は以下リンク先にて確認できます。

RSSを取得:simplexml_load_file() - Webデザインの勉強|1月27日開講クラス 初心者の勉強法:
http://d.hatena.ne.jp/web-0127/20140725/p1


[応用編]

Googleアラートの検索結果をRSSで取得 (6/20 追記)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Googleアラートの検索結果をRSSで取得・表示</title>
<style>
span {
  margin-left: 1em;
}
</style>
</head>
<body>
<h2>Googleアラート検索結果</h2>
<p>(キーワード:ビートルズ)</p>
<?php
$url = 'http://www.google.com/alerts/feeds/14468506379246292758/17201638830648711883';
$rss=simplexml_load_file($url); //Googleアラートで取得したURLを入れる
foreach($rss->entry as $result){
    $link=$result->link->attributes()->href;
    $title=$result->title;
    $date=date('Y/m/d H:i', strtotime($result->published));
    print '<li><a href="'.$link.'">'.$title.'('.$date.')</a></li>';
    print(PHP_EOL);
}
?>
</body>
</html>

[実行結果]