カミジン@ファンタの平穏な日常 Blog

パソコン・カメラ・アニメがないと3日持ちません。そんな学生のダラダラ日記。

イラスト:con_cen_t

0iPhone向けサイトのHTML/CSS まとめ

カテゴリー:HTML/CSS,iPhone,Java Script,WEB,デザイン

iPhone/iPod対応のサイトを作りには少々コツが必要です。せっかくなので調べた内容を書いていきたいと思います。

・CSSの振り分け

まずiPhoneとパソコンなどに別々のCSSを読み込ませるのがサイト作りの一歩です。

<link media=”only screen and (max-device-width:480px)” href=”iphone.css” type=”text/css” rel=”stylesheet”/>
<link media=”screen and (min-device-width:481px)” href=”pc.css” type=”text/css” rel=”stylesheet”/>

このように<head>内に記述すると、「iPhoneのディスプレイの横幅は最大480px→iphone.cssを読み込む」 「横幅の最大が481px以上あるパソコン/iPad→pc.css」が読み込まれます。
この機能は確かCSS3.0の機能だったと思います。JavaScriptなどを使用しないため容易に実装できるのがありがたいですね!
iPhoneだけに表示させたくない所(ファイルアップロードなど)を「display:none;」指定し、それをiphone.cssに記述するとiPhoneだけが表示されないということも可能です。

・サイズ/ズームの指定

ここでは、iPhone3GとiPhone4の画面解像度は同じと考えてください。(320×480)
通常のサイトを見るとiPhoneでは「縦の時:三分の一 横の時:2分の一」に縮小されています。 その時のサイズの変更をやめる
また、つまんだ時の縮小/広げた時の拡大などを禁止する方法は以下です。<head>内に書き込みましょう。

例:<meta name=”viewport” content=”width=480, user-scalable=no, maximum-scale=0.6667″ />
上の例では横幅が320pxのiPhoneに480pxのサイトを押しこめ、拡大/縮小を禁止しています。

他の詳細は以下です この画像で分かるでしょか?(クリックして拡大です) 単位は無しで「, 」で区切ってくださいね~

viewport

設定項目 説明 標準値 設定範囲
width ページの横幅 980px 200px ~ 10,000px

device-height(デバイス値をセット)

height ページの縦幅 自動 223px ~ 10,000px

device-height(デバイス値をセット)

initial-scale 標準の拡大率 1 0 ~ 10
user-scalable ユーザーへの拡大縮小の許可 yes yes もしくは、 no
minimum-scale 拡大率の下限 0.25 0 ~ 10
maximum-scale 拡大率の上限 1.6 0 ~ 10

 

・JavaScriptで表示するページを振り分ける

下のコードで対応します。アドレスを書き換えてください。
useragentを取得して順に検索をしていますね。コードを変えれば様々なことに応用できそうです。

<script type=”text/javascript”>
// iPhoneまたは、Androidの場合は振り分けを判断
if ((navigator.userAgent.indexOf(‘iPhone’) > 0 && navigator.userAgent.indexOf(‘iPad’) == -1) || navigator.userAgent.indexOf(‘iPod’) > 0) {
if(confirm(‘ようこそ。€このサイトにはスマートフォン用のサイトがあります。€表示しますか?’)) {
location.href = ‘http://kamijin_fanta.info/phone/';
}
}
</script>

 

iPhoneのサイトを作るときは以上のことを頭に入れておくとスラスラとかけると思います。

それとiPhoneなどは「クリックではなくタップ」とのことも頭に入れておきましょう。つまりリンクなどが小さすぎるとタップしにくいということです。小さなボタンにもボーダーなどを設定し、範囲を広くすることも大切です。

では、健闘を祈ります! 質問あればコメント/ツイッターで待ってますのでb

 

最後に忘れていた画像

iPhone-size

0超電磁砲OVA OP曲 future gazer

カテゴリー:アニメ・漫画,デザイン

future-gazer-2

fripSideのfuture gazerがMステランクインしてたねw やっぱ超電磁砲強いね~ 歌詞とか載せておきますよ!

CD買いたいんだけどどうせだったらメイトで特典欲しいじゃないですか (何があるか調べてないけど

歌詞カードつくってみたけど適当ですみませんね!wwww Photoshopちょいちょいいじったところに歌詞載せただけですよー!

 

future-gazer-kasi

 

ova-2

とある科学の超電磁砲OVAの発売も10月27日 いよいよ近づいてきましたね!あーなんか楽しみだわぁ 親が買ってくれる可能性がwww

本編のブルーレイ揃えてるわけじゃないけどいいよね?うん

今回もまた都市伝説繋がりとか聞いてるけどどんな感じだろ?OPはよかったなー!本編のOPとは違って明るい感じで

0今欲しいもの

カテゴリー:HTML/CSS,Java Script,PC全般,アニメ・漫画,日記,自作PC

風邪で本日休みましたカミジン@ファンタです。 なんか汗出るくらい暑いんですけど汗は風邪の時に良いんでしたっけ??www

まぁそんな事をかきに来たわけでもないんですがね~ 今日はカテゴリいつもより多いですよ!それだけ欲しいものが多いんですがw

「お金があったら」欲しいものを書きますよ! 買えないのがほとんどですwwwwwww

さて行きましょー!

 

続きを読む…

0FC2ブログでの広告を消す方法

カテゴリー:HTML/CSS,WEB

ホントはいけないんですけどFC2ブログを広告なしにできるので書いておきます。

フッダ&アカマイ&一ヶ月以上更新なしの広告削除

ブログのコントロールパネルに行きます

http://blog110.fc2.com/control.php

左のメニューの[環境設定]から[テンプレートの編集]に移動します。
「〇〇のCSS編集」とかの下に色々と英語だらけのが出ましたね?
一番上に数行改行をしたところに下の文字をコピペして貼り付けてください。

#googleAdContainer { display : none; }
#googleAdContainerNoActive { display : none; }
#ad1 { display : none; }
#ad2 { display : none; }

ad

間違がなければ[更新]を押して更新すれば一番下の広告が消えています。

なお、この方法は規約違反(だと思う)なので利用する際は自身の責任で行ってください。

広告の意味をかみしめた上でやろうという人は自信の責任で…では

0配列についてのメモです~

カテゴリー:Java Script

JavaScriptで配列に配列入れるのってどうするのかな?と思ってたらwikibooksが分かりやすかったので書いときます

http://ja.wikibooks.org/wiki/JavaScript/Array

var array = [
[ 'A', 'B', 'C', 'D', 'E' ],
[ 'A', 'B', 'C', 'D', 'E' ],
[ 'A', 'B', 'C', 'D', 'E' ],
[ 'A', 'B', 'C', 'D', 'E' ],
[ 'A', 'B', 'C', 'D', 'E' ]
];
alert( array[0][0] ); // A
alert( array[1][0] ); // A
alert( array[2][2] ); // C
alert( array[3][2] ); // B
alert( array[4][4] ); // E

こういうの「多次元配列」とか「ジャグ配列」って言うんですね

他の言語でも使いそうだからしっかり覚えないと・・・

 

そして、配列の走査は下のようにするみたいです

http://d.hatena.ne.jp/amachang/20070202/1170386546

var array = ['hoge', 'fuga'];
for (var i = 0; i < array.length; i ++) {
alert(array[i]);
}

多次元配列でも同じような感じでいけますね

連想配列には for in を使うそうです

0近所の運動会いってきた!

カテゴリー:写真,日記

IMG_0303

秋の空が広がる中、運動会が開催されました。。。。。

学校のじゃない自治会のやつなんだけどね~

受験生とか関係なく、そういうイベントには絶対に参加するという4人がいるのですよっ!

ある意味「アホ」だけど良いことだよね?w

真面目に子供と一緒に運動会行ってるんだぜ?www

最後の綱引きは 楽しかった。。。!

0CD買ったよー ツキアカリのミチシルベ/ステレオポニー

カテゴリー:アニメ・漫画,日記

文化祭で使った曲 ネットから拝借していたので購入させていただきました。

学校で使う分には著作権関係ないみたいだけど(先生談

いい曲だと思うので買ったー!

_DSC3878_DSC3880

2曲目の橙色好きです

なんともいえないあの訴えるというかねー

文化祭では橙色でみんなを泣かせたらしいですしwww

じゃここまで!

あっいい忘れてた 重要なことじゃないんだけどさ

けいおんのふわふわ時間の歌詞で 「あぁ神様お願い一度だけの」ってあるじゃない

相手が神様に見える場合どうするんですかね?w

0Ajax XMLHttpRequest メモ

カテゴリー:HTML/CSS,Java Script,WEB

Ajaxを実装したかったんだがクロスドメインだったので、、、、、、

参考:http://blog.livedoor.jp/dankogai/archives/51502865.html

getURL = (function(){
var xhr;
if (window.XDomainRequest){
xhr = new XDomainRequest();
return function(url, callback){
xhr.onload = function(){ callback(xhr.responseText, xhr.contentType) };
xhr.open('GET', url);
xhr.send();
};
}
else{
xhr = new XMLHttpRequest();
return function(url, callback){
xhr.onreadystatechange = function(){
if (xhr.readyState === 4)
callback(xhr.responseText, xhr.getResponseHeader("Content-Type"));
};
xhr.open('GET', url, true);
xhr.send();
};
}
})();

こんな感じで関数作っておくと下みたいな感じで呼び出せるようになります。

第1引数でURLを指定して、第2引数でコールバックを指定します。第2引数でレスポンステキスト、レスポンスヘッダを返します。レスポンステキストを取得して関数を実行します。

getURL(‘http://api.dan.co.jp/jsonenv’,function(c,t){alert(c)})

function(レスポンステキスト,レスポンスヘッダ){関数・命令}って言うふうに書くと良いですー

これでちょっとやりたいことができそうですー!

0FAT32→NTFS フォーマットせずに変更する方法 (忘備録)

カテゴリー:PC全般,自作PC

現行のファイルシステムには、「FAT32」と「NTFS」があります。USBメモリなどの標準はFAT32です。NTFSの方が新しいのですがそこまで浸透していません。NTFSは管理領域で多少の容量を取るため、1G未満のメモリなどはFAT32をお勧めします。それ以外にFAT32を勧めるのはセキュリティ的な問題でしょうか?

 

FAT32とNTFSの違い

FAT32ではファイルを削除するとディスクの内容がすべて消えます。これが普通だと思う方も多いかと思います。ですがNTFSはファイルを削除しても実際には消えていないのです。「消えたという事実」だけを書き込むのです。ここにファイルが有りますという記録を消すのです。普通はアクセスできなくなるのですが、専用のソフトを使うことによってその「実態」を見つけ出すことができるのです。 なので見られたらまずいものはFAT32で管理することをおすすめします。その他の違いは画像にまとめてみました。

FAT32orNTFS

 

FAT32→NTFS 変更する方法

スタート→すべてのプログラム→アクセサリ→コマンドプロンプト

でコマンドプロンプトを出します。そして、「convert c: /fs:ntfs」と入力します。c:の部分はドライブ名に書き換えてください。2つほど質問が出てくると思いますので、読んだ上、YかNを入力しエンターを押します。 ファイルが残されたままFAT32からNTFSになります。

0日本橋~心斎橋 お出かけログ

カテゴリー:PC全般,日記,自作PC

10月7日 日本橋&心斎橋行ってきました!

あっ 書いてるのが7日ね!wwwww

ブレイクブレイド第三章見に行ってきました~

 

んで日本橋ソフマップにまず行ったんだけど・・・・・・

うわぁ・・・・ほしぃい・・・・・・

だがカネがないんだよなーーーー

今はこんな値段なのかよ関心だ

IMG_0249

 

親が外付けのHDD欲しいと言ってたんでHDD&ケース購入。

 

IMG_0250

IMG_0251

どうやらソフマップのポイントカードが新しくまたできたらしいーー

金持かからないので加入、、、、

IMG_0252

ケースはこんな感じです。

IMG_0277

IMG_0278

なかなかアルミっぽい高級感が出てますねー(900円

 

IMG_0279

専用ケースも付いてきてなお、よしです!!!

中身の方は、、、、、

hddcopy3

まぁーなんともいえないほど普通ですねーwww

クリア!!!!w

 

 

一旦日本橋離脱です

心斎橋いく途中にこんな看板が

IMG_0254

今日まで・・・だと?そして心斎橋「先行販売」だと!?www

これは買うしかない!!!!

どうやら心斎橋の2店舗で2種類の限定品が売られているらしい・・・・

よし、両方買うb

ということで2店舗目で試食。

IMG_0256IMG_0257IMG_0259IMG_0260

なかなかウマそうですなー!!!

「チーズフォンデュ」と「ジャーマンソーセージ」です

 

まずはチーズフォンデュから、、、

IMG_0261IMG_0262

チーズがうまいっ!!!!

(もっとチーズ多くてもいい気がするが)

なんかあっさりしていてスパイス効いててなかなかの感じです!!!

 

そしてジャーマンソーセージです

IMG_0263IMG_0264

んーこちらは「肉」っていう感じがして食べ応えが結構ありますねー!

 

ちなみにファンタはチーズフォンデュが好みですー!

あー 美味しかった♪

全国でも売られるみたいなのでお楽しみにー!

 

今日はいつもと違うブログの投稿方法でしたー!wwww

 

なんかアマゾンさん、けいおん4冊一緒に買うと10パーポイントとかやっているのでお見逃しなく!

 

ではでは~!!