WEB制作(html・css(スタイルシート))に関する各種メモ書き

必須の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" />
No.2559
10/15 13:38

edit

No.2303
03/23 12:05

edit

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.バックグラウンド同期 本来ならばすぐにサーバーにデータを送信するような場合でも、オフライン状態であれば、ネットワーク接続状態が戻るまでデータ通信を保留し、あとから処理できる。

No.2296
03/15 10:23

edit

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

No.2128
03/31 08:53

edit

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 を変更します(変更する必要がある場合)

No.1936
12/25 13:51

edit

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>
No.1841
12/23 18:22

edit

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 "テストページです";

以上です。

No.1819
07/20 00:08

edit

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サイトまで無料)

No.1818
07/19 23:49

edit

画像ファイルを png を圧縮する

● Mac用png画像圧縮ソフト ImageOptim

https://imageoptim.com/mac

● Windows用png画像圧縮ソフト Pngyu

http://nukesaq88.github.io/Pngyu/ja.html

ImageOptim では 次のpng圧縮エンジンを使用しているようです

・png圧縮エンジン pngout

・png圧縮エンジン Advpng

・png圧縮、不要メタデータ削除 oxipng

https://lib.rs/crates/oxipng

https://github.com/shssoichiro/oxipng/releases

No.1562
08/01 13:53

edit

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>
No.1465
11/18 21:49

edit

フォント

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
No.1328
10/28 09:53

edit

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+カラーピッカー ボックスをクリック
次または前のプロパティの編集 TabShift+Tab TabShift+Tab
値を増やす / 減らす 上矢印下矢印 上矢印下矢印
値を 10 ずつ増やす / 減らす Shift+上矢印Shift+下矢印 Shift+上矢印Shift+下矢印
値を 10 ずつ増やす / 減らす PgUpPgDown PgUpPgDown
値を 100 ずつ増やす / 減らす Shift+PgUpShift+PgDown Shift+PgUpShift+PgDown
値を 0.1 ずつ増やす / 減らす Alt+上矢印Alt+下矢印 Opt+上矢印Opt+下矢印
No.1294
09/20 10:28

edit

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

No.1293
09/10 16:16

edit

html5

チェクボックスの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

No.1280
07/26 21:15

edit

テキストとアイコン画像の位置を揃えるCSS

● テキストとアイコン画像の位置を揃えるCSS

例 ) このようなhtmlの場合、アイコン画像がテキストより大きい場合表示がずれます

<p>
	<span>テキスト</span>
	<img class="icon" src="speaker.png">
</p>

そこで次のような icon クラスを定義して位置を調整します。

.icon {
  position: relative;
  top: 8px;
  left: 5px;
}

デモはこちら
https://pgmemo.tokyo/data/filedir/1251_1.html

添付ファイル1
No.1251
08/09 10:16

edit

添付ファイル

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/

No.1250
07/31 12:27

edit

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

No.1239
07/11 19:10

edit

cssでfloatを使った時に高さを確保する

cssでfloatを使うと、floatさせた要素の高さは親要素からは無視されますが、高さを確保したい場合は次のようにします。

● 1. floatさせた最後の要素の後ろに clearfix を使う

● 2. 親要素にoverflow:hidden か overflow:auto を使う

No.1217
05/09 20:54

edit

テーブル TR TD の hover をある箇所だけオフにする

テーブル TR TD の hover をある箇所だけオフにするには、 pointer-events: none; とします。

<td style="pointer-events: none;">
    テーブルです
</td>
No.1206
04/20 10:09

edit

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

引用 : https://restpatterns.mindtouch.us/HTTP_Status_Codes

No.1198
03/28 11:33

edit

プリント時に要素を削除する CSS

<div class="no-print">この要素は印刷時に表示されません</div>
@media print{
	.no-print {
		display:none;
	}
}
No.1196
03/01 17:20

edit

電話番号に自動でつくリンクを消す

