必須のOGP設定
● 必須のOGP設定
<meta property="og:site_name" content="サイト名" />
<meta property="og:title" content="タイトル" />
<meta property="og:type" content="トップページはwebsite、個別（下層）ページはarticle" />
<meta property="og:url" content="記事のURL" />
<meta property="og:description" content="記事のdescription（記事概要）"/>
<meta property="og:image" content="サムネイル画像のURL" />
Google Chrome を Sidekick みたいにする サイドバー拡張機能
● Bookmark Sidebar
https://chrome.google.com/webstore/detail/bookmark-sidebar/afdfpkhbdpioonfeknablodaejkklbdn?hl=en
● Switch Workstation Tab Manager
PWA対応する
● manifest.json の作成
web app manifest generator から manifest.json を生成します。 https://app-manifest.firebaseapp.com/
以下のような jsonファイルが生成されます
{
"name": "MY APP",
"short_name": "myapp",
"theme_color": "#fff",
"background_color": "#fff",
"display": "browser",
"orientation": "portrait",
"scope": "/",
"start_url": "/",
"icons": [
{
"src": "icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
}
]
}
index.html に記述します
<link rel="manifest" href="/manifest.json">
● A2HS（ Add to home screen ）の追加
「ホーム画面へ追加」の仕組みを入れるためには以下の3つの要件があります
・1. ServiceWorkerが有効化されていること
・2. manifestファイルが読み込まれていてそこに設定が記載されていること
・3. https:// で配信されていること
引用: [PWA/A2HS]Webアプリをインストールしてホーム画面へ追加できるようにする - Qiita
● Service Workerで何ができるのか
引用元 : https://webtan.impress.co.jp/e/2019/09/02/33637
1. ネットワークリクエストの処理 ブラウザで発生するネットワークへのリクエストをService Workerが受け取り、どう処理するかを決定して実行する。
2. 事前データ読み込み Service Workerのインストール中にファイルをプリロード（事前読み込み）することも可能だ。
3.プッシュ通知 ネイティブアプリと同じように、プッシュ通知を受け取って表示できる。ユーザーが1回サイトを訪問してプッシュ通知を許可することは必要だが、それ以降は、ブラウザが開いてなくてもウェブサイトからプッシュ通知のメッセージを送り、Service Workerがそれを受け取ってコンピュータ上で表示できる。
4.バックグラウンド同期 本来ならばすぐにサーバーにデータを送信するような場合でも、オフライン状態であれば、ネットワーク接続状態が戻るまでデータ通信を保留し、あとから処理できる。
Mac でフォルダ内の png , jpg 画像を一括して ../webp/ フォルダに webpフォーマット変換する
● Mac でフォルダ内の png , jpg 画像を一括して ../webp/ フォルダに webpフォーマット変換する
webpのインストール
brew install webp
png 画像が保存されているフォルダ内へターミナルで入って以下のコマンドを実行します。
mkdir ../webp
for file in *.{jpg,jpeg,png}; do cwebp "$file" -q 80 -metadata icc -sharp_yuv -o "../webp/${file%.*}.webp"; done
クォリティ 80 の webp 画像を ../webp フォルダへ保存します。
こちらも参考にするといいと思います。
【保存版】知らないと画質が落ちるWebP変換おすすめパラメーター設定例 JPEG/PNG編 - アイデアマンズブログ
【Node.js】sharp でサクッと「AVIF」「WebP」生成 #Node.js - Qiita
WordPressを別サーバに移行する
●移行元のWordPressへ All-in-One WP Migration のインストールとエクスポート
（移行元の WordPress での作業）
1. 移行元の WordPress 管理画面から「All-in-One WP Migration」プラグインをインストールし、有効にします。
2. 管理画面左のメニューの「All-in-One WP Migration」のエクスポートをクリックします
3. 「エクスポート先」「ファイル」を順にクリックすると圧縮が開始されます
● 移行先（新サーバ）の php.ini を設定する
php.ini
upload_max_filesize = 999M
post_max_size = 999M
memory_limit = 999M
● 移行先（新サーバ）の WordPress でデータをインポートする
（移行先（新サーバ）の WordPress での作業）
1. 移行先の WordPress 管理画面から「All-in-One WP Migration」プラグインをインストールし、有効にします。
2. 管理画面左のメニューの「All-in-One WP Migration」のインポートをクリックします
3. ダウンロードファイルを取り込んでインポートを完了させます
● 移行先（新サーバ）の WordPress とデータベースでURL設定を変更する
WordPress 管理画面の設定からUR を変更します(変更する必要がある場合)
W3C Valid な htmlページ コーディングの雛形
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./tailwind.css">
</head>
<body>
<!-- ======================== ヘッダ ======================== -->
<header>
<nav>ナビゲーション</nav>
</header>
<!-- ======================== / ヘッダ ======================== -->
<!-- ======================== container ======================== -->
<main>
<div class="container">
<article>
<h1>見出し1</h1>
<section>
<h2>見出し2</h2>
</section>
</article>
</div>
</main>
<!-- ======================== /container ======================== -->
<!-- ======================== フッター ======================== -->
<footer class="footer">
</footer>
<!-- ======================== / フッター ======================== -->
</body>
</html>
WordPressの管理画面に独自の画面を追加する
● functions.php に 以下を追加
1.
/**
* カスタム管理画面メニュー
*
*/
function original_page() {
add_menu_page('オリジナルページ', 'オリジナルページ', 'manage_options', 'original_page', 'original_menu');
}
add_action('admin_menu', 'original_page');
2.
/**
* original_menu
*
*/
function original_menu() {
include 'original_menu.php';
}
● テーマフォルダの中に original_menu.php を作成
functions.php と同階層に次のファイルを作成します。
original_menu.php
<?php
echo "テストページです";
以上です。
WordPress 管理画面の必須プラグイン
● WordPress 必須プラグイン
・Admin Menu Edior
ダッシュボード内の不必要なメニューを非表示、表示順を変更、カスタム投稿の名称を自分が分かりやすい名前に変更
他には : https://bit.ly/2ZG6B8M
[WordPress] 独自の設定画面を作って簡単に情報を管理する！ | inter-arteq.com :: interaction between art and technology
・corcel/corcel
WordPressのDBモデルにへLaravel Eloquentからアクセスできるようにする。
・WORDPRESS pete
WordPress +Laravel （2サイトまで無料）
画像ファイルを png を圧縮する
● Mac用png画像圧縮ソフト ImageOptim
● Windows用png画像圧縮ソフト Pngyu
http://nukesaq88.github.io/Pngyu/ja.html
ImageOptim では 次のpng圧縮エンジンを使用しているようです
・png圧縮エンジン pngout
・png圧縮エンジン Advpng
・png圧縮、不要メタデータ削除 oxipng
WEBページやWEBシステムで Windowsの外字ファイル（ .tte ）を使用する
WEBページやWEBシステムで Windowsの外字ファイル（ .tte ）を使用するには
フォントファイル （ .tte ） → （ .woff ） を行ってからCSSで登録します。
● WOFFコンバータ ( Mac , Windows アプリ )
https://opentype.jp/woffconv.htm
こちらを使って woff ファイルへ変換します。
● 外字ファイルを表示させるcss
外字ファイル /assets/woff/EUDC.woff を読み込んで表示させます。
<style type="text/css">
@font-face {
font-family: "myFont";
src: url("/assets/woff/EUDC.woff") format('woff');
}
*{
font-family: "myFont";
}
</style>
https と http の混在（mixed contents）をGoogle Chromeで見つける方法
・ 1. Chromeを起動する
・ 2. 「command」+「shiftt」+「c」を押す
・ 3. 「security」タブを選択する
・ 4. タブを選択した状態で「command」+「r」を押してWEBページをリロードする
・ 5. 次のような表示がされている場合は 混在コンテンツが存在するので、リンクを押して表示させる
Resources - mixed content
This page includes HTTP resources.
View 7 requests in Network Panel
Google Chrome Developers Tool のショートカット
Google Chrome のデベロッパーツール （Developers Tool ）のショートカット
Google Chrome を起動して Command + Shift + c を押すとデベロッパーツール が起動します。
そのデベロッパーツールで使えるショートカットがなかなか便利 !
● Google Chrome / Tools for Web Developers / キーボード ショートカットのリファレンス
https://developers.google.com/web/tools/chrome-devtools/shortcuts?hl=ja
スタイルシートのプロパティ変更時のショートカットなどは覚えておくといいかと思われます。
| [Styles] サイドバー | Windows の場合 | Mac |
|---|---|---|
| ルールの編集 | 1 回クリック | 1 回クリック |
| 新しいプロパティの挿入 | スペースで 1 回クリック | スペースで 1 回クリック |
| ソースのスタイル ルール プロパティ宣言の行に移動 | Ctrl+プロパティをクリック | Cmd+プロパティをクリック |
| ソースのプロパティ値宣言の行に移動 | Ctrl+プロパティ値をクリック | Cmd+プロパティ値をクリック |
| 色の定義値を順に表示 | Shift+カラーピッカー ボックスをクリック | Shift+カラーピッカー ボックスをクリック |
| 次または前のプロパティの編集 | Tab、Shift+Tab | Tab、Shift+Tab |
| 値を増やす / 減らす | 上矢印、下矢印 | 上矢印、下矢印 |
| 値を 10 ずつ増やす / 減らす | Shift+上矢印、Shift+下矢印 | Shift+上矢印、Shift+下矢印 |
| 値を 10 ずつ増やす / 減らす | PgUp、PgDown | PgUp、PgDown |
| 値を 100 ずつ増やす / 減らす | Shift+PgUp、Shift+PgDown | Shift+PgUp、Shift+PgDown |
| 値を 0.1 ずつ増やす / 減らす | Alt+上矢印、Alt+下矢印 | Opt+上矢印、Opt+下矢印 |
HTML5の画像のsourceタグのsrcset で「ブラウザ幅」と「ディスプレイ解像度」によって画像を入れ替える
● 画像の srcset で「ブラウザ幅」と「ディスプレイ解像度」によってレスポンシブに画像を入れ替える
以下のように記述すると「ブラウザ幅」と「ディスプレイ解像度」によってレスポンシブに画像を入れ替わります
<picture>
<source srcset="img/600.png 1x , img/600@2x.png 2x" media="(min-width: 600px)" />
<source srcset="img/500.png 1x , img/500@2x.png 2x" media="(min-width: 500px)" />
<source srcset="img/400.png 1x , img/400@2x.png 2x" media="(min-width: 400px)" />
<source srcset="img/300.png 1x , img/300@2x.png 2x" media="(min-width: 300px)" />
<img src="img/default.png" alt="image with artdirection" />
</picture>
ポイントとしては大きい解像度の画像から指定することです。 小さい画像から指定するとうまく表示されません。
● デモはこちら
https://pgmemo.tokyo/livedemo/html5_source_srcset/test_img_source_srcset.html
● sourceタグの srcset を Windows IE11 に対応させる
picturefill を使用します。こちらを読み込ませるだけでOK。
<script src="//cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.2/picturefill.min.js"></script>
● デモはこちら
https://pgmemo.tokyo/livedemo/html5_source_srcset/test_img_source_srcset_IE11.html
チェクボックスのCSSでのデザイン
● CSSで チェックボックスをカスタマイズ（その1. labelタグで囲う方法）
<label class="my_checkbox">
<input name="id[]" type="checkbox" value="1">
<span>Checkbox 1</span>
</label>
.my_checkbox {
cursor: pointer;
}
.my_checkbox input[type=checkbox] {
display: none;
}
.my_checkbox input[type=checkbox]+span:before {
font-family: FontAwesome;
font-size: 24px;
content: "\f096";
display: inline-block;
width: 26px;
position: relative;
top: 3px;
}
.my_checkbox input[type=checkbox]:checked+span:before {
content: "\f046";
}
・デモ
https://pgmemo.tokyo/livedemo/customize_checkbox/customize_checkbox2.html
● CSSで チェックボックスをカスタマイズ（その2 label の id を使用する方法）
<div class="my_checkbox">
<input id="box1" type="checkbox" />
<label for="box1">Checkbox 1</label>
</div>
.my_checkbox input[type=checkbox] {
display: none;
}
.my_checkbox input[type=checkbox]+label:before {
font-family: FontAwesome;
font-size: 24px;
content: "\f096";
display: inline-block;
width: 26px;
position: relative;
top: 3px;
}
.my_checkbox input[type=checkbox]:checked+label:before {
content: "\f046";
}
・デモ
https://pgmemo.tokyo/livedemo/customize_checkbox/customize_checkbox.html
テキストとアイコン画像の位置を揃えるCSS
● テキストとアイコン画像の位置を揃えるCSS
例 ) このようなhtmlの場合、アイコン画像がテキストより大きい場合表示がずれます
<p>
<span>テキスト</span>
<img class="icon" src="speaker.png">
</p>
そこで次のような icon クラスを定義して位置を調整します。
.icon {
position: relative;
top: 8px;
left: 5px;
}
TABLEタグをDIVタグとCSSで表現する
● TABLEタグをDIVタグとCSSで表現する
デモ : https://pgmemo.tokyo/livedemo/div_table/div_table.html
・TABLEタグを使った表
<table>
<tr>
<td>タイトル</td>
<td>
<p>要素1</p>
<p>要素2</p>
</td>
</tr>
</table>
DIVタグでこの表を表現するとこのようになります。
・DIVタグとCSSを使った表
<style type="text/css">
.table{
display: table;
}
.table_row{
display: table-row;
}
.table_cell{
display: table-cell;
vertical-align: top;
}
</style>
<div class="table">
<div class="table_row">
<div class="table_cell">
タイトル
</div>
<div class="table_cell">
<p>要素1</p>
<p>要素2</p>
</div>
</div>
</div>
● HTML TABLE GENERATOR を使って div タグでテーブルを作成する
最初からDIVタグで生成するにはこのサイトを利用するといいでしょう
http://divtable.com/generator/
HTML , CSS コーディング時に使用したい Sketch プラグイン
タイトルはSketchの「Plugins」メニューに表示されるものを記述しています
● Export HTML
https://github.com/mludowise/Sketch-HTML-Export
選択したアートボードの中で「Make Exportable」が設定されているオブジェクトを HTML + CSS へ書き出します
使い方
・書き出したいオブジェクトを選択して「Layer」→「Make Exportable」を選択してエクスポート可能な状態にする。
・グループ化しているオブジェクトはグループを選択して「Make Exportable」するとグループが1つの画像になる。
・テキストの場合はそのまま「Make Exportable」するとサイズが変わるので「スライスツール」にしてオブジェクトを選択してスライスにするか、あらかじめオブジェクトを選択した状態で「Sketch Measure」のツールバーを表示させてスライスアイコンをクリックするとスライスになる
・すべてのオブジェクトがエクスポート可能な状態になったらメニューから「Plugins」→「Export HTML」で実行する
・透明な画像が生成される場合は「Export group contents only」のチェックを外す
● marketch
https://github.com/tudou527/marketch
sketchのレイアウト情報を HTML へ書き出します
● Export Text From Page...
sketchファイルの中のテキストデータをクリップボードにコピーします
https://github.com/exevil/Sketch-Export-Text
● Copy Color as HSLA
sketchファイル内のオブジェクトの色のHSLA表記をコピーします。 （HSLA表記は CSS 3から使用できるようになった記述方法です。IE11以降のすべてのブラウザで使用できます）
● HSL Color Picker
HSLAのカラーピッカーです
https://github.com/ashung/hsl_color_picker
cssでfloatを使った時に高さを確保する
cssでfloatを使うと、floatさせた要素の高さは親要素からは無視されますが、高さを確保したい場合は次のようにします。
● 1. floatさせた最後の要素の後ろに clearfix を使う
● 2. 親要素にoverflow:hidden か overflow:auto を使う
テーブル TR TD の hover をある箇所だけオフにする
テーブル TR TD の hover をある箇所だけオフにするには、 pointer-events: none; とします。
<td style="pointer-events: none;">
テーブルです
</td>
RESTステータスコード
REST API 設計時の参考に。
● 1xx - Informational
100 - Continue
101 - Switching Protocols
● 2xx - Successful
200 - OK
201 - Created
202 - Accepted
203 - Non-Authoritative Information
204 - No Content
205 - Reset Content
206 - Partial Content
207 - Multi-Status
● 3xx - Redirection
300 - Multiple Choices
301 - Moved Permanently
302 - Found
303 - See Other
304 - Not Modified
305 - Use Proxy
306 - (Reserved)
307 - Temporary Redirect
● 4xx - Client Error
400 - Bad Request
401 - Unauthorized
402 - Payment Required
403 - Forbidden
404 - Not Found
405 - Method Not Allowed
406 - Not Acceptable
407 - Proxy Authentication
408 - Request Timeout
409 - Conflict
410 - Gone
411 - Length Required
412 - Precondition Failed
413 - Request Entity Too Large
414 - Request-URI Too Long
415 - Unsupported Media Type
416 - Requested Range Not Satisfiable
417 - Expectation Failed
422 - Unprocessable Entity
423 - Locked
424 - Failed Dependency
● 5xx - Server Error
500 - Internal Server Error
501 - Not Implemented
502 - Bad Gateway
503 - Service Unavailable
504 - Gateway Timeout
505 - HTTP Version Not Supported
507 - Insufficient Storage
プリント時に要素を削除する CSS
<div class="no-print">この要素は印刷時に表示されません</div>
@media print{
.no-print {
display:none;
}
}
電話番号に自動でつくリンクを消す
Edge や iPhone , iPad には電話番号に自動でリンクが付きますが、それを消すには htmlの次のように記述します。
<head>
<meta name="format-detection" content="telephone=no">
</head>
これでページ全体の電話番号自動リンクがオフになります。 部分的にリンクをつけたい場合は以下のように明示的に指定してあげます。
電話:<a href="tel:1234567890">123-456-7890</a>
昔の古い Windows IE でのブラウザチェックを行う
● 仮想環境の Windows ie 8 9 10 11 と edge を使用する
https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/
こちらからバーチャル環境をダウンロードして Virtual box を使って仮想の Windows と ブラウザ環境を 立ち上げます。
● Browser Stack
検証のエビデンスがほしい時はこちらを使うといいでしょう。
とても便利です。
WEBサイトのリンク切れを検知するリンクチェックツール
● リンクチェッカー(リンク切れチェックツール)
http://www.dead-link-checker.com/ja/
● W3C Link Checker
http://validator.w3.org/checklink
● Online Broken Link Checker
CSSでカーニング調整をして先頭が 「 （カッコ）の左端を揃える
WEBで先頭が 「 （カッコ）の文章があると、括弧の左端に隙間ができてしまい、左端を綺麗に揃えることができません。 Illustratorならカーニングで簡単に調整してしまうところですが、CSSの場合は次のプロパティを使用します。
● CSSの「font-feature-settings」プロパティ
font-feature-settingsプロパティを使用すると、カーニングの自動調整ができます。
▲ 対応フォント
Open type 形式のフォントなら対応可能です
ヒラギノ角ゴシック
ヒラギノ明朝
游ゴシック体
游明朝体
Noto Sans
Windowsの メイリオ は対応していません
▲ 対応ブラウザ
全ブラウザ（ Edge, Safari, Chrome, Firefox , IEは 11 以降 ）
https://caniuse.com/#feat=font-feature
▲ デモ
http://logic.moo.jp/livedemo/font-feature-settings.html
.my_list li{
font-feature-settings: "palt";
list-style-type: disc !important;
font-family: "Yu Gothic" , sans-serif;
line-height: 1.2;
}
<ul>
<li>日本語のテストです</li>
<li>「あいうえおかきくけこ」</li>
</ul>
robots.txt を設置して検索エンジンクローラーが巡回しないようにする
検索エンジンクローラーに指示を与えるにはサイトのトップに robotx.txt を設置します。
全クローラーを対象にクロールをさせない
（最後に空行を1行入れます）
User-agent: *
Disallow: /
● robots.txt 解析ツール
iPhoneでフォーム入力時に 数字だけのキーボードを表示させる
iPhoneやandroidなどスマホでフォーム入力時に 数字だけのキーボードを表示させるには
pattern を使用します。
例 :
<input type="text" pattern="\d*">
とします。
もちろん
<input type="number" pattern="\d*">
でもOKです。
flexboxによる上下、左右センタリング（中央寄せ）
flexboxによる上下、左右センタリング（中央寄せ）
● flexboxによる左右のセンタリング
justify-content: center;
● flexboxによる上下のセンタリング
align-items: center;
● サンプル
https://pgmemo.tokyo/data/filedir/1168_1.html
左右の センタリング用に .flex_center
上下左右の センタリング用に .flex_middle_center
を作成しています。
<style type="text/css">
*{
box-sizing: border-box;
}
.flex_middle_center{
display: flex;
justify-content: center;
align-items: center;
}
.flex_center{
display: flex;
justify-content: center;
}
.my_button{
width: 200px;
height: 60px;
}
</style>
<div class="flex_middle_center" style="height:500px;border: 5px solid red;">
<button class="my_button">
<div class="flex_center" style="padding-top: 7px;">
<p style="font-size: 12px; float: left;">追加します</p>
<p style="font-size: 36px; float: left; margin-top: -4px;">+</p>
</div>
</button>
</div>
Google Chromeでローカルにあるcssファイルを直接編集し保存する
cssファイルを編集するときに Google Chromeのデベロッパーツールで値を変更した後、 エディターにその値を持って行きエディターを使って保存したりしてないでしょうか？
そんな面倒なことをしなくても Google Chrome 自体に .css を保存する機能があります。（最新のChromeでは使えなくなりました。代替方法は一番下）
以下の方法でGoogle Chromeを使ってローカルにあるcssファイルを直接編集して保存してみましょう。
● ローカルのフォルダをGoogleChromeに読み込ませる（ Chrome Version 62 の場合 ）
1. Google Chromeを立ち上げる
2. 右クリックし「検証」を選択する
デベロッパーツールのウィンドウが画面下表示されます
3. デベロッパーツール内メニューの「Sources」を選択する。
4. 右クリックして「Add folder to workspace」を選択する
5. 編集したいcssファイルが入っているフォルダを選択する
● 読み込んだローカルのフォルダ内の css をリンクさせる
6. 直接編集したい ローカルのhtmlファイル をgooglechromeで開く
7. googlechromeで直接編集したいファイルを右クリックし「Map to network resource...」を選択すると
現在ブラウザで開いている同盟のcssファイル一覧が表示されるのでその中からリンクさせたいファイルを選択する
これで準備はokです。 後は自由に編集しその後に「Command+s」（Macの場合）を押すと保存されリロードしてもその状態がリセットされず残っています。
● Finchを使用して変更したCSSの差分を抽出する
ローカルのファイルでは動作しませんので node.js や php などでローカルサーバを立てるといいでしょう。
https://chrome.google.com/webstore/detail/finch-developer-tools/phgdjnidddpccdkbedmfifceiljljgdo
JavaScriptでWEBページの印刷ボタンを作る
● JavaScriptで印刷ボタンを作る
・印刷リンク
<a href="#" onclick="window.print(); return false;">印刷する</a>
・印刷ボタン
<input type="button" value="印刷する" onclick="window.print();">
● cssで印刷するときに要素を隠す
印刷するときだけ隠したい要素がある場合は以下のようにして隠します
@media print{
.no_print{
display: none;
}
}
<p class="no_print">この要素は印刷時に表示されません</p>
● cssで印刷するときに線を消す
印刷するときに要素自身は隠さず、線だけ消したい時は以下のようにして消します
.my_class{
border: 1px solud red;
}
@media print{
.no_border_print{
border: none;
}
}
<div class="my_class no_border_print">このDIVの枠は表示されません</div>
● WEB画面印刷時の用紙サイズを指定する( GoogleChromeで有効 )
A4 縦の場合
css
@page {
size: A4 portrait;
margin: 10mm;
}
A4 横の場合
css
@page {
size: A4 landscape;
margin: 10mm;
}
html 内のテキストにカーニングを適用する jQuery.Kerning.js
html 内のテキストにカーニングを適用する jQuery.Kerning.js
● jQuery.Kerning.js
http://karappo.github.io/jquery.kerning.js/
カーニングデータを自分で作成して使用することもできます
Bootstrapによるモーダルウィンドウ
Bootstrapのモーダルウィンドウは
● モーダル起動ボタン
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal1">モーダルウィンドウ1</button>
● モーダルウィンドウ
<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-content">
モーダルウィンドウ最小セット
</div>
</div>
でとりあえず起動します。
自分で好きなウィンドウにすることもできます
● オリジナルのモーダルウィンドウ
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog">
<div style="width:300px; height:300px; background: white; border:10px solid red;">
aaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaa<br>
</div>
</div>
Bootstrapらしいモーダルウィンドウにする場合は
● Bootstrapらしいモーダルウィンドウ
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">ウィンドウタイトル</h4>
</div>
<div class="modal-body">
<p>テキスト</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
とします。
dt,ddタグとCSSによるテーブル表現
<dl class="my_table01">
<dt>項目１</dt>
<dd>テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列</dd>
<dt>項目２</dt>
<dd>テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列</dd>
</dl>
scss
.company_list_container {
width: 782px;
dl{
display:flex;
flex-wrap: wrap;
border: 1px solid #ccc;
border-top: none;
}
dt{
background: #ddd;
width: 30%;
padding: 10px;
box-sizing: border-box;
border-top: 1px solid #ccc;
}
dd{
padding: 10px;
margin: 0;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
width: 70%;
background: #fff;
box-sizing: border-box;
}
}
ただし、項目名のほうが長い場合は崩れます。
emmet LiveStyle を使って SCSS の変更を即座にブラウザに反映させる
web制作時に「cssを変更/保存」→「ブラウザのリロード」はとても面倒です。
そこでemmet LiveStyle を使って SCSS の変更を即座にブラウザに反映させましょう。
簡単に言うとオートリロード機能ですが、実際にはリロードは起こりません。リロードせずに即座に反映してくれます。
それ以外にも
- SASS, SCSS（Compass） にも対応します。
- Chromeのデベロッパーツール（Windows : F12 Mac : Command ＋ Option ＋ i ）で変更した内容をエディタ側に反映させる
事ができます。
● 1. 必要なアプリ
- Google Chrome
- Sublime Text3
● 2. Chrome Extention「Emmet LiveStyle」のインストール
https://chrome.google.com/webstore/detail/emmet-livestyle/diebikgmpmeppiilkaijjbdgciafajmg?hl=ja
からインストールします。
インストール後 「ウィンドウ」→「拡張機能」から以下のようにセッティングします。
● 3. Sublime Text「Emmet LiveStyle」のインストール
Sublime Text から
「Command + Shift + p」→「install」→「live style」でLiveStyle をインストールします。
● 4. ファイルをそれぞれ開く
css(scss)ファイルをSublime Textで、htmlファイルをChromeで開きます。
● 5. Chromeの右上のアイコンから「Enable LiveStyle」
LiveStyleをon にしたら 即座に反映させる css(scss)ファイルを選びます。
以上で即座に反映させる環境ができます。
){kind=link}
compass（SCSS）でretina,ロールオーバー対応のcssスプライトを自動生成するmixin
compassは各自インストールしておいてください。
● 1. config.rbの準備
compassを使うときはサイトの最上位フォルダに config.rb を置きますが、ここでは以下の様な設定を使用します。
以下のコードをファイル名 `config.rb` で htmlを制作する最上位フォルダに置いておきます
# パスの設定
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"
# 書き出すCSSのスタイル :expanded or :nested or :compact or :compressed
output_style = :expanded
# コメントを残すかどうか？
line_comments = false
# 相対パスを使うかどうか？
relative_assets = true
# CSSスプライトのランダム文字列を削除
on_sprite_saved do |filename|
if File.exists?(filename)
FileUtils.mv filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png')
end
end
on_stylesheet_saved do |filename|
if File.exists?(filename)
css = File.read filename
File.open(filename, 'w+') do |f|
f << css.gsub(%r{-s[a-z0-9]{10}\.png}, '.png')
end
end
end
● 2. mixin ファイルの準備
以下のコードをファイル名 `_sprite-css.scss` で scssフォルダに置いておきます
@mixin sprite-common($map, $pixel_raito:1) {
margin: 0;
padding: 0;
background-image: $map;
background-repeat: no-repeat;
display: block;
overflow:hidden;
text-indent: 100%;
white-space: nowrap;
$sprite_image_path: sprite-path($map);
$sprite_width: round(image-width($sprite_image_path) / $pixel_raito);
$sprite_height: round(image-height($sprite_image_path) / $pixel_raito);
@include background-size($sprite_width, $sprite_height);
}
@mixin sprite-item($map, $name, $pixel_raito:1) {
width: image-width(sprite-file($map, $name)) / $pixel_raito;
height: image-height(sprite-file($map, $name)) / $pixel_raito;
$pos: sprite-position($map, $name);
background-position: (nth($pos, 1) / $pixel_raito) (nth($pos, 2) / $pixel_raito);
}
@mixin sprite-css-hover($class_name, $dir_path) {
$map: sprite-map($dir_path + '*.png');
.#{$class_name} {
background-image: $map;
}
}
@mixin sprite-css($dir_path, $pixel_raito:1) {
$map: sprite-map($dir_path + '*.png');
$dir_name: sprite-map-name($map);
.#{$dir_name} {
@include sprite_common($map, $pixel_raito);
}
@each $name in sprite-names($map) {
.#{$dir_name}_#{$name} {
@include sprite_item($map, $name, $pixel_raito);
}
}
}
● 3. スプライトを生成する画像ファイルをセット
cssスプライトを作りたい画像ファイルをフォルダ `img/splites/navi/に置きます。
ロールオーバーさせたい画像ファイルををフォルダimg/splites/navi_over/` に置きます。
画像の例
├── sprites/
│ ├── navi/
│ │ ├── file1.png
│ │ ├── file2.png
│ │ ├── file3.png
│ ├── navi_over/
│ │ ├── file1_over.png
│ │ ├── file2_over.png
│ │ ├── file3_over.png
● 4. scssファイルの作成
好きな名前のscssファイル（ここでは `style.scss` とします。）を scss フォルダに作成して以下のように記述します
（2行だけです。これだけでCSSスプライト画像の生成とCSSコードの書き出しが行われます。）
@include sprite-css("sprites/navi/", 2); // フォルダ名, 倍率
@include sprite-css-hover("navi", "sprites/navi_over/"); // クラス名, フォルダ名
● 5. compass から scss → css 変換の実行
compassを起動して scss→css 変換を実行します。 （codekitやsublimetextを使用することをおすすめします。）
● 6. HTMLを用意する
htmlは以下のように記述します
<link rel="stylesheet" href="./css/style.css">
<ul>
<li><a class="navi navi_file1" href="#">メニュー1</a></li>
<li><a class="navi navi_file2" href="#">メニュー2</a></li>
<li><a class="navi navi_file3" href="#">メニュー3</a></li>
</ul>
これでretina, ロールオーバー対応のメニューができます。
ちなみに生成されるCSS `style.css` は以下の様なものになります。
.navi {
margin: 0;
padding: 0;
background-image: url('../img/sprites/navi.png');
background-repeat: no-repeat;
display: block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
-moz-background-size: 150px, 150px;
-o-background-size: 150px, 150px;
-webkit-background-size: 150px, 150px;
background-size: 150px, 150px;
}
.navi_file1 {
width: 150px;
height: 25px;
background-position: 0 0;
}
.navi_file2 {
width: 150px;
height: 25px;
background-position: 0 -25px;
}
.navi_file3 {
width: 150px;
height: 25px;
background-position: 0 -50px;
}
.navi:hover {
background-image: url('../img/sprites/navi_over.png');
}
オンラインでRetina画像対応CSSスプライトを作成する
オンラインでRetina画像対応CSSスプライトを作成するには以下のサイトが便利です。 手順としてはまず普通の画像のCSSスプライト（画像+CSS）を作成して、その後にRetina対応の画像のみを作成します。
● CSS Sprite Generator
http://spritegen.website-performance.org
● CSSスプライトを使ってメニューを作成する例
- http://spritegen.website-performance.org にアクセスする
- 【clear】を押してデフォルトの画像を消す。
- 【open】を押して、CSSスプライトで1つにまとめたい画像（ x1倍 ）をすべて選択する。
- 『Settings』の各種設定（マージンやCSSクラス名）を変更。（例 : クラス名は sp とします。）
- 【Downloads】を押して表示される画面から画像を任意の名前で保存。
- 【Downloads】を押して表示される画面からCSSを保存。
CSSファイル内のスプライト画像のパスを書き換える
background-image: url(spritesheet.png); /* spritesheet.png を任意のパスに */CSSファイル内の .sp クラスに以下のプロパティを追加
overflow:hidden; text-indent: 100%; white-space: nowrap; background-size: 100%;- 同じ手順でRetina用画像のみを作成する
Google PageSpeed Insights の速度アップ修正に対応する
■ Google PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/?hl=ja
URLを入力するとサイトがどれくらい早いか計測してくれます。
ここにサイトのURLを入れて計測し、結果を表示させます。
● 結果の「圧縮を有効にする」に対応する
圧縮を有効にするにはWEBサーバによって方法が異なります、
Apache: mod_deflate
Nginx: HttpGzipModule
IIS: HTTP 圧縮
専用サーバやクラウド等のバーチャルマシンの場合は適宜設定しましょう。
レンタルサーバの場合は Apache が多いので、 レンタルサーバのmod_deflate が有効かどうかを調べます。
エックスサーバ : ○
ロリポップ : ○
さくら : ○
ヘテムル : ○
圧縮を有効にするには サイトのトップに .htaccess を設置し以下のように記述します。
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI\.(?:gif|jpe?g|png)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
</IfModule>
SetOutputFilter DEFLATE ですべての出力を圧縮する設定にして、
・Mozilla や IE の古いバージョンでは圧縮をオフ
・画像ファイルは圧縮をオフ
としています。
● 結果の「ブラウザのキャッシュを活用する」に対応する
.htaccess に以下のように記述します。
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 week"
ExpiresByType image/png "access plus 1 week"
ExpiresByType image/jpeg "access plus 1 week"
ExpiresByType image/gif "access plus 1 week"
ExpiresByType text/css "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
</IfModule>
<img>タグで埋め込んだSVGファイルの色変更をする JavaScript
ベクターデータのSVGファイルはRetinaディスプレイがどんどん増えてくる今後代替フォーマットが登場しない限り主流になってくると思われます。 ただし、＜img＞タグでSVGファイルを読み込むと色変更がCSSでできません。 （＜SVG＞タグとソースを直接貼り付ける必要がある）
そこで desvg.js を使用します。
● deSVG
imgタグで埋め込んだ外部SVGファイルの色変更が出来るようになります。
<script src="path/to/desvg.js"></script>
<script>
$(function(){
deSVG('.my_svg', true);
});
</script>
<img class="my_svg" src="xxxxx.svg" width="26">
.my_svg path{
color: #fff;
fill: currentColor;
}
便利です！
CSSによるDIV（ブロック）要素の横並び方法4種類
CSSによるDIV（ブロック）要素の横並び方法4種類
1.floatによる横並び
注意点
- 親要素 :after に 「content」「display」「clear」要素を追加する。
- または親要素に clearfix を指定する
css
.div_float:after {
content:'';
display:table;
clear:both;
}
.div_float .cell {
border: 1px solid black;
float: left;
}
</style>
html
<div class="div_float">
<div class="cell">aaa</div>
<div class="cell">bbb<br>bbb</div>
<div class="cell">ccc</div>
</div>
実際の表示
bbb
2.display: inline-blockによる横並び
「display: inline-block」は幅や高さなどを指定できるインライン要素です。
注意点
- 親要素に font-size: 0; を指定してブロック間の隙間をなくす
- 子要素に font-size: 12pt; を指定してフォントの大きさを指定する
css
.div_inline_block{
font-size: 0;
}
.div_inline_block .cell {
font-size: 12pt;
border: 1px solid green;
display: inline-block;
}
html
<div class="div_inline_block">
<div class="cell">aaa</div>
<div class="cell">bbb<br>bbb</div>
<div class="cell">ccc</div>
</div>
実際の表示
bbb
3.「display:table;」「display:table-cell;」による横並び
注意点
- 親要素に display:table; を指定（実はなくてもOK。）
- 子要素に display:table-cell; を指定
css
.div_table{
display:table;
}
.div_table .cell {
display: table-cell;
border : 1px solid red;
}
html
<div class="div_table">
<div class="cell">aaa</div>
<div class="cell">bbb<br>bbb</div>
<div class="cell">ccc</div>
</div>
実際の表示
bbb
3.4.「display:flex;」による横並び
注意点
- 親要素に「display: flex;」を設定
- 子要素は自動的にflexアイテムになる
- 古いブラウザ用にベンダープレフィックスが必要
css
.div_flex{
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.div_flex .cell {
border : 1px solid purple;
}
html
<div class="div_flex">
<div class="cell">aaa</div>
<div class="cell">bbb<br>bbb</div>
<div class="cell">ccc</div>
</div>
実際の表示
<div class="cell">aaa</div>
<div class="cell">bbb<br>bbb</div>
<div class="cell">ccc</div>
参考 : http://flexboxin5.com
参考 : http://bit.ly/1VT62NP
参考 : http://bit.ly/1obD69i
スマホサイト制作時に設定しておくと良いhtml, css, JavaScript 項目
スマホサイト制作時に設定しておくと良いhtml, css,js項目
1. リンクを押した時に押した領域に色をつける
a{
-webkit-tap-highlight-color: rgba(200,200,200,0.2);
}
2. 画像がはみ出すのを防ぐ
img{
max-width: 100%;
height: auto;
}
3. ボーダーを追加した時に width, height が増えるのを防ぐ
*{
box-sizing: border-box;
}
4. スマホで見た時に横に移動（左右にグラグラ）するのを防ぐ
<body>
<div class="wrapper">
ここに記述していきます。
</div>
</body>
.wrapper{
overflow: hidden;
}
5. フォーム入力時に画面がズームするのを防ぐ
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
6. スマホでダブルタップしたときに拡大しないようにするCSS
html {
touch-action: manipulation;
}
PWA対応 1. ホーム画面用のアイコンを追加する
192px x 192px のアイコンを作成し、以下のタグで指定します。
<link rel="apple-touch-icon" href="/touch-icon.png">
PWA対応 2. 起動までに表示する画像 Sprach Screen を追加する
512px x 512px のアイコン（splash-screen.png）を作成し以下の記述を追加します。
androidの場合 少なくとも以下の3つを manifest.json に 記述します
manifest.json
{
"name": "my app",
"background_color": "#000",
"icons": "/splash-screen.png"
}
manifest.json の icons の記述方法. https://developer.mozilla.org/ja/docs/Web/Manifest/icons
iphoneの場合
こちらのサイトから作成します https://progressier.com/pwa-icons-and-ios-splash-screen-generator
スマホサイトをフルスクリーンにしてWEBアプリぽく見せる
● スマホサイトをフルスクリーンにしてWEBアプリぽく見せる
HTMLページに以下の2行を追加してページをiPhoneで開き、【ホーム画面に追加】でホームにアイコンを作成すると フルスクリーン表示で起動することができます。
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
● 別のページに画面遷移しても フルスクリーンを保った状態にする
<link rel="manifest" href="/manifest.json">
サイトのトップ、ディレクトリに manifest.json ファイルを以下の内容で作成します
{
"name": "マイスマホアプリ",
"short_name": "マイスマホアプリ",
"start_url": "/",
"display": "standalone",
"orientation": "portrait",
"background_color": "#fff",
"theme_color": "#fff"
}
Bootstrapで画面サイズによって要素を【表示・非表示】させる
Bootstrapの画面サイズ
xs : Phones (<768px)
sm : Tablets (≥768px)
md : Desktops (≥992px)
lg : Desktops (≥1200px)
この画面サイズ画面サイズによって要素を【表示・非表示】させるには以下のようにクラス指定します
例：スマホにだけ表示させる場合
<div class="visible-xs">これはスマホの画面サイズの時のみ表示されます</div>
.visible-xs
.visible-sm
.visible-md
.visible-lg
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
BootstrapのCDN
Bootstrapはいちいちダウンロードしなくてもサーバ上のファイルを直接指定するだけで使用できます。
BootstrapのCSS
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
BootstrapのJavaScript
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
です。
これをhtmlファイルの`
〜` 内に埋め込みます。
CSS3で作るツールチップ（吹き出し）
CSS3だけのほうが軽いのでおすすめです。
そこで CSS3 ツールチップ作成サイト
http://www.cssportal.com/css-tooltip-generator/
http://www.menucool.com/tooltip/css3-tooltip
Font AwesomeのWEBフォントをフォームのボタンに使用する
Font AwesomeのWEBフォントをフォームのボタンに使用するには以下のようにします。
● 1. Font Awesomeのインストール
http://fortawesome.github.io/Font-Awesome/ からダウンロードしてきてサーバにアップロードします。
HTML（ヘッダ）
<link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css">
で読み込ませます（ディレクトリは適宜書き換えてください。）
フォームのHTML
<input type="button" class="fontawesome_submit" value=" ボタンのテスト">
フォームのCSS
.fontawesome_submit{
font-family: FontAwesome;
}
以上でOKです。簡単ですね。

のところがfont Awesomeのフォントです。 これを下記の表を元に好きなコードに書き換えるといいでしょう。
●2. Font Awesomeのコード確認表
SSL（https://）サイト制作時の https , http 混在エラーをチェックする
SSLサイト制作時にはそのページ内のコンテンツが全て https:// を使って表示されているかをチェックする必要があります。
firefoxを使用した例
<img src="/data/filedir/937_2.jpg" />
SSLのエラーがある場合はURLの左にアイコンが表示されます
httpで呼び出しているファイルを調べる
Live HTTP Headers
https://addons.mozilla.org/ja/firefox/addon/live-http-headers/
を使用します。
これを立ち上げてからサイド問題のあるページをリロードして http:// でフィルタをかけて検索すると
httpで転送されているファイルがわかりますのであとはそのファイルをソース上で修正するといいでしょう。
){kind=link}
iPhoneのsafariでフォーム入力の時に自動的に画面拡大するのを防ぐ
iPhone等スマホサイトではWEBページのフォーム入力の時に自動的に画面が拡大する事があるのですが、これは
フォームのフォントサイズが16pxより小さい
の時に起きます。
そこでこれをやめさせるには以下 A,B,C のいずれかの方法を使用します。
■A. フォームのフォトサイズを16px以上にする。（CSSファイルに記述）
input,select,textarea{
font-size:16px;
}
■B. viewport 設定を行う（HTMLファイルに記述）
例：
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
■C. jQueryを使って任意のタイミングで拡大率を元に戻す（JavaScript）
何かのタイミングで以下のJavaScriptを実行して動的にviewportを書き換えると拡大率が変更（下記の例では等倍）できます。
$("meta[name='viewport']").attr('content','width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
■ JavaScriptで強制的にフォーカスさせたときに拡大するのを防ぐ
いくら viewport で user-scalable=no を設定していても JavaScriptでフォームに強制的にフォーカスした時は画面が拡大されることがあります。
その時は
$("meta[name='viewport']").attr('content','width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
$("#hoge").css("font-size",'16px');
$("#hoge").trigger("focus");
$("#hoge").css("font-size",'');
とやって無理やり16pxにするという方法で回避できます。
作成したWEBページの表示速度がどれくらい早いかをチェックする
同じ見た目のWEBページでも画像の作成方法やHTML・CSS・JavaScriptのコーディングによって速度が変わります。 そこで作成したWEBページの表示速度がどれくらい早いかをチェックして改善しましょう。
● Google PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/
PC向け、モバイル向けのそれぞれの最適化アドバイスが表示されます。
● Web PageTest
サイトの読み込みやレンダリング開始までの時間を細かく表示してくれます。
・『Start Render』までがHTML,CSS,JavaScript読み込みなどレンダリング開始までの時間
・『On Load』までがレンダリング終了までの時間
なのでこれらを見比べて、「外部css・Javascript」を最適化するべきか「HTMLコンテンツ（画像ファイル等）」を最適化するべきかの指標にするといいでしょう。
● GT metrix
http://gtmetrix.com/ アクセスして 自分のサイトURL を入力すると測定してくれます。（JavaScriptの遅延読み込みは対応していない模様。）
ちなみにこのページの結果は
となりました。
JavaScriptを最適化する必要があるということがわかりますね。
){kind=link}
hn.kd.ny.adslや中国からの検索エンジンロボット（クローラー）を制限する
中国からの検索エンジンロボット（クローラー）を制限する
hn.kd.ny.adsl からのアクセスを拒否する方法
hn.kd.ny.adslはそもそも存在しないドメインです。
ですので下記を.htaccessに記述しても全く有効ではありません
# これを記述しても拒否できない↓ deny from hn.kd.ny.adsl
以下のように記述するのがいいでしょう（ .htaccess に記述）
SetEnvIf User-Agent "360Spider" deny_ua deny from env=deny_ua
中国からのアクセスを全て遮断する（.htaccessに記述）
# Chinese (CN) IP addresses follow: deny from 1.80.0.0/13 1.192.0.0/13 1.202.0.0/15 14.144.0.0/12 14.208.0.0/12 23.105.14.0/24 27.8.0.0/13 27.16.0.0/12 27.36.0.0/14 27.40.0.0/13 27.54.192.0/18 27.106.128.0/18 27.115.0.0/17 27.148.0.0/14 27.152.0.0/13 27.184.0.0/13 36.32.0.0/14 36.248.0.0/14 42.96.128.0/17 42.120.0.0/15 58.16.0.0/15 58.20.0.0/16 58.21.0.0/16 58.22.0.0/15 58.34.0.0/16 58.37.0.0/16 58.38.0.0/16 58.40.0.0/16 58.42.0.0/16 58.44.0.0/14 58.48.0.0/13 58.56.0.0/15 58.58.0.0/16 58.59.0.0/17 58.60.0.0/14 58.68.128.0/17 58.82.0.0/15 58.100.0.0/15 58.208.0.0/12 58.242.0.0/15 58.246.0.0/15 58.248.0.0/13 59.32.0.0/13 59.40.0.0/15 59.42.0.0/16 59.44.0.0/14 59.51.0.0/16 59.52.0.0/14 59.56.0.0/13 59.72.0.0/16 59.108.0.0/15 59.172.0.0/14 60.0.0.0/13 60.11.0.0/16 60.12.0.0/16 60.24.0.0/13 60.160.0.0/11 60.194.0.0/15 60.208.0.0/13 60.216.0.0/15 60.220.0.0/14 61.4.64.0/20 61.4.80.0/22 61.4.176.0/20 61.48.0.0/13 61.128.0.0/10 61.135.0.0/16 61.136.0.0/18 61.139.0.0/16 61.145.73.208/28 61.147.0.0/16 61.152.0.0/16 61.154.0.0/16 61.160.0.0/16 61.162.0.0/15 61.164.0.0/16 61.175.0.0/16 61.177.0.0/16 61.179.0.0/16 61.183.0.0/16 61.184.0.0/16 61.185.219.232/29 61.187.0.0/16 61.188.0.0/16 61.191.0.0/16 61.232.0.0/14 61.236.0.0/15 61.240.0.0/14 101.64.0.0/13 106.112.0.0/13 110.6.0.0/15 110.51.0.0/16 110.52.0.0/15 110.80.0.0/13 110.88.0.0/14 110.96.0.0/11 110.173.0.0/19 110.173.32.0/20 110.173.64.0/18 110.192.0.0/11 110.240.0.0/12 111.0.0.0/10 111.72.0.0/13 111.121.0.0/16 111.128.0.0/11 111.160.0.0/13 111.172.0.0/14 111.176.0.0/13 111.228.0.0/14 112.0.0.0/10 112.64.0.0/14 112.80.0.0/12 112.100.0.0/14 112.111.0.0/16 112.122.0.0/15 112.224.0.0/11 113.0.0.0/13 113.8.0.0/15 113.12.0.0/14 113.16.0.0/15 113.18.0.0/16 113.62.0.0/15 113.64.0.0/10 113.128.0.0/15 113.136.0.0/13 113.194.0.0/15 113.204.0.0/14 114.28.0.0/16 114.80.0.0/12 114.104.0.0/14 114.112.0.0/14 114.216.0.0/13 114.224.0.0/11 115.24.0.0/15 115.32.0.0/14 115.48.0.0/12 115.84.0.0/18 115.100.0.0/15 115.148.0.0/14 115.152.0.0/15 115.168.0.0/14 115.212.0.0/16 115.236.96.0/23 115.236.136.0/22 115.239.228.0/22 116.1.0.0/16 116.2.0.0/15 116.4.0.0/14 116.8.0.0/14 116.16.0.0/12 116.52.0.0/14 116.76.0.0/15 116.90.80.0/20 116.112.0.0/14 116.128.0.0/10 116.204.0.0/15 116.208.0.0/14 116.224.0.0/12 116.254.128.0/18 117.21.0.0/16 117.22.0.0/15 117.24.0.0/13 117.32.0.0/13 117.40.0.0/14 117.44.0.0/15 117.79.224.0/20 117.80.0.0/12 117.136.0.0/13 118.26.0.0/16 118.72.0.0/13 118.112.0.0/13 118.120.0.0/14 118.132.0.0/14 118.144.0.0/14 118.180.0.0/14 118.186.0.0/15 118.192.0.0/16 118.248.0.0/13 119.0.0.0/13 119.8.0.0/15 119.10.0.0/17 119.18.192.0/20 119.36.0.0/16 119.57.0.0/16 119.60.0.0/16 119.88.0.0/14 119.96.0.0/13 119.112.0.0/13 119.120.0.0/13 119.128.0.0/12 119.144.0.0/14 119.164.0.0/14 119.176.0.0/12 119.233.0.0/16 120.0.0.0/12 120.24.0.0/14 120.32.0.0/13 120.40.0.0/14 120.68.0.0/14 120.192.0.0/10 121.0.16.0/20 121.8.0.0/13 121.16.0.0/12 121.32.0.0/14 121.60.0.0/14 121.76.0.0/15 121.204.0.0/14 121.224.0.0/12 122.51.128.0/17 122.64.0.0/11 122.119.0.0/16 122.136.0.0/13 122.156.0.0/14 122.188.0.0/14 122.192.0.0/14 122.198.0.0/16 122.200.64.0/18 122.224.0.0/12 123.4.0.0/14 123.8.0.0/13 123.52.0.0/14 123.64.0.0/11 123.97.128.0/17 123.100.0.0/19 123.112.0.0/12 123.128.0.0/13 123.138.0.0/15 123.150.0.0/15 123.152.0.0/13 123.164.0.0/14 123.184.0.0/14 123.196.0.0/15 123.232.0.0/14 123.249.0.0/16 124.42.64.0/18 124.64.0.0/15 124.67.0.0/16 124.73.0.0/16 124.114.0.0/15 124.126.0.0/15 124.128.0.0/13 124.160.0.0/16 124.163.0.0/16 124.192.0.0/15 124.200.0.0/13 124.226.0.0/15 124.228.0.0/14 124.236.0.0/14 124.240.0.0/17 124.240.128.0/18 124.248.0.0/17 125.36.0.0/14 125.40.0.0/13 125.64.0.0/12 125.79.0.0/16 125.80.0.0/13 125.88.0.0/13 125.104.0.0/13 125.112.0.0/12 140.224.0.0/16 140.246.0.0/16 159.226.0.0/16 175.0.0.0/12 175.16.0.0/13 175.24.0.0/14 175.30.0.0/15 175.42.0.0/15 175.44.0.0/16 175.46.0.0/15 175.48.0.0/12 175.64.0.0/11 175.102.0.0/16 175.106.128.0/17 175.146.0.0/15 175.148.0.0/14 175.152.0.0/14 175.160.0.0/12 175.178.0.0/16 175.184.128.0/18 175.185.0.0/16 175.186.0.0/15 175.188.0.0/14 180.76.0.0/16 180.96.0.0/11 180.136.0.0/13 180.152.0.0/13 180.208.0.0/15 182.18.0.0/17 182.88.0.0/14 182.112.0.0/12 183.0.0.0/10 183.64.0.0/13 183.129.0.0/16 183.160.0.0/12 183.184.0.0/13 183.192.0.0/11 192.74.224.0/19 198.2.203.64/28 198.2.212.160/28 221.204.0.0/15 202.43.144.0/22 202.46.32.0/19 202.66.0.0/16 202.96.0.0/12 202.111.160.0/19 202.112.0.0/14 202.117.0.0/16 202.165.176.0/20 202.196.80.0/20 203.69.0.0/16 203.86.0.0/18 203.86.64.0/19 203.93.0.0/16 203.169.160.0/19 210.5.0.0/19 210.14.128.0/19 210.21.0.0/16 210.32.0.0/14 210.51.0.0/16 210.52.0.0/15 210.192.96.0/19 211.76.96.0/20 211.78.208.0/20 211.86.144.0/20 211.90.0.0/15 211.92.0.0/14 211.96.0.0/13 211.136.0.0/13 211.144.12.0/22 211.144.96.0/19 211.144.160.0/20 211.147.208.0/20 211.147.224.0/23 211.152.14.0/24 211.154.64.0/19 211.154.128.0/19 211.155.24.0/22 211.157.32.0/19 211.160.0.0/13 211.233.70.0/24 218.0.0.0/11 218.56.0.0/13 218.64.0.0/11 218.88.0.0/13 218.96.0.0/14 218.102.0.0/16 218.104.0.0/14 218.108.0.0/15 218.194.80.0/20 218.200.0.0/13 218.240.0.0/13 219.128.0.0/11 219.223.192.0/18 219.232.0.0/16 219.234.80.0/20 219.154.0.0/15 220.112.0.0/16 220.154.0.0/15 220.160.0.0/11 220.181.0.0/16 220.191.0.0/16 220.192.0.0/12 220.228.70.0/24 220.248.0.0/14 220.250.0.0/19 220.252.0.0/16 221.0.0.0/12 221.122.0.0/15 221.176.0.0/13 221.192.0.0/14 221.200.0.0/14 221.204.0.0/15 221.206.0.0/16 221.207.0.0/16 221.208.0.0/12 221.212.0.0/15 221.214.0.0/15 221.216.0.0/13 221.224.0.0/13 221.228.0.0/14 221.232.0.0/13 222.32.0.0/11 222.64.0.0/12 222.80.0.0/12 222.132.0.0/14 222.136.0.0/13 222.168.0.0/13 222.172.222.0/24 222.176.0.0/13 222.184.0.0/13 222.200.0.0/16 222.208.0.0/13 222.219.0.0/16 222.220.0.0/15 222.240.0.0/13 223.4.0.0/14 223.64.0.0/11
引用元：http://www.wizcrafts.net/chinese-blocklist.html
http://www.kakanoba.com/homepage-news/3558/
画像やCSS,JavaScriptにブラウザキャッシュを適用させる
画像やCSS,JavaScriptにブラウザキャッシュを適用させて表示を高速化する方法です。
ちなみにGoogle Adsenseでは以下の様なアラートが出ることがあります。
<b>ブラウザのキャッシュを活用する</b>
静的リソースの HTTP ヘッダー内で、有効期日や最大経過時間を設定すると、ブラウザがネットワークからではなくローカル ディスクから以前にダウンロードしたリソースを読み込むようになります。
設定方法は次の通り
.htaccess に以下の内容を記述してサイトのトップに設置
<IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access 1 week" ExpiresByType image/jpeg "access 1 week" ExpiresByType image/gif "access 1 week" ExpiresByType image/png "access 1 week" ExpiresByType image/x-icon "access 1 week" ExpiresByType text/css "access 1 week" ExpiresByType application/x-javascript "access plus 1 week" ExpiresByType text/javascript "access plus 1 week" ExpiresByType application/javascript "access plus 1 week" </IfModule>
ただしキャッシュがきくということは、画像ファイルなどを差し替えた時にうまく変更が反映されない可能性があります。
強引にキャッシュを無効にして画像ファイルを差し替える
<img src="aaa.jpg?123456789" />
というふうに ?123456789 クエスチョンマークの後にランダムな数字などを追加します。
これでキャッシュを無効にすることが出来ます。
引用 : http://pcmanabu.com/alarm-of-google-adsense-cash/
.html ファイルのデフォルト文字コードを出力する
.html ファイルの文字コードが決まっている場合は .htmlファイル内の＜head＞タグで出力するより、 HTTPヘッダで出力したほうがブラウザの表示が少し早くなります。
（GoogleAdsenseでも勧められています。）
設定方法 （文字コード UTF-8 に設定します）
.htaccess に以下を記述してドキュメントルートに設置
AddDefaultCharset UTF-8 AddType "text/html; charset=utf-8" html htm
Firefoxおすすめ拡張機能（アドオン）
■ 検索窓とアドレスバーを統合する
https://addons.mozilla.org/ja/firefox/addon/instantfox/
■ Linky 複数のリンクを選択して一気に開く
https://addons.mozilla.org/ja/firefox/addon/linky/
■ LinkChecker（表示しているページのリンク切れを一括チェック）
https://addons.mozilla.org/ja/firefox/addon/linkchecker/developers
■ LiveHttpHeaders （HTTPヘッダを表示）
https://addons.mozilla.org/ja/firefox/addon/3829/
■ Web Developer （WEB制作に必要な機能を追加）
http://www.infoaxia.com/tools/webdeveloper/
■ Popup ALT Attributes
Windows の InternetExplorer みたいに画像の alt属性をポップアップで表示する。
http://piro.sakura.ne.jp/xul/_popupalt.html#download
■ Pearl Crescent Page Saver（スクリーンショットを撮る。Mac版Firefoxでも使用可）
http://pearlcrescent.com/products/pagesaver/
■ Fire Bug（デバッグ用拡張機能。web開発者向け。）
https://addons.mozilla.org/ja/firefox/addon/firebug/
■ Fire Query（Fire Bug開発支援。便利。）
https://addons.mozilla.org/ja/firefox/addon/12632
■ YSlow（制作したページの表示速度が遅いかどうかを判断する。要FireBug。web開発者向け。）
http://developer.yahoo.com/yslow/
■ Fire gestures （マウスジェスチャー 軽量。おすすめ！）
http://www.xuldev.org/firegestures/
■ User Agent Switcher （ブラウザのUserAgentを変更する。携帯サイト開発,iPhone向けサイトの閲覧などに使うと有効）
https://addons.mozilla.org/ja/firefox/addon/user-agent-switcher/
■ AutoPagerize
Yahoo や Google で検索結果の次のページを自動的に読み込んでくれる。
https://addons.mozilla.org/ja/firefox/addon/autopagerize/
■ Greasemonkey
https://addons.mozilla.org/ja/firefox/addon/748
■ iMacros
Firefoxをマクロで自動運転します。ログインが必要なサイトを自動化しておくと便利。
https://addons.mozilla.org/ja/firefox/addon/3863
■ Throttle
帯域を制限し、遅い環境でのブラウジングをテストするのに使用します
http://www.uselessapplications.com/en/Application/FirefoxThrottle.aspx
■ Seo Quake
http://www.seoquake.com/
SEO（検索エンジン最適化）を行うのに必要な情報を表示するアドオン
■ xpath checker（右クリックで xpath を表示）
https://addons.mozilla.org/en-US/firefox/addon/xpath-checker/
■ Memory Restart 1.1（ Firefoxの使用メモリを表示 ）
https://addons.mozilla.org/ja/firefox/addon/249361/
■ COOL PREVIEWS By cooliris（リンク先のWEBページや画像ファイルをその場でプレビュー）
http://www.coolpreviews.com/
■ Redirect Cleaner（リダイレクトページ「広告ページ」をすっとばす）
https://addons.mozilla.org/ja/firefox/addon/redirect-cleaner/
■ Redirect Remover （リダイレクトページ「広告ページ」をすっとばす）
https://addons.mozilla.jp/firefox/details/537
その他おすすめ : http://wp.me/p2JcR3-1cy
リンクを選択した時のフォーカス枠を消す
リンクを選択した時のフォーカス枠（IEだと点線、Safariだと水色、Chromeだと茶色）を消したい時があります。
CSSだと
a { outline: none; }
#hoge {
overflow : hidden;
outline : none;
}
outline というプロパティがありますが、これでは消えない時があります。
そんな時は
JavaScript
<a> タグにonfocus="this.blur();"を追加する。 例： <a href="hoge.html" onfocus="this.blur();" >
サイト内検索ASPの代わりにGoogle AJAX Search API を使用する。
サイト内検索ASPはサイト内ページが多いと結構高額になります。
そこでサイト内検索ASPの代わりにGoogle AJAX Search API を使用して構築してみましょう。
1. http://code.google.com/intl/ja/apis/loader/signup.html へアクセス
2. サイトのURLを入力
3. 表示されるサンプルをコピペ
でサンプルhtmlが出来上がります。
出来上がったhtmlは先ほど入力したURL内（本番サーバ）でしか動作しないので本番サーバへアップ。
表示のカスタマイズは以下のとおりです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Google API Application</title>
<script src="https://www.google.com/jsapi?key=■API KEY" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">
//<![CDATA[
google.load("search", "1");
function OnLoad() {
var searchControl = new GSearchControl();
var siteSearch = new GwebSearch();
//8件に変更する場合は以下を記述。
searchControl.setResultSetSize(GSearch.LARGE_RESULTSET);
//オプションを追加
options = new GsearcherOptions();
//検索結果を表示する
options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN);
siteSearch.setUserDefinedLabel("my_ラベル");
siteSearch.setSiteRestriction("■http://xxxxxx.xxxxx.xxxxxxx");
siteSearch.setUserDefinedClassSuffix("siteSearch");
searchControl.addSearcher(siteSearch, options);
searchControl.draw(document.getElementById("searchcontrol"));
}
google.setOnLoadCallback(OnLoad);
//]]>
</script>
</head>
<body>
<div id="searchcontrol">Loading...</div>
</body>
</html>
WEBサーバーのダウンを監視する無料のサービス
運用中のサーバーが本当に24時間駆動しているのか？ WEBサーバーのダウンを監視する無料のサービス
● uptimerobot
● montastic
いずれも登録して、監視したいサーバーのアドレスをいれるだけ。 簡単で２４時間監視してくれ、サーバーダウン時にはメールを送信してくれます。
Windows IE にCSS3の角丸（radius）を適用させる
■ http://www.curvycorners.net/
javascriptを読み込むだけで自動でCSSのradiusに対応してくれます。
記述例（ バージョン8以前の IEにのみ適用する。）
<!--[if lte IE 8]> <script type="text/javascript" src="curvycorners.js"></script> <![endif]-->
ツイッターに投稿してもらいやすくするTweetボタンを設置する
ツイッターに投稿してもらいやすくするTweetボタンを自分のサイトに設置するには
■ Twitter公式 ツイートボタン
http://twitter.com/goodies/tweetbutton
から設置するのが標準です。
例えばボタンだけのリンクは以下のようになります
<a href="http://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
これをカスタマイズして任意のURL（例：www.hogehoge.com/test.html ）をツイートさせたいときは
<a href="http://twitter.com/share?url=http%3A%2F%2Fwww.hogehoge.com%2Ftest.html" class="twitter-share-button" data-count="none">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
という風に ?url= をつけて記述すればOK！
また ?title= をつければページのタイトルを自由に設定できます。
ただしそれぞれURLエンコードする必要があります
URLエンコードの例 : → %3A / → %2F
＜head＞内に rel=”canonical”属性 を指定してサイト内の重複コンテンツを防ぐ
動的ページをサイト内に持っていると、セッションIDやトラッキングIDがURLに含まれ
一つ表示結果に対して複数のURLを保持するということが起きてしまいます。
例：sessionid や affid など
http://example.com/shop/index.php?product_id=32&highlight=green+dress&cat_id=1&sessionid=123&affid=431
そこで、検索エンジン各社は正規化さタグのサポートを始めました。
Google、Yahoo!、Microsoftの3社は2009年2月12日、共同で新しいタグ「 rel="canonical"」のサポートを開始した。rel="canonical"（属性）は、検索エンジンに正しいサイトのURLを認識(正規化、canonicalization）させるために使用される。
これは有効なので是非使用しましょう。
記述例
<link rel="canonical" href="http://www.example.com/dresses/greendress.html">
注意点
href属性には絶対URLが推奨されている
http://www.google.com/support/webmasters/bin/answer.py?answer=139066#1
複数の画像を1枚にくっつけて保存し、サイト表示を高速化させる（CSS Sprite）
CSS sprite を使用するとサイトの表示が高速になります。
手法としては、複数の画像を1枚に画像にくっつけて保存（mysprite.png）し、表示するときに
position: absolute; top: -210px; /* 上下にずらす */ top: 0px; /* 左右にずらす */
でずらすというもの。
Google で使われているCSS Sprite の方法
html
<a class="menu_test" href="#"><img src="/css/mysprite.png"</a>
css
a.menu_test {
display: block;
overflow: hidden;
position: relative;
width : 50px;
height : 20px;
}
.menu_test img{
position: absolute;
top: -210px;
}
/* ロールオーバー */
.menu_test img:hover{
position: absolute;
top: -230px;
}
これだけ。簡単です。
zipで複数画像を圧縮して送るとCSS Sprite を作成してくれる。
http://ja.spritegen.website-performance.org/
Fireworks用エクステンション ■CSS Sprite Extension
http://web.r-studio.jp/fieworks/articles/introduce_csssprite_extension.html
HTML5ビデオを埋め込む。またiPhone, iPadで自動再生…。
● HTML5ビデオを埋め込む
<video id="videotest" width="640" height="480" controls="controls" preload="auto" poster="bg.png"
onabort="log('abort');"
oncanplay="log('canplay');"
oncanplaythrough="log('canplaythrough');"
ondurationchange="log('durationchange');"
onemptied="log('emptied');"
onended="log('ended');"
onerror="log('error');"
onloadeddata="log('loadeddata');"
onloadedmetadata="log('loadedmetadata');"
onloadstart="log('loadstart');"
onpause="log('pause');"
onplay="log('play');"
onplaying="log('playing');"
onprogress="log('progress');"
onratechange="log('ratechange');"
onreadystatechange="log('readystatechange');"
onseeked="log('seeked');"
onseeking="log('seeking');"
onstalled="log('stalled');"
onsuspend="log('suspend');"
ontimeupdate="log('timeupdate');"
onvolumechange="log('volumechange');"
onwaiting="log('waiting');">
<source id='videosource1' src="" type="video/mp4"/>
<source id='videosource2' src="" type="video/ogg" />
<source id='videosource3' src="" type="video/webm" />
</video>
● ビデオの「再生中」「停止中」を js で判断する
var myVideo=document.getElementById("video1");
if (myVideo.paused) {
myVideo.play();
}
else {
myVideo.pause();
}
jqueryで次のように書くこともできます。
function is_video_playing()
{
var video_dom = $('div.myvideo')[0];
if (video_dom.paused) {
return false;
}
else {
return true;
}
}
● iPhone, iPadでautoplayを行うには…。
残念ながらiOSの仕様上必ず画面を一度はクリックしないと再生はできなくなっています。
HTML5の動画Playerライブラリ
HTML5の動画Playerライブラリを調べてみます。
■ videoJS
http://videojs.com/
■ sublime video
http://jilion.com/sublime/video
■ mediafront
http://mediafront.org/
HTML5での追加タグと記述サンプル
■ HTML5での追加タグは以下の通り
video section time rt ruby progress rp output nav menu meter mark legend keygen header footer figure dialog details datalist command canvas audio aside article
■ HTML5のサンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<title>HTML 5</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="XXXXX.css" />
</head>
<body>
<header>
<h1>Header</h1>
<nav><ul>
<li><a href="#">home</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
</ul></nav>
</header>
<section>
<ol id="posts-list" class="hfeed">
<li><article>
<header><h2><a href="#">article title 1</a></h2></header>
<footer>
<abbr title="2005-10-10T14:07:00-07:00">
8th October 2009
</abbr>
<address>By <a href="#">User 1</a></address>
</footer>
<div>contents contents contents contents contents contents contents contents contents </div>
</article></li>
<li><article>
<header><h2><a href="#">article title 1</a></h2></header>
<footer>
<abbr title="2005-10-10T14:07:00-07:00">
8th October 2009
</abbr>
<address>By <a href="#">User 1</a></address>
</footer>
<div>contents contents contents contents contents contents contents contents contents </div>
</article></li>
<li><article>
<header><h2><a href="#">article title 1</a></h2></header>
<footer>
<abbr title="2005-10-10T14:07:00-07:00">
8th October 2009
</abbr>
<address>By <a href="#">User 1</a></address>
</footer>
<div>contents contents contents contents contents contents contents contents contents </div>
</article></li>
</ol>
</section>
<section>
<h2>sub menu</h2>
<ul>
<li><a href="#" rel="external">menu 1</a></li>
<li><a href="#" rel="external">menu 2</a></li>
<li><a href="#" rel="external">menu 3</a></li>
<li><a href="#" rel="external">menu 4</a></li>
<li><a href="#" rel="external">menu 5</a></li>
</ul>
</section>
<footer>
<address>Copyright © XXXXX All Rights Reserved.</address>
</footer>
</body>
</html>
http://granshe.blog.shinobi.jp/Entry/118/
http://www.scratchbrain.net/blog/ver2/entries/001552.html
http://dwlog.net/2009/08/html5-in-dreamweaver.html
iPhoneのSafari対応について - プログラミングノート
http://d.hatena.ne.jp/ntaku/20090913/1252827348
iPhoneのWebclip用アイコンを作成する
iPhoneのWebclip用アイコン作成方法
iPhone/iPod touchは、ホーム画面に、HPへのリンクのアイコンを作ることができます。（Webclipと言います。）
このアイコンを、ホームページやブログに、アップしておくことで、そのアイコンをWebclipしてもらって、表示できるようにしてみました。
１．57×57のpngファイルをつくって、アップする
２．HTMLのheadタグ内に、
<link rel="apple-touch-icon" href="アップしたファイル名"/>
と記述する
この２つでできます。
「Windows IE6, 7, 8で透過pngを使う」の決定版
IE6,7,8でうまく透過pngを表示させるため、今まで様々なスクリプトが開発されてきましたが、
とうとう決定版が出現。
■ jQuery.belatedPNG（ belatedPNGのjquery版 ）
http://wakuworks.jugem.jp/?eid=153
■ DD_belatedPNG
http://www.dillerdesign.com/experiment/DD_belatedPNG/
ここからダウンロード。
/js/ に D_belatedPNG.jsをアップロードして、
<!--[if lte IE 6]>
<script type="text/javascript" src="./js/DD_belatedPNG.js"></script>
<script type="text/javascript">
/* EXAMPLE */
DD_belatedPNG.fix('.png_bg');
</script>
<![endif]-->
とするだけでOK。
DD_belatedPNG.fix('.png_bg');
で、透過pngを使っている要素を指定。（例の場合だと クラス名 "png_bg" が指定されている。）
digest認証をつける
● WEBページにパスワード認証（digest認証）をつける
WEBページにパスワード認証（digest認証）をつけるには、まず 【realm名】【ユーザー名】【パスワード】 の3つを事前に決める必要があります。 ではここで、下記の通りとして digest認証を設置します
【realm名】myrealm
【ユーザー名】hogehoge
【パスワード】fugafuga
まず 認証を設置したいディレクトリに .htaccessファイルを以下のように設置
AuthUserFile /パスワードファイルをおくパス/.htdigest
AuthName myrealm
AuthType Digest
Require valid-user
<Files ~ "^.(htpasswd|htaccess|htdigest)$">
deny from all
</Files>
次に /パスワードファイルをおくパス/.htdigest を作成しますが、unixコマンドを使用します
htdigest -c a.htdigest myrealm hogehoge
# 上記コマンドを実行するとパスワードを聞いてくるので【fugafuga】と入力
すると、 a.htdigest というファイルができあがるのでFTPソフトでアップロード後、ファイル名を .htdigest に変更します。
以上でok!
● Apacheで digest認証が有効かどうか確認する
apacheの設定でモジュールが読み込まれているかどうか確認する
cat /etc/httpd/conf.modules.d/00-base.conf | grep digest
携帯サイト開発時に利用する携帯シミュレータ
・iモードHTMLシミュレータ
http://www.nttdocomo.co.jp/service/imode/make/content/html/tool/index.html
iモードHTMLシミュレータII
http://www.nttdocomo.co.jp/service/imode/make/content/html/tool2/index.html
(無印のほうが表示が実機に近い印象。ただしcookieを受け入れてしまうみたいなのでセッションのチェックには使えない。)
●AU
■ Openwave
http://www.au.kddi.com/ezfactory/tool/ue/index.html
http://www.au.kddi.com/ezfactory/tec/spec/html_con005.html
●Softbank
■ 開発ツール一覧
http://creation.mb.softbank.jp/doc_tool/tool_list.html
(個別のツールを見るには、会員登録必要)
●Firefoxアドオン（おすすめ。これを導入して Cookie をオフにするのが開発しやすいでしょう。）
■ FireMobileSimulator
http://firemobilesimulator.org/
親ディレクトリ（上位階層）で指定した Basic認証を特定ディレクトリで解除する
親ディレクトリ（上位階層）で指定した Basic認証を特定ディレクトリで解除したいことがあります。
その場合はBasic認証（またはdigest認証）を解除したいディレクトリに
.htaccess ファイルを以下の内容で設置する
Satisfy Any
これでOKです。
ブラウザのキャッシュを無効にする。また検索エンジンロボットにページ巡回、ページキャッシュさせないようにする。
● htmlだけでブラウザキャッシュを無効にする方法。
htmlの＜head＞内に以下のコードを追加
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-store">
<meta http-equiv="Expires" content="-1">
● 検索エンジンロボットにページ巡回、ページキャッシュさせないようにする。
<meta name="robots" content="noindex,nofollow,noarchive">
htmlページにキーボードショートカットをつけるには。
htmlページのボタンはマウスでクリックすることを前提に作られることが多いが、
実はショートカット（アクセスキー）というものを指定することが出来る。
■ 指定の方法例
<a href="save.html" accesskey="s" >文書の保存</a>
■ これが実際のブラウザではどういう操作になるかというと
・Windows IE 「alt」+「s」 でフォーカスを移動させた後に「Enter」で実行 ・Windows Firefox「shift」+「alt」+「s」 で実行 ・Windows Opera 「shift」+「esc」 で一覧表示させた後に「s」で実行 ・Mac Safari 「control」+「option」+「s」 で実行 ・Mac Firefox 「control」+「s」 で実行 ・Mac Opera 「shift」+「esc」 で一覧表示させた後に「s」で実行
となります。
参考：http://phize.net/resource/ua/accesskey.html
Markdown記法のまとめ
ブログで記事を記述するにはMarkdown記法が便利です。 はてな記法より便利という人も結構います。
見出し＜h1＞〜＜h6＞
先頭に#シャープを1つつけると＜h1＞
先頭に##シャープを2つつけると＜h2＞
先頭に###シャープを3つつけると＜h3＞
先頭に####シャープを4つつけると＜h4＞
先頭に#####シャープを5つつけると＜h5＞
先頭に######シャープを6つつけると＜h6＞
引用（メールで返信する時と同じ）
先頭に>を1つつけると引用＜blockquote＞になります
ソースコードを記述（ブロック）
各行の先頭に半角スペース4つ以上を挿入する
各行の先頭にタブ1つ以上を挿入する
（↑要はテキストエディタでインデントをつけてコピペすればOK。）
ソースコードを記述（インライン）
先頭と末尾にバッククォート`1つ以上を挿入する
強調 ＜em＞
先頭と末尾に*アスタリスク1つを挿入する。
先頭と末尾にアンダースコア_1つ**を挿入する。
強調 ＜strong＞
先頭と末尾に*アスタリスク2つを挿入する。
先頭と末尾にアンダースコア_2つ**を挿入する。
改行
最後に半角スペース2つを挿入。
リスト
先頭にハイフン-と半角スペース1つを挿入。
先頭にプラス+と半角スペース1つを挿入。
リスト（番号付き）
先頭に数字とピリオドと半角スペース1つを挿入。
画像
リンク
[リンクテキスト]( リンク先 )
画像リンク
[]( リンク先 )
なおテーブルは PHP Markdown Extra を使用すると利用できるようになります。
Markdown記法のリンク集
swfobjectでFlashムービー（.swfファイル）を貼り付ける
フラッシュコンテンツ（.swf）ファイルをhtmlに貼り付ける時に問題になるのが
「Windows版IEでは２度クリックしないと操作できない」
という問題。
そこで SWFObject を使って .swf を貼り付けましょう
■ swfobjectのダウンロード
http://code.google.com/p/swfobject/downloads/list
■ Flashムービー貼り付けのサンプル（SWFObject2 , 2.2）
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = { allowfullscreen :'true' };
var attributes = {};
swfobject.embedSWF("versiontest.swf", "my_movie_id", "100", "100", "10.0.0", false, flashvars, params, attributes);
</script>
■ Flashムービー貼り付けのサンプル（SWFObject1.5）
<div id="hogehoge"></div>
<script type="text/javascript">
var so = new SWFObject("my_movie.swf", "dummy", "150", "245", "7", "#ffffff");
so.addParam("wmode", "transparent");
so.write("hogehoge");
</script>
とすると＜div id="hogehoge"＞＜/div＞
の中にフラッシュコンテンツが貼り付けられます。便利
■ SWFObjectのコードジェネレーターを使用する
<a href="/data/filedir/515_2.html" target="_blank">swfobject_generator</a>を使用すると簡単にフラッシュ埋め込みコードを生成することができます。
■ IETesterでFlashが表示されないときは
IETesterでFlashが表示されないときはJavaScriptを使わないFlash埋め込みが必要です。
<a href="/data/filedir/515_2.html" target="_blank">こちらのswfobject_generator</a>を使って【Static Publishing】で埋め込みます。
携帯サイトでフォームの入力文字を固定する。
全角（デフォルト）
＜input type="text" istyle="1" mode="hiragana"＞
半角カナ
＜input type="text" istyle="2" mode="hankakukana"＞
英字
＜input type="text" istyle="3" mode="alphabet"＞
数字
＜input type="text" istyle="4" mode="numeric"＞
と記述します。
Windows版IEで画像をブロック要素にしてマージンをセットするとずれる
<img src="test.gif" style="display:block ;margin-top:10px; margin-bottom:10px;" />
みたいな指定をすると Windows版IE（IE6で確認）でずれることがある。
この場合は＜div＞を挟んでやるとなおる。
<div> <img src="test.gif" style="display:block ;margin-top:10px; margin-bottom:10px;" /> </div>
（※↑ 実際は外部cssに記述します。）
DIVの中を下揃えで配置する
DIVの中を下揃えで配置を行うには
.test{
position:absolute;
bottom: 0;
}
でOK！
例：
<HTML> <BODY> <H1 style="height:500px;border:solid 1px red;position:relative;"> <span style="position:absolute;bottom:0">テキストテキストテキストテキストテキストテキスト</span> </H1> </BODY> </HTML>
css レイアウトで画像ボタンのメニューを作成する方法（css sprite）
http://kleza.blogspot.com/2009/04/css-sprite.html
背景画像だけを表示してテキストを隠すやり方。
「Dwyer Method」がおすすめです。
http://www.mezzoblue.com/tests/revised-image-replacement/
無料で使えるオンライン上のSEOツール
キーワードアドバイスツールプラス
・http://livepr.raketforskning.com/
Googleのサーバごとのページランクを表示
xhtmlでインラインフレーム（iframe）を使うと横スクロールバーが表示されてしまう不具合への対応
インラインフレームに読み込まれるファイルの＜html＞タグに次の項目を加える
style="overflow-x:hidden;"
例：
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> ↓ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" style="overflow-x:hidden;">
参考；
http://www.k.ctrl.titech.ac.jp/~kiyoshit/work/ie6/
構造のマークアップなしでフロートをクリアする方法「clearfix」
今更ですが。最近ではIE6,7,8に対応する必要がなくなってきたので clearfixのCSS記述は短くなっています。
● HTMLに記述
<div class="clearfix">
<div style="float:left; width:100px; height:100px; border:1px solid red;">子DIVタグ：カラム1</div>
<div style="float:left; width:100px; height:100px; border:1px solid red;">子DIVタグ：カラム2</div>
</div>
● clearfix（今のやり方 Windows IE6 , IE7 に対応する必要が無い場合）
.clearfix:after {content:''; display:table; clear:both;}
clearfix（昔のやり方。参考までに。）
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
display:inline-block;
min-height:1%; /* for IE 7*/
}
/* Hides from IE-mac */
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
Windows IE を判別してJavaScriptやCSSを適用する
Windows IE を判別してIEだけにJavaScriptやCSSを適用するには以下のように条件分岐コメント（タグ）を使用します。
ただし
IE バージョン10以降（IE 10, 11）では条件分岐コメントは適用されません
なのでIE10 ,11 の場合はJavaScriptを使用して条件分岐する必要があります。
■ 条件分岐コメント使用例
指定のバージョン（IE バージョン8の場合に ie_only.css を読み込ませる）
<!--[if IE 8]>
<link rel="stylesheet" href="ie_only.css" type="text/css" />
<![endif]-->
指定のバージョン以上（IE バージョン8,9の場合に ie_only.css を読み込ませる）
<!--[if gte IE 8]>
<link rel="stylesheet" href="ie_only.css" type="text/css" />
<![endif]-->
指定のバージョン以下（IE バージョン8,7,6,5 の場合に ie_only.css を読み込ませる）
<!--[if lte IE 8]>
<link rel="stylesheet" href="ie_only.css" type="text/css" />
<![endif]-->
指定のバージョンより上（IE バージョン9の場合に ie_only.css を読み込ませる）
<!--[if gt IE 8]>
<link rel="stylesheet" href="ie_only.css" type="text/css" />
<![endif]-->
指定のバージョン未満（IEバージョン 7,6,5 の場合に ie_only.css を読み込ませる）
<!--[if lt IE 8]>
<link rel="stylesheet" href="ie_only.css" type="text/css" />
<![endif]-->
■JavaScript使用例（Windows IE 10,11 用）
// （IE バージョン5, 6, 7, 8, 9, 10, 11の場合に ie_only.css を読み込ませる）
<script type="text/javascript" >
if (navigator.userAgent.indexOf('msie') >= 0 || navigator.userAgent.indexOf('Trident') >= 0){
var d = document;
var link = d.createElement('link');
link.href = 'ie_only.css';
link.rel = 'stylesheet';
link.type = 'text/css';
var h = d.getElementsByTagName('head')[0];
h.appendChild(link);
}
</script>
複数のCSSスタイルを指定するには?
＜p＞タグにクラス「note」「emph」という複数のクラスを指定するには
<p class="note emph">テキスト</p>
という風に半角スペースで区切って記述する
ブラウザごとの差異をリセットするCSSデフォルト（reset.css）の設定
ブラウザごとの表示の差をなくすために下記のようなリセットをするCSSを最初に読み込ませるといいです。（おすすめ順）
厳密には
・正規化するCSS（ブラウザの違いだけを揃えるCSS「normalize.css」「sanitize.css」）
・リセットするCSS（全てのスタイルを一旦リセットするCSS「eric meyer reset css 2.0」）
という違いがありますが、どれか１つを選んでhtmlの最初に読み込ませるという点では同じです。
● normalize.css（GitHubやBootstrap3で採用されています。）
https://necolas.github.io/normalize.css/
● Bootstrap4からは normalize.css をベースに reboot.css が採用されました
https://github.com/twbs/bootstrap/blob/v4-dev/scss/_reboot.scss
● ress.css
https://github.com/filipelinhares/ress
● sanitize.css
http://10up.github.io/sanitize.css/
● eric meyer reset css 2.0
http://meyerweb.com/eric/tools/css/reset/
● modern-css-reset
モダンブラウザ向けの reset.css
https://github.com/hankchizljaw/modern-css-reset
CDN
<link rel="stylesheet" href="https://unpkg.com/modern-css-reset/dist/reset.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modern-css-reset/dist/reset.min.css" />