編集後記The Diving Junky Magazine

HTML 5

仕事は忙しいけど、休みの日は自粛で引きこもり、ゆっくりパソコン作業ができたので、ずっとGoogleさんの検索結果で「ページがモバイルフレンドリーではありません。」と言われてた豪海倶楽部のサイトをやっと対応しました。

MacBook ProとiPhone 11 Pro

方法としては、WordPressのプラグインで端末によってテーマを使い分けるって方法です。

元々のテーマを元にサイドバーにあったプロフィールや目次などを本文の下に、縦長のレイアウトにしたスマホ用のテーマを追加、HTMLとCSSを修正しながら、iPhoneで見る代わりにMacのSafariのレスポンシブル・デザイン・モードで確認。

iPhoneやiPadの色々なバージョンの縦横、Macでの解像度別の確認もできます。

Safariのレスポンシブル・デザイン・モード

で、Googleのモバイルフレンドリーテストで「優れてる」と言われました。^_^

モバイルフレンドリーテストの結果

HTMLやCSSの編集は、昔ながらのテキストエディタで直打ち、確認はSafariでソースを見ながらです。

Safariでソースを表示

同じ機能は、Mac版の他のブラウザにもあって、Google Chromeのが使いやすい感じ。

メニューがまだ日本語化されてないけど、キャッシュの消去とハード再読込みがあるのが便利。

Google Chromeのデベロッパー ツール

Mac用にはFirefoxもMicrosoft Edgeもあります。

Microsoft Edgeは画面のレイアウトが見にくくて、Firefoxは再読込みの反応とかがいいんだけど、レスポンシブル・モードが効かない…。

Firefoxの開発ツール

ちなみにパソコンでどのWebブラウザーを使ってるか、1996年から2019年までのシェアの推移が分かる動画があって、なかなか面白い。

Netscape Navigatorの独壇場だった1996年、Windowsに標準搭載されたInternet Explorerが圧倒的なシェアを握った2001年、Firefoxが徐々に支持の伸ばし、1番多様だった2009年、そして2019年はGoogle Chromeがシェアを独占してる。

1996年 Q3のシェア
2009年 Q3のシェア
2019年 Q3のシェア

StatCounterのサイトで調べたパソコンとスマホ、タブレットを含めた日本のブラウザー・シェア（2020年3月）は、Chrome（45.33％）、Safari（31.64％）、IE（6.14％）、Firefox（7.24％）の順でした。ちなみに端末の方は、パソコンが59.08％でトップ、モバイル：37.46％、タブレット：3.47％です。

で、HTMLをいじってる内にそのバージョンも気になり、調べたら今はHTML 5がメインだと…。

ということで、ネットで調べながら、まずはパソコン用のテーマをHTML 5に書き換えました。

webサイトの中身、文章とか写真をレイアウトしてるのは、HTML（HyperText Markup Language）で、1997年に規格されたHTML 4が長らく標準的に使われていました。このバージョンからHTMLは文書構造を、文字の装飾などは別に用意したスタイルシートに書く様になりました。

Webの仕事をしていた頃、豪海倶楽部のサイト管理を請け負った2004年には、HTML 4で作りました。

html 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">

<TITLE>タイトル</TITLE>

</HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LEFTMARGIN="8" TOPMARGIN="8" MARGINWIDTH="8" MARGINHEIGHT="8">

本文...

HTMLの発展型としてXMLという規格が生まれ、それに準拠したXHTML 1.0が2000年に勧告され、ブログの普及に合わせて、2004年頃から標準的に使われるようになります。

ただ、比較的自由度のあったHTML 4に対して、仕様書に厳密適合させる必要があり、コードが長くなっていきました。

豪海倶楽部のサイトも2009年からXHTML 1.0で作る様になり、2010年にはWordPressというCMS（コンテンツ・マネージメント・システム）を使う様になり、サイトのデザインを一新しました。

xhtml 1.0

<?xml version="1.0" encoding="utf-8"?>
<!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" dir="ltr" lang="ja">
<head profile="http://purl.org/net/ns/metaprof">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="description" content="..." />
<meta name="copyright" content="..." />
<meta name="keywords" content="..." />

<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />

<script type="text/javascript" src="js/main.js"></script>

<title>タイトル</title>

</head>

<body>

本文...

ブラウザの種類も増えて、その見え方の違いを埋めるのにスタイルシートが複雑になっていきました。

.css

#main {
	background: #191919;
	filter: alpha(opacity=85); -ms-filter: "alpha(opacity=85)";
	/* IE用 最初に設定*/
	-moz-opacity: 0.85;            /* Firefox */
	opacity: 0.85;                /* Safari,Chrome */
	/* 角丸 */
	border-radius: 13px;         /* CSS3 */
	-webkit-borde-radius: 13px; /* Safari,Chrome */
	-moz-border-radius: 13px;    /* Firefox */
	/* 	behavior: url(/css/border-radius.htc);  - IE用 */
	/* ドロップシャドウ */
	box-shadow: 2px 2px 6px #333;
	-moz-box-shadow: 2px 2px 6px #333;
	-webkit-box-shadow: 2px 2px 6px #333;
	behavior: url(/css/ie-css3.htc);
	padding: 15px;
}

a.hover:hover img {
	filter: Alpha("opacity=80");opacity:0.8;
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	/* For IE 8 */
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

/* no Mac IE \*/

*1257897501* html .clearfix {
	height: 1%;
}


/* IE7,Mac IE5 */
.clearfix {
	display: inline-block;
}

/* WinIE6 below, Exclude MacIE5 \*/
* html .clearfix {
	height: 1%;
}

で、最新のHTML 5ではこんなに簡素になります。2014年に勧告され、特定のOSやブラウザに依存しないというのもメリットで、ビデオやオーディオもそのまま扱えます。

3年前のデータでは、50％以上のwebページがHTML 5を採用していて、これはユーザの使ってるブラウザでHTML 5に対応していないIE 8以前のシェアが減ってるのも影響してるみたい。

html 5

<!doctype html>
<html lang="ja">
<head>

<meta charset="UTF-8">
<meta name="description" content="..." />

<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="css/style.css">

<script src="js/main.js"></script>

<title>タイトル</title>

</head>

<body>

本文...

スタイルシートも簡単に。

.css

main { 
	border: 1px solid #999;
	background: #fff;
	padding: 9px; 
	/* 角丸 */
	border-radius: 8px;
	/* ドロップシャドウ */
	box-shadow: 1px 1px 4px #666;
}

2011年に転職してネットを見る時間が激減して、HTML 5の存在を見逃してた…。

トラックバック URL：
https://www.gokaiclub.com/2020/05/ryo/6280/trackback
りょう
りょう

1959年生まれ
東京都世田谷区出身

40を過ぎてから、いきなりダイビングに目覚めて1*年…。今は週末とか西伊豆のシーエッグ ダイバーズで非常勤スタッフやってます。

普段は物流の仕事で大型に乗ってます。通勤もほぼプリウス、運動不足かも…。

伊豆半島・田子
シーエッグ ダイバーズ

〒410-3515
静岡県賀茂郡西伊豆町田子2385-1
Tel：0558-53-0807

www.seaeggdivers.com

シーエッグ ダイバーズ

バックナンバー

もっと見る »

ガイドのつぶやき
南国通信
豪海倶楽部
HTML 5 < 編集後記 < トップ