Edge や iPhone , iPad には電話番号に自動でリンクが付きますが、それを消すには htmlの次のように記述します。

<head>
<meta name="format-detection" content="telephone=no">
</head>

これでページ全体の電話番号自動リンクがオフになります。 部分的にリンクをつけたい場合は以下のように明示的に指定してあげます。

電話:<a href="tel:1234567890">123-456-7890</a>
No.1187
03/28 11:35

edit

昔の古い Windows IE でのブラウザチェックを行う

● 仮想環境の Windows ie 8 9 10 11 と edge を使用する

https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/

こちらからバーチャル環境をダウンロードして Virtual box を使って仮想の Windows と ブラウザ環境を 立ち上げます。

● Browser Stack

検証のエビデンスがほしい時はこちらを使うといいでしょう。
とても便利です。

https://www.browserstack.com/

No.1185
09/09 16:17

edit

WEBサイトのリンク切れを検知するリンクチェックツール

● リンクチェッカー(リンク切れチェックツール)

http://www.dead-link-checker.com/ja/

● W3C Link Checker

http://validator.w3.org/checklink

● Online Broken Link Checker

http://www.brokenlinkcheck.com/

No.1182
12/25 11:26

edit

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>
No.1177
11/27 15:41

edit

No.1175
11/24 16:48

edit

robots.txt を設置して検索エンジンクローラーが巡回しないようにする

検索エンジンクローラーに指示を与えるにはサイトのトップに robotx.txt を設置します。

全クローラーを対象にクロールをさせない

(最後に空行を1行入れます)

User-agent: *
Disallow: /

● robots.txt 解析ツール

http://www.searchengineoptimization.jp/robots-txt-analyzer

No.1170
11/01 22:57

edit

iPhoneでフォーム入力時に 数字だけのキーボードを表示させる

iPhoneやandroidなどスマホでフォーム入力時に 数字だけのキーボードを表示させるには
pattern を使用します。

例 :

<input type="text" pattern="\d*">

とします。

もちろん

<input type="number" pattern="\d*">

でもOKです。

No.1169
11/10 17:42

edit

html5
携帯スマホサイト
iPhone
フォーム

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>
添付ファイル1
No.1168
10/16 10:56

edit

添付ファイル

css

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

参考: https://liginc.co.jp/web/tool/browser/38012

No.1164
05/24 11:30

edit

css
高速化

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;
}
No.1146
11/13 14:55

edit

html 内のテキストにカーニングを適用する jQuery.Kerning.js

html 内のテキストにカーニングを適用する jQuery.Kerning.js

● jQuery.Kerning.js

http://karappo.github.io/jquery.kerning.js/

カーニングデータを自分で作成して使用することもできます

No.1131
04/17 16:17

edit

jQuery

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">&times;</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 -->

とします。

『動作デモ』はこちら

添付ファイル1
No.1042
05/22 14:04

edit

添付ファイル

Bootstrap

dt,ddタグとCSSによるテーブル表現

  <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;
	}

}

ただし、項目名のほうが長い場合は崩れます。

No.1037
08/31 13:20

edit

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)ファイルを選びます。

以上で即座に反映させる環境ができます。

添付ファイル1
No.1031
05/09 12:10

edit

添付ファイル

css
scss

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');
}

参考: http://bit.ly/1WgkQtD

No.1030
05/11 10:03

edit

css
compass
scss

オンラインで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用画像のみを作成する
No.1028
04/29 16:42

edit

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>
No.1027
04/28 17:36

edit

高速化

<img>タグで埋め込んだSVGファイルの色変更をする JavaScript

ベクターデータのSVGファイルはRetinaディスプレイがどんどん増えてくる今後代替フォーマットが登場しない限り主流になってくると思われます。 ただし、<img>タグでSVGファイルを読み込むと色変更がCSSでできません。 (<SVG>タグとソースを直接貼り付ける必要がある)

