<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" />
https://chrome.google.com/webstore/detail/bookmark-sidebar/afdfpkhbdpioonfeknablodaejkklbdn?hl=en
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">
「ホーム画面へ追加」の仕組みを入れるためには以下の3つの要件があります
・1. ServiceWorkerが有効化されていること
・2. manifestファイルが読み込まれていてそこに設定が記載されていること
・3. https:// で配信されていること
引用: [PWA/A2HS]Webアプリをインストールしてホーム画面へ追加できるようにする - Qiita
引用元 : https://webtan.impress.co.jp/e/2019/09/02/33637
1. ネットワークリクエストの処理 ブラウザで発生するネットワークへのリクエストをService Workerが受け取り、どう処理するかを決定して実行する。
2. 事前データ読み込み Service Workerのインストール中にファイルをプリロード(事前読み込み)することも可能だ。
3.プッシュ通知 ネイティブアプリと同じように、プッシュ通知を受け取って表示できる。ユーザーが1回サイトを訪問してプッシュ通知を許可することは必要だが、それ以降は、ブラウザが開いてなくてもウェブサイトからプッシュ通知のメッセージを送り、Service Workerがそれを受け取ってコンピュータ上で表示できる。
4.バックグラウンド同期 本来ならばすぐにサーバーにデータを送信するような場合でも、オフライン状態であれば、ネットワーク接続状態が戻るまでデータ通信を保留し、あとから処理できる。
brew install webp
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 での作業)
1. 移行元の WordPress 管理画面から「All-in-One WP Migration」プラグインをインストールし、有効にします。
2. 管理画面左のメニューの「All-in-One WP Migration」のエクスポートをクリックします
3. 「エクスポート先」「ファイル」を順にクリックすると圧縮が開始されます
php.ini
upload_max_filesize = 999M
post_max_size = 999M
memory_limit = 999M
(移行先(新サーバ)の WordPress での作業)
1. 移行先の WordPress 管理画面から「All-in-One WP Migration」プラグインをインストールし、有効にします。
2. 管理画面左のメニューの「All-in-One WP Migration」のインポートをクリックします
3. ダウンロードファイルを取り込んでインポートを完了させます
WordPress 管理画面の設定からUR を変更します(変更する必要がある場合)
<!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>
/**
* カスタム管理画面メニュー
*
*/
function original_page() {
add_menu_page('オリジナルページ', 'オリジナルページ', 'manage_options', 'original_page', 'original_menu');
}
add_action('admin_menu', 'original_page');
/**
* original_menu
*
*/
function original_menu() {
include 'original_menu.php';
}
functions.php と同階層に次のファイルを作成します。
original_menu.php
<?php
echo "テストページです";
以上です。
ダッシュボード内の不必要なメニューを非表示、表示順を変更、カスタム投稿の名称を自分が分かりやすい名前に変更
他には : https://bit.ly/2ZG6B8M
[WordPress] 独自の設定画面を作って簡単に情報を管理する! | inter-arteq.com :: interaction between art and technology
WordPressのDBモデルにへLaravel Eloquentからアクセスできるようにする。
WordPress +Laravel (2サイトまで無料)
http://nukesaq88.github.io/Pngyu/ja.html
ImageOptim では 次のpng圧縮エンジンを使用しているようです
・png圧縮エンジン pngout
・png圧縮エンジン Advpng
・png圧縮、不要メタデータ削除 oxipng
WEBページやWEBシステムで Windowsの外字ファイル( .tte )を使用するには
フォントファイル ( .tte ) → ( .woff ) を行ってからCSSで登録します。
https://opentype.jp/woffconv.htm
こちらを使って woff ファイルへ変換します。
外字ファイル /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>
Resources - mixed content
This page includes HTTP resources.
View 7 requests in Network Panel
Google Chrome のデベロッパーツール (Developers Tool )のショートカット
Google Chrome を起動して Command + Shift + c を押すとデベロッパーツール が起動します。
そのデベロッパーツールで使えるショートカットがなかなか便利 !
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+下矢印 |
以下のように記述すると「ブラウザ幅」と「ディスプレイ解像度」によってレスポンシブに画像を入れ替わります
<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
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
<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
<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
例 ) このようなhtmlの場合、アイコン画像がテキストより大きい場合表示がずれます
<p>
<span>テキスト</span>
<img class="icon" src="speaker.png">
</p>
そこで次のような icon クラスを定義して位置を調整します。
.icon {
position: relative;
top: 8px;
left: 5px;
}
デモ : https://pgmemo.tokyo/livedemo/div_table/div_table.html
<table>
<tr>
<td>タイトル</td>
<td>
<p>要素1</p>
<p>要素2</p>
</td>
</tr>
</table>
DIVタグでこの表を表現するとこのようになります。
<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>
最初からDIVタグで生成するにはこのサイトを利用するといいでしょう
http://divtable.com/generator/
タイトルはSketchの「Plugins」メニューに表示されるものを記述しています
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」のチェックを外す
https://github.com/tudou527/marketch
sketchのレイアウト情報を HTML へ書き出します
sketchファイルの中のテキストデータをクリップボードにコピーします
https://github.com/exevil/Sketch-Export-Text
sketchファイル内のオブジェクトの色のHSLA表記をコピーします。 (HSLA表記は CSS 3から使用できるようになった記述方法です。IE11以降のすべてのブラウザで使用できます)
HSLAのカラーピッカーです
https://github.com/ashung/hsl_color_picker
cssでfloatを使うと、floatさせた要素の高さは親要素からは無視されますが、高さを確保したい場合は次のようにします。
テーブル TR TD の hover をある箇所だけオフにするには、 pointer-events: none; とします。
<td style="pointer-events: none;">
テーブルです
</td>
REST API 設計時の参考に。
100 - Continue
101 - Switching Protocols
200 - OK
201 - Created
202 - Accepted
203 - Non-Authoritative Information
204 - No Content
205 - Reset Content
206 - Partial Content
207 - Multi-Status
300 - Multiple Choices
301 - Moved Permanently
302 - Found
303 - See Other
304 - Not Modified
305 - Use Proxy
306 - (Reserved)
307 - Temporary Redirect
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
500 - Internal Server Error
501 - Not Implemented
502 - Bad Gateway
503 - Service Unavailable
504 - Gateway Timeout
505 - HTTP Version Not Supported
507 - Insufficient Storage
<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>
https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/
こちらからバーチャル環境をダウンロードして Virtual box を使って仮想の Windows と ブラウザ環境を 立ち上げます。
検証のエビデンスがほしい時はこちらを使うといいでしょう。
とても便利です。
http://www.dead-link-checker.com/ja/
http://validator.w3.org/checklink
WEBで先頭が 「 (カッコ)の文章があると、括弧の左端に隙間ができてしまい、左端を綺麗に揃えることができません。 Illustratorならカーニングで簡単に調整してしまうところですが、CSSの場合は次のプロパティを使用します。
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>
検索エンジンクローラーに指示を与えるにはサイトのトップに robotx.txt を設置します。
(最後に空行を1行入れます)
User-agent: *
Disallow: /
iPhoneやandroidなどスマホでフォーム入力時に 数字だけのキーボードを表示させるには
pattern を使用します。
例 :
<input type="text" pattern="\d*">
とします。
もちろん
<input type="number" pattern="\d*">
でもOKです。
flexboxによる上下、左右センタリング(中央寄せ)
justify-content: center;
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>
cssファイルを編集するときに Google Chromeのデベロッパーツールで値を変更した後、 エディターにその値を持って行きエディターを使って保存したりしてないでしょうか?
そんな面倒なことをしなくても Google Chrome 自体に .css を保存する機能があります。(最新のChromeでは使えなくなりました。代替方法は一番下)
以下の方法でGoogle Chromeを使ってローカルにあるcssファイルを直接編集して保存してみましょう。
デベロッパーツールのウィンドウが画面下表示されます
現在ブラウザで開いている同盟のcssファイル一覧が表示されるのでその中からリンクさせたいファイルを選択する
これで準備はokです。 後は自由に編集しその後に「Command+s」(Macの場合)を押すと保存されリロードしてもその状態がリセットされず残っています。
ローカルのファイルでは動作しませんので node.js や php などでローカルサーバを立てるといいでしょう。
https://chrome.google.com/webstore/detail/finch-developer-tools/phgdjnidddpccdkbedmfifceiljljgdo
・印刷リンク
<a href="#" onclick="window.print(); return false;">印刷する</a>
・印刷ボタン
<input type="button" value="印刷する" onclick="window.print();">
印刷するときだけ隠したい要素がある場合は以下のようにして隠します
@media print{
.no_print{
display: none;
}
}
<p class="no_print">この要素は印刷時に表示されません</p>
印刷するときに要素自身は隠さず、線だけ消したい時は以下のようにして消します
.my_class{
border: 1px solud red;
}
@media print{
.no_border_print{
border: none;
}
}
<div class="my_class no_border_print">このDIVの枠は表示されません</div>
A4 縦の場合
css
@page {
size: A4 portrait;
margin: 10mm;
}
A4 横の場合
css
@page {
size: A4 landscape;
margin: 10mm;
}
html 内のテキストにカーニングを適用する jQuery.Kerning.js
http://karappo.github.io/jquery.kerning.js/
カーニングデータを自分で作成して使用することもできます
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らしいモーダルウィンドウにする場合は
<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 -->
とします。
<dl class="my_table01">
<dt>項目1</dt>
<dd>テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列</dd>
<dt>項目2</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;
}
}
ただし、項目名のほうが長い場合は崩れます。
web制作時に「cssを変更/保存」→「ブラウザのリロード」はとても面倒です。
そこでemmet LiveStyle を使って SCSS の変更を即座にブラウザに反映させましょう。
簡単に言うとオートリロード機能ですが、実際にはリロードは起こりません。リロードせずに即座に反映してくれます。
それ以外にも
事ができます。
https://chrome.google.com/webstore/detail/emmet-livestyle/diebikgmpmeppiilkaijjbdgciafajmg?hl=ja
からインストールします。
インストール後 「ウィンドウ」→「拡張機能」から以下のようにセッティングします。
Sublime Text から
「Command + Shift + p」→「install」→「live style」でLiveStyle をインストールします。
css(scss)ファイルをSublime Textで、htmlファイルをChromeで開きます。
LiveStyleをon にしたら 即座に反映させる css(scss)ファイルを選びます。
以上で即座に反映させる環境ができます。
compassは各自インストールしておいてください。
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
以下のコードをファイル名 `
_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);
}
}
}
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
好きな名前のscssファイル(ここでは `
style.scss`
とします。)を scss フォルダに作成して以下のように記述します
(2行だけです。これだけでCSSスプライト画像の生成とCSSコードの書き出しが行われます。)
@include sprite-css("sprites/navi/", 2); // フォルダ名, 倍率
@include sprite-css-hover("navi", "sprites/navi_over/"); // クラス名, フォルダ名
compassを起動して scss→css 変換を実行します。 (codekitやsublimetextを使用することをおすすめします。)
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スプライトを作成するには以下のサイトが便利です。 手順としてはまず普通の画像のCSSスプライト(画像+CSS)を作成して、その後にRetina対応の画像のみを作成します。
http://spritegen.website-performance.org
CSSファイル内のスプライト画像のパスを書き換える
background-image: url(spritesheet.png); /* spritesheet.png を任意のパスに */
CSSファイル内の .sp クラスに以下のプロパティを追加
overflow:hidden;
text-indent: 100%;
white-space: nowrap;
background-size: 100%;
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>
ベクターデータのSVGファイルはRetinaディスプレイがどんどん増えてくる今後代替フォーマットが登場しない限り主流になってくると思われます。 ただし、<img>タグでSVGファイルを読み込むと色変更がCSSでできません。 (<SVG>タグとソースを直接貼り付ける必要がある)
そこで desvg.js を使用します。
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_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>
実際の表示
「display: inline-block」は幅や高さなどを指定できるインライン要素です。
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>
実際の表示
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>
実際の表示
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_flex{
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.div_flex .cell {
border : 1px solid purple;
}
<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,js項目
a{
-webkit-tap-highlight-color: rgba(200,200,200,0.2);
}
img{
max-width: 100%;
height: auto;
}
*{
box-sizing: border-box;
}
<body>
<div class="wrapper">
ここに記述していきます。
</div>
</body>
.wrapper{
overflow: hidden;
}
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
html {
touch-action: manipulation;
}
192px x 192px のアイコンを作成し、以下のタグで指定します。
<link rel="apple-touch-icon" href="/touch-icon.png">
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
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の画面サイズ
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はいちいちダウンロードしなくてもサーバ上のファイルを直接指定するだけで使用できます。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
です。
これをhtmlファイルの`
〜
`
内に埋め込みます。
Font AwesomeのWEBフォントをフォームのボタンに使用するには以下のようにします。
http://fortawesome.github.io/Font-Awesome/ からダウンロードしてきてサーバにアップロードします。
<link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css">
で読み込ませます(ディレクトリは適宜書き換えてください。)
<input type="button" class="fontawesome_submit" value=" ボタンのテスト">
.fontawesome_submit{
font-family: FontAwesome;
}
以上でOKです。簡単ですね。

のところがfont Awesomeのフォントです。 これを下記の表を元に好きなコードに書き換えるといいでしょう。
SSLサイト制作時にはそのページ内のコンテンツが全て https:// を使って表示されているかをチェックする必要があります。
<img src="/data/filedir/937_2.jpg" />
SSLのエラーがある場合はURLの左にアイコンが表示されます
Live HTTP Headers
https://addons.mozilla.org/ja/firefox/addon/live-http-headers/
を使用します。
これを立ち上げてからサイド問題のあるページをリロードして http:// でフィルタをかけて検索すると
httpで転送されているファイルがわかりますのであとはそのファイルをソース上で修正するといいでしょう。
iPhone等スマホサイトではWEBページのフォーム入力の時に自動的に画面が拡大する事があるのですが、これは
フォームのフォントサイズが16pxより小さい
の時に起きます。
そこでこれをやめさせるには以下 A,B,C のいずれかの方法を使用します。
input,select,textarea{ font-size:16px; }
例:
<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" />
何かのタイミングで以下のJavaScriptを実行して動的にviewportを書き換えると拡大率が変更(下記の例では等倍)できます。
$("meta[name='viewport']").attr('content','width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
いくら 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ページでも画像の作成方法やHTML・CSS・JavaScriptのコーディングによって速度が変わります。 そこで作成したWEBページの表示速度がどれくらい早いかをチェックして改善しましょう。
https://developers.google.com/speed/pagespeed/insights/
PC向け、モバイル向けのそれぞれの最適化アドバイスが表示されます。
サイトの読み込みやレンダリング開始までの時間を細かく表示してくれます。
・『Start Render』までがHTML,CSS,JavaScript読み込みなどレンダリング開始までの時間
・『On Load』までがレンダリング終了までの時間
なのでこれらを見比べて、「外部css・Javascript」を最適化するべきか「HTMLコンテンツ(画像ファイル等)」を最適化するべきかの指標にするといいでしょう。
http://gtmetrix.com/ アクセスして 自分のサイトURL を入力すると測定してくれます。(JavaScriptの遅延読み込みは対応していない模様。)
中国からの検索エンジンロボット(クローラー)を制限する
hn.kd.ny.adslはそもそも存在しないドメインです。
ですので下記を.htaccessに記述しても全く有効ではありません
# これを記述しても拒否できない↓ deny from hn.kd.ny.adsl
以下のように記述するのがいいでしょう( .htaccess に記述)
SetEnvIf User-Agent "360Spider" deny_ua deny from env=deny_ua
# 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にブラウザキャッシュを適用させて表示を高速化する方法です。
ちなみにGoogle Adsenseでは以下の様なアラートが出ることがあります。
<b>ブラウザのキャッシュを活用する</b>
静的リソースの HTTP ヘッダー内で、有効期日や最大経過時間を設定すると、ブラウザがネットワークからではなくローカル ディスクから以前にダウンロードしたリソースを読み込むようになります。
設定方法は次の通り
<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ファイル内の<head>タグで出力するより、 HTTPヘッダで出力したほうがブラウザの表示が少し早くなります。
(GoogleAdsenseでも勧められています。)
.htaccess に以下を記述してドキュメントルートに設置
AddDefaultCharset UTF-8 AddType "text/html; charset=utf-8" html htm
リンクを選択した時のフォーカス枠(IEだと点線、Safariだと水色、Chromeだと茶色)を消したい時があります。
CSSだと
a { outline: none; } #hoge { overflow : hidden; outline : none; }
outline というプロパティがありますが、これでは消えない時があります。
そんな時は
<a> タグにonfocus="this.blur();"を追加する。 例: <a href="hoge.html" onfocus="this.blur();" >
サイト内検索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>
運用中のサーバーが本当に24時間駆動しているのか? WEBサーバーのダウンを監視する無料のサービス
いずれも登録して、監視したいサーバーのアドレスをいれるだけ。 簡単で24時間監視してくれ、サーバーダウン時にはメールを送信してくれます。
■ http://www.curvycorners.net/
javascriptを読み込むだけで自動でCSSのradiusに対応してくれます。
<!--[if lte IE 8]> <script type="text/javascript" src="curvycorners.js"></script> <![endif]-->
ツイッターに投稿してもらいやすくする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
動的ページをサイト内に持っていると、セッション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
CSS sprite を使用するとサイトの表示が高速になります。
手法としては、複数の画像を1枚に画像にくっつけて保存(mysprite.png)し、表示するときに
position: absolute; top: -210px; /* 上下にずらす */ top: 0px; /* 左右にずらす */
でずらすというもの。
<a class="menu_test" href="#"><img src="/css/mysprite.png"</a>
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; }
これだけ。簡単です。
http://ja.spritegen.website-performance.org/
http://web.r-studio.jp/fieworks/articles/introduce_csssprite_extension.html
<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>
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;
}
}
残念ながらiOSの仕様上必ず画面を一度はクリックしないと再生はできなくなっています。
■ 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/iPod touchは、ホーム画面に、HPへのリンクのアイコンを作ることができます。(Webclipと言います。)
このアイコンを、ホームページやブログに、アップしておくことで、そのアイコンをWebclipしてもらって、表示できるようにしてみました。
1.57×57のpngファイルをつくって、アップする
2.HTMLのheadタグ内に、
<link rel="apple-touch-icon" href="アップしたファイル名"/>
と記述する
この2つでできます。
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" が指定されている。)
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の設定でモジュールが読み込まれているかどうか確認する
cat /etc/httpd/conf.modules.d/00-base.conf | grep digest
親ディレクトリ(上位階層)で指定した Basic認証を特定ディレクトリで解除したいことがあります。
その場合はBasic認証(またはdigest認証)を解除したいディレクトリに
.htaccess ファイルを以下の内容で設置する
Satisfy Any
これでOKです。
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ページのボタンはマウスでクリックすることを前提に作られることが多いが、
実はショートカット(アクセスキー)というものを指定することが出来る。
■ 指定の方法例
<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記法が便利です。 はてな記法より便利という人も結構います。
先頭に#シャープを1つつけると<h1>
先頭に##シャープを2つつけると<h2>
先頭に###シャープを3つつけると<h3>
先頭に####シャープを4つつけると<h4>
先頭に#####シャープを5つつけると<h5>
先頭に######シャープを6つつけると<h6>
先頭に>を1つつけると引用<blockquote>になります
各行の先頭に半角スペース4つ以上を挿入する
各行の先頭にタブ1つ以上を挿入する
(↑要はテキストエディタでインデントをつけてコピペすればOK。)
先頭と末尾にバッククォート`1つ以上を挿入する
先頭と末尾に*アスタリスク1つを挿入する。
先頭と末尾にアンダースコア_1つ**を挿入する。
先頭と末尾に*アスタリスク2つを挿入する。
先頭と末尾にアンダースコア_2つ**を挿入する。
最後に半角スペース2つを挿入。
先頭にハイフン-と半角スペース1つを挿入。
先頭にプラス+と半角スペース1つを挿入。
先頭に数字とピリオドと半角スペース1つを挿入。
![alt text](http://path.to/img.jpg)
[リンクテキスト]( リンク先 )
[![alt text](http://path.to/img.jpg)]( リンク先 )
フラッシュコンテンツ(.swf)ファイルをhtmlに貼り付ける時に問題になるのが
「Windows版IEでは2度クリックしないと操作できない」
という問題。
そこで 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】で埋め込みます。
<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の中を下揃えで配置を行うには
.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>
インラインフレームに読み込まれるファイルの<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/
今更ですが。最近ではIE6,7,8に対応する必要がなくなってきたので clearfixのCSS記述は短くなっています。
<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:after {content:''; display:table; clear:both;}
.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 を判別して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]-->
// (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>
<p>タグにクラス「note」「emph」という複数のクラスを指定するには
<p class="note emph">テキスト</p>
という風に半角スペースで区切って記述する
ブラウザごとの表示の差をなくすために下記のようなリセットをするCSSを最初に読み込ませるといいです。(おすすめ順)
厳密には
・正規化するCSS(ブラウザの違いだけを揃えるCSS「normalize.css」「sanitize.css」)
・リセットするCSS(全てのスタイルを一旦リセットするCSS「eric meyer reset css 2.0」)
という違いがありますが、どれか1つを選んでhtmlの最初に読み込ませるという点では同じです。
https://necolas.github.io/normalize.css/
https://github.com/twbs/bootstrap/blob/v4-dev/scss/_reboot.scss
https://github.com/filipelinhares/ress
http://10up.github.io/sanitize.css/
http://meyerweb.com/eric/tools/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" />