HTML4,5 – HTML5とCSS3を使い始める

HTML5とCSS3を使い始める

HTML5に対応しているブラウザといえば、
Google Chrome 3.0 以降
Safari 3.1 以降
Firefox 3.5 以降
Opera 10.5
Internet Explorer 9
ということです。(by wiki)

現在はwebkitエンジン採用のブラウザが最先端らしいです。

ブラウザ レンダリングエンジン javascriptエンジン
IE Trident JScript
Firefox Gecko SpiderMonkey
Chrome WebKit V8
Safari WebKit JavaScriptCore
Opera Presto Charakan

最もシェアを占めているIE6,7,8に非対応というのがネックということで、HTML5は使えないのか?と思いきや、どうやら使えるようにできるjavascriptファイルが存在するらしい。(今頃。。。)

そのファイルが、html5shivってやつ。これを落として読み込んでもいいけど、jQueryじゃないけど、わざわざ落とさずにGoogleから読み込むのが主流。

head内に以下を記述。body直前はだめとのこと。

(さらに…)

2012年12月19日8:51 PM | カテゴリー: CSS2,3,HTML4,5 | コメント(0)

PCサイトを携帯サイトに対応させるには

PCサイトをiphoneに対応させる方法を試してみました。

やり方は、携帯用のスタイルに作り替えたミラーサイトを準備するところから始めます。

http://www.nkdesk.com/の携帯サイトのurlをhttp://www.nkdesk.com/iphone/としてindex.htmlのディレクトリにiphoneフォルダを作って、そこにコピーを作ります。

そしたら、iphoneフォルダ内コピーの方をiphone画面に合わせて作り変え、もちろんスタイルも変えて、http://www.nkdesk.com/に携帯でアクセスがあった時に、http://www.nkdesk.com/iphone/にリダイレクトさせるようにします。

(さらに…)

2012年7月26日6:10 PM | カテゴリー: HTML4,5,iphone | コメント(0)

ソーシャルネットボタン設置

ブログ形式のサイトへ移行したのを気に、他のサイトでつけているようなボタン類(はてな、ツイッター、Google、facebook)を設置して見ました。

簡単そうで、以外に時間がかかりますね~。軽く○時間はかかりましたよ・・・。


(さらに…)

2012年2月2日11:28 PM | カテゴリー: HTML4,5 | コメント(0)

ロールオーバーボタンの作り方

画像をbackgroud-positonで動かしていく方法は、地味にめんどいので、画像切替型で。

で、使う画像を必要か否かは別として適当に用意しておきます。
83.gif 83.gif
84.gif 84.gif
85.gif 85.gif
86.gif 86.gif
87.gif 87.gif
88.gif 88.gif
89.gif 89.gif
90.gif 90.gif

(さらに…)

2012年1月26日10:32 PM | カテゴリー: HTML4,5 | コメント(0)

コピー用(骨格、clearfix)

骨格(コピー用)

何も考えずコピーする部分。xml宣言とhtmlの文字コード(utf-8の部分)を変更、タイトル、説明、キーワードの書替え、外部cssとjsのディレクトリ指定。jqueryのファイル読み込み。

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>htmlとcssの復習</title>
<meta name="description" content="htmlとcssの復習ページです。" />
<meta name="keywords" content="html,css,復習" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css; charset=utf-8"" />
<meta http-equiv="Content-Script-Type" content="text/javascript; charset=utf-8"" />
<link rel="stylesheet" type="text/css" href="../style/style.css" media="all" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js" charset="utf-8"></script>
<script type="text/javascript" src="js/2.js" charset="utf-8"></script>
</head>
<body>
</body>
</html>

floatの回りこみ解除(コピー用)

clearを指定できる要素がない場合のfloatの回り込みの解除の方法として、擬似クラス:afterを使った方法がある。

(要素):afterセレクタは、その要素の終了タグの直前に差し込まれる擬似要素を指し、(要素):beforeセレクタは、要素の開始タグの直後に差し込まれる擬似要素である。

Content:”生成したい内容”で、生成したい内容が擬似要素として差祖困れる。

floatボックスが複数入ったdiv要素に対して、class=”clearfix”を指定するのが一般的。あとは、IE対策も含めて以下をcssファイルにコピーすればOK。2つのクラス指定は、class=”z42 clearfix”のようにする。
複数のfloatボックスの親のdiv要素にclearfixを指定した場合の擬似要素の生成場所は、/divの後ではなく、直前であるので注意する。

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
    }
 
.clearfix {
    min-height: 1px; }
 
* html .clearfix {
    height: 1px;
    /*\*//*/
    height: auto;
    overflow: hidden;
    /**/
    } 

いまやこっちのほうが一般的か?(携帯含めて)

.clearfix:after {
    content: "";
    display: block;
    clear: both;
    }
* html .clearfix {
    height: 1px;
    /*\*//*/
    height: auto;
    overflow: hidden;
    /**/
    } 

tableフォーマット(コピー用)

つい癖で、border=だけで、collapseの存在を忘れる。もちborderも指定する。

/*テーブルフォーマット*/
table.b31 {
	font-size:15px;
	margin:5px 10px;
	border-collapse:collapse;
	}
table.b31 th,table.b31 td {
	border:solid 1px #aaa;
	}
table.b31 th {
	text-align:center;
	background:#eef;
	padding:4px 5px;
	font-size:15px;
	font-weight:bold;
	}
table.b31 td {
	padding:5px 10px;
	font-size:15px;
	}

2012年1月26日9:31 PM | カテゴリー: HTML4,5 | コメント(0)

1 / 212