そこで desvg.js を使用します。

● deSVG

http://benhowdle.im/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;
}

便利です!

No.1025
04/24 01:40

edit

No.1018
04/04 15:58

edit

iPhone
iPad

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>

実際の表示

aaa
bbb
bbb
ccc

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>

実際の表示

aaa
bbb
bbb
ccc

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>

実際の表示

aaa
bbb
bbb
ccc

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

添付ファイル1
No.1003
06/24 15:22

edit

添付ファイル

css

スマホサイト制作時に設定しておくと良い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.jsonicons の記述方法. https://developer.mozilla.org/ja/docs/Web/Manifest/icons

iphoneの場合

こちらのサイトから作成します https://progressier.com/pwa-icons-and-ios-splash-screen-generator

No.1001
02/01 11:02

edit

携帯スマホサイト
css

スマホサイトをフルスクリーンにして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"
}

PWAの manifest.json で実現できること | hifive開発者ブログ

No.998
01/13 12:02

edit

携帯スマホサイト

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	
No.997
01/20 01:42

edit

Bootstrap

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ファイルの`` 内に埋め込みます。

No.991
01/02 17:17

edit

Bootstrap

CSS3で作るツールチップ(吹き出し)

jQueryのプラグインを使わなくてもCSS3だけでツールチップは作成できます。
CSS3だけのほうが軽いのでおすすめです。
そこで CSS3 ツールチップ作成サイト

http://www.cssportal.com/css-tooltip-generator/

http://www.menucool.com/tooltip/css3-tooltip


No.976
10/02 18:27

edit

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="&#xf002; ボタンのテスト">

フォームのCSS

.fontawesome_submit{
    font-family: FontAwesome;
}

以上でOKです。簡単ですね。

&#xf002;

のところがfont Awesomeのフォントです。 これを下記の表を元に好きなコードに書き換えるといいでしょう。

●2. Font Awesomeのコード確認表

http://fortawesome.github.io/Font-Awesome/cheatsheet/

No.942
05/23 13:06

edit

Bootstrap
アイコン

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で転送されているファイルがわかりますのであとはそのファイルをソース上で修正するといいでしょう。


添付ファイル1

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にするという方法で回避できます。

No.936
01/14 13:50

edit

携帯スマホサイト
iPhone
jQuery

作成したWEBページの表示速度がどれくらい早いかをチェックする

同じ見た目のWEBページでも画像の作成方法やHTML・CSS・JavaScriptのコーディングによって速度が変わります。 そこで作成したWEBページの表示速度がどれくらい早いかをチェックして改善しましょう。

● Google PageSpeed Insights

https://developers.google.com/speed/pagespeed/insights/
PC向け、モバイル向けのそれぞれの最適化アドバイスが表示されます。

● Web PageTest

http://www.webpagetest.org/

サイトの読み込みやレンダリング開始までの時間を細かく表示してくれます。

・『Start Render』までがHTML,CSS,JavaScript読み込みなどレンダリング開始までの時間
・『On Load』までがレンダリング終了までの時間

なのでこれらを見比べて、「外部css・Javascript」を最適化するべきか「HTMLコンテンツ(画像ファイル等)」を最適化するべきかの指標にするといいでしょう。

● GT metrix

http://gtmetrix.com/ アクセスして 自分のサイトURL を入力すると測定してくれます。(JavaScriptの遅延読み込みは対応していない模様。)

ちなみにこのページの結果は となりました。 JavaScriptを最適化する必要があるということがわかりますね。

その他: http://tools.pingdom.com/fpt/

添付ファイル1
No.923
04/18 10:13

edit

添付ファイル

高速化

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/

No.906
07/14 14:06

edit

.htaccess

画像や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/

No.904
07/14 14:06

edit

css
.htaccess

.html ファイルのデフォルト文字コードを出力する

.html ファイルの文字コードが決まっている場合は .htmlファイル内の<head>タグで出力するより、 HTTPヘッダで出力したほうがブラウザの表示が少し早くなります。

(GoogleAdsenseでも勧められています。)

設定方法 (文字コード UTF-8 に設定します)

.htaccess に以下を記述してドキュメントルートに設置

AddDefaultCharset UTF-8
AddType "text/html; charset=utf-8" html htm

No.892
07/14 14:06

edit

.htaccess

Firefoxおすすめ拡張機能(アドオン)

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

No.379
09/11 14:49

edit

Firefox

リンクを選択した時のフォーカス枠を消す

リンクを選択した時のフォーカス枠(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();" >
No.835
02/25 15:38

edit

サイト内検索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>
No.823
10/20 14:19

edit

HTMLタグの閉じ忘れを自動修正してくれるWEBサービス

HTMLタグの閉じ忘れを自動修正してくれるWEBサービス
■ Fix My HTML
http://fixmyhtml.com/


No.818
10/11 16:52

edit

WEBサーバーのダウンを監視する無料のサービス

運用中のサーバーが本当に24時間駆動しているのか? WEBサーバーのダウンを監視する無料のサービス

● uptimerobot

http://www.uptimerobot.com/

● montastic

http://www.montastic.com/

いずれも登録して、監視したいサーバーのアドレスをいれるだけ。 簡単で24時間監視してくれ、サーバーダウン時にはメールを送信してくれます。

No.816
10/10 22:26

edit

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]-->  
No.810
03/25 00:53

edit

ツイッターに投稿してもらいやすくする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
No.774
03/23 12:29

edit

<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

No.748
08/18 10:48

edit

検索エンジン

複数の画像を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

No.745
10/25 09:19

edit

css

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の仕様上必ず画面を一度はクリックしないと再生はできなくなっています。

No.736
07/20 09:06

edit

html5

HTML5の動画Playerライブラリ

YoutubeやVimeoでは HTML5 の動画プレイヤーが採用されていますが、
HTML5の動画Playerライブラリを調べてみます。

■ videoJS
http://videojs.com/


■ sublime video
http://jilion.com/sublime/video


■ mediafront
http://mediafront.org/


No.733
08/02 14:40

edit

html5

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 &copy; 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

No.726
08/02 14:41

edit

html5

iPhoneのWebclip用アイコンを作成する

iPhoneのWebclip用アイコン作成方法

iPhone/iPod touchは、ホーム画面に、HPへのリンクのアイコンを作ることができます。(Webclipと言います。)

このアイコンを、ホームページやブログに、アップしておくことで、そのアイコンをWebclipしてもらって、表示できるようにしてみました。


1.57×57のpngファイルをつくって、アップする

2.HTMLのheadタグ内に、

<link rel="apple-touch-icon" href="アップしたファイル名"/>

と記述する

この2つでできます。

No.708
11/07 12:10

edit

No.703
10/25 01:20

edit

「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" が指定されている。)




No.697
12/01 17:35

edit

透過png

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
No.681
12/27 09:57

edit

.htaccess

携帯サイト開発時に利用する携帯シミュレータ

●DoCoMo
・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/


No.676
08/03 11:48

edit

Firefox
携帯

親ディレクトリ(上位階層)で指定した Basic認証を特定ディレクトリで解除する

親ディレクトリ(上位階層)で指定した Basic認証を特定ディレクトリで解除したいことがあります。

その場合はBasic認証(またはdigest認証)を解除したいディレクトリに

.htaccess ファイルを以下の内容で設置する

Satisfy Any

これでOKです。

No.654
07/14 14:07

edit

.htaccess

ブラウザのキャッシュを無効にする。また検索エンジンロボットにページ巡回、ページキャッシュさせないようにする。

● 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">
No.652
11/16 09:02

edit

検索エンジン

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

No.597
03/25 00:58

edit

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つを挿入。

画像

![alt text](http://path.to/img.jpg)

リンク

[リンクテキスト]( リンク先 )

画像リンク

[![alt text](http://path.to/img.jpg)]( リンク先 )

なおテーブルは PHP Markdown Extra を使用すると利用できるようになります。

PHP Markdown

Markdown記法のリンク集

No.549
08/23 20:04

edit

swfobjectでFlashムービー(.swfファイル)を貼り付ける

フラッシュコンテンツ(.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】で埋め込みます。



添付ファイル1
添付ファイル2

携帯サイトでフォームの入力文字を固定する。

携帯サイトで入力文字の種類のデフォルトを指定するには

全角(デフォルト)
<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">
と記述します。
No.482
06/16 16:59

edit

携帯

CSSチェックしエラー訂正するサイト【cleancss.com】

CSSをチェックしてエラー訂正をしてくれるサイト

http://www.cleancss.com/

No.439
06/16 16:24

edit

css

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に記述します。)


No.431
06/16 16:25

edit

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>
添付ファイル1
shita.html ( 369.0 Bytes ) ダウンロード
No.427
04/21 10:32

edit

添付ファイル

css

ブラウザによるフォント表示の違い

ブラウザによるフォント表示の違いをテスト。

フォント表示テスト用html


添付ファイル1

リンクタグ作成Bookmarklet

たびたびなくしてしまうのでメモ
http://kengo.preston-net.com/archives/001163.shtml
Mac版Safari, Firefox, Operaで使えます。

No.398
11/25 15:11

edit


css レイアウトで画像ボタンのメニューを作成する方法(css sprite)

よく使われる例。
http://kleza.blogspot.com/2009/04/css-sprite.html

背景画像だけを表示してテキストを隠すやり方。
「Dwyer Method」がおすすめです。
http://www.mezzoblue.com/tests/revised-image-replacement/
No.350
08/02 14:37

edit

css

無料で使えるオンライン上のSEOツール

http://www.muryoutouroku.com/free/keyplus1.html
キーワードアドバイスツールプラス

http://livepr.raketforskning.com/
Googleのサーバごとのページランクを表示

No.327
08/23 19:38

edit

RSS書式のひな型

こちらのサイトにまとめてある

http://www.openspc2.org/RSS/index.html
No.320
09/14 14:54

edit


RSS2.0の仕様

こちらのサイトにまとめてある
http://hail2u.net/documents/rss20notes.html

No.316
09/08 17:43

edit


インジケーターアイコン

アクセス中などに表示させるインジケーター画像
http://mentalized.net/activity-indicators/

No.313
08/31 18:23

edit


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/

No.303
09/27 15:51

edit


構造のマークアップなしでフロートをクリアする方法「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 */
No.288
12/15 14:30

edit

css

No.244
05/18 18:41

edit

アイコン

<ul><li>を画像リンクにしたときに Firefox で画像の外まで点線が表示されてしまう

対応方法:cssファイルに以下を追加

a:focus { outline-style: none; }
No.160
07/05 10:34

edit

Firefox

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>
No.35
04/09 14:06

edit

css
IE

複数のCSSスタイルを指定するには?

<p>タグにクラス「note」「emph」という複数のクラスを指定するには

<p class="note emph">テキスト</p>

という風に半角スペースで区切って記述する

No.5
06/16 16:36

edit

css

ブラウザごとの差異をリセットするCSSデフォルト(reset.css)の設定

ブラウザごとの表示の差をなくすために下記のようなリセットをするCSSを最初に読み込ませるといいです。(おすすめ順)
厳密には
・正規化するCSS(ブラウザの違いだけを揃えるCSS「normalize.css」「sanitize.css」)
・リセットするCSS(全てのスタイルを一旦リセットするCSS「eric meyer reset css 2.0」)
という違いがありますが、どれか1つを選んで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" />
No.4
12/04 17:58

edit

Bootstrap
検索エンジン
css