Category Archives: javascript

iPhone用htmlのヘッダー要素のルールβ版

  • viewportは幅を指定するためのもの。
  • javascript部分はアドレスバーを非表示(画面の上に隠す)にするためのもの。
  • <link rel="apple-touch-icon" href="shortcut.png">はホームアイコンを設定するためのもの。
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>タイトル</title>
	<link rel="stylesheet" href="スタイルシートのパス" type="text/css">
	<link rel="apple-touch-icon" href="画像のパス">
	<script>
		function doScroll() { if (window.pageYOffset === 0) { window.scrollTo(0,1); } }
		window.onload = function() { setTimeout(doScroll, 100); }
	</script>
</head>

ホームアイコンを作成する

ツヤツヤ処理とか角丸とかは勝手にiPhone側でやってくれるのでベタなデザインにする。

画像サイズ
57×57ピクセル(但し、正方形であれば57ピクセル以上でも可)ただし、iPhone4は114×114

画像フォーマット
gif,jpg,png,bmpいずれも可

ソースコード表示に便利なsyntaxhighlighter

ソースコード表示に便利なsyntaxhighlighter

ブログに貼り付けたソースを見やすくしたいため色々調べてみるとsyntaxhighlighterがいろんなサイトで使われていたのでご紹介。

DL:http://code.google.com/p/syntaxhighlighter/

対応言語
C,C++,C#
CSS
Delphi
Java
JavaScript
PHP
Python
Ruby
SQL
VB
XML/HTM

使い方はとっても簡単。
<pre></pre>の間に表示したいコードを書きます。
<pre>のclassにhtmlやcssを書くだけ。

<pre name=“code” class=“html”>
ここにコードを書く。
</pre>
<link type=“text/css” rel=“stylesheet” href=“Styles/SyntaxHighlighter.css”></link>
<script language=“javascript” src=“Scripts/shCore.js”></script>
<script language=“javascript” src=“Scripts/shBrushXml.js”></script>
<script language=“javascript” src=“Scripts/shBrushCss.js”></script>
<script language=“javascript”>
dp.SyntaxHighlighter.ClipboardSwf = ‘Scripts/clipboard.swf’;
dp.SyntaxHighlighter.HighlightAll(‘code’);
</script>

サンプル

<a href="http://www.niwadesign.jp/">ニワデザイン</a>

※Word Pressなどで使う場合はjavascript部分はfooter.phpに書いときましょう。