出張パソコンサービス わいわいPC.

電話:090-3300-4121 メール:mail@y2pc.net

わいわいPC.ブログ

 

calendar

S M T W T F S
1234567
891011121314
15161718192021
22232425262728
2930     
<< April 2018 >>


 

categories


 

archives


 


 

ウェブサイトのレスポンシブ化:覚書 2

先の記事 ウェブサイトのレスポンシブ化:覚書 では、サイトを印刷するときに不具合が生じるので、HTMLではなく1つのCSSで画像幅によるスタイルを定義する方が良い。

HTMLは<head>〜</head>内に下記のような一般的な styleseetの指定をする。

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

 

ブログタイトルをRSSで:覚書

サイトの<head>〜</head>内に書き込む

<!-- 新着情報用 -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">

//Google Feed Api
google.load("feeds", "1");

function initialize() {
var feed = new google.feeds.Feed("表示させたいRSSフィードのURL");
feed.setNumEntries(表示させたい件数);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var dd = new Date(entry.publishedDate); // now
var yearNum = dd.getYear();
if (yearNum < 2000) yearNum += 1900;
var m = dd.getMonth() + 1;
if (m < 10) {m = "0" + m;}
var d = dd.getDate();
if (d < 10) {d = "0" + d;}
var date = yearNum + "." + m + "." + d + " ";
container.innerHTML += "<li><span>" + date +" </span>" +" <a href='" + entry.link + "' target='_blank'>" + entry.title + "</a></li>";
}
}
});
}
google.setOnLoadCallback(initialize);

</script>

<!-- /新着情報用 -->
 


ウェブサイトのレスポンシブ化:覚書

<head>内に記述
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

各画面幅に対応したCSSファイルを添付(例は 960px以上, 959〜641px,640px以下 の3つ を制作)
1) <link href="css/styl.css" rel="stylesheet" type="text/css" media="screen and (min-width:960px)" />
2) <link href="css/tablet.css" rel="stylesheet" type="text/css" media="screen and (max-width:959px) and (min-width:641px)" />
3) <link href="css/smart.css" rel="stylesheet" type="text/css" media="screen and (max-width:640px)" />
 
続きを読む >>

<< | 2/11PAGES | >>