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

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

gulpでSFTPでファイルをサーバにアップロードする

gitが使用できないサーバの時はgulpからSFTPでファイルをアップロードできるようにするととても便利です。

● gulpでSFTPファイルアップロードする gulp-sftp

gulp-sftpのインストール

npm install --save-dev gulp-sftp

gulp-sftpのGulp設定(gulpfile.js に記述)

//
// SFTP 設定
//
var sftp   = require('gulp-sftp');
var fs    = require('fs');
var load_json = function(filename) {
  return JSON.parse(fs.readFileSync(filename, 'utf8'));
};
gulp.task('sftp', function () {
  	var my_json = load_json(__dirname + '/gulp_ftp.json');
    return gulp.src(my_json.file_options)
           .pipe(sftp( my_json.ftp_options ));
});

sftpの設定ファイル( gulp_ftp.json )

{
    "file_options" : [
        "www/**", 
        "!www/test/**", 
        "!www/**/___*"
    ] ,
    "ftp_options" : {
      "host"      : "xxx.yyy.com",
      "port"      : 22,
      "user"      : "hogehoge",
      "pass"      : "fugafuga",
      "remotePath": "/var/www/mysite/htdocs/"
    }
}

アップロードするファイルのルールは

``` ローカルの( ./www/test/)フォルダ以下はアップロードしない```  
``` ローカルの先頭アンダーバー3つで始まるファイル( 例:___myfile.html )はアップロードしない```  
です。

remotePath は 必ずスラッシュ(/)で始まる絶対パスで表記すること。
絶対パスでないとディレクトリ作成時に下記エラー

```
SFTP error or directory exists:
```

が出ます。
No.1046
07/19 15:28

edit

gulp

gulpのWEBサーバでPHPを使用する

gulpのWEBサーバでPHPを動作させるには gulp-connect-php を使用します。
https://www.npmjs.com/package/gulp-connect-php
browser-sync と連携するには以下のようにします。

● gulp-connect-php , browser-sync のインストール

npm install --save-dev gulp
npm install --save-dev gulp-connect-php
npm install --save-dev browser-sync
var gulp = require('gulp'),
    connect = require('gulp-connect-php'),
    browserSync = require('browser-sync');
 
gulp.task('connect-sync', function() {
  connect.server({}, function (){
    browserSync({
      proxy: '127.0.0.1:8000'
    });
  });
 
  gulp.watch('**/*.php').on('change', function () {
    browserSync.reload();
  });
});
No.1045
07/11 14:56

edit

gulp

gulpでJavaScript, CSS, 画像 を圧縮 + 便利な機能を使用する

このページのGulpプラグインを一気にインストールするには

npm install --save-dev gulp
npm install --save-dev gulp-uglify
npm install --save-dev gulp-cssmin
npm install --save-dev gulp-rename
npm install --save-dev imagemin
gulp-uglify : JavaScriptを圧縮する
gulp-cssmin : CSSを圧縮する
gulp-rename : ファイル名をリネームする

● JavaScriptをコメントを残して圧縮(minify)する uglify

uglifyのインストール

npm install --save-dev gulp-uglify

uglifyのGulp設定(gulpfile.js に記述)

//
// JavaScript minify設定(uglify)
//
var uglify = require("gulp-uglify");
var rename  = require( 'gulp-rename' );
gulp.task('jsmin', function() {
    gulp.src('./js/*.js')
        .pipe(uglify({preserveComments: 'some'}))
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('./js_min'));
});

コメントを残す方法( ! を以下のようにつける)

/*! 
  残したいコメント
*/

● CSSを圧縮(minify)する cssmin

cssminのインストール

npm install --save-dev gulp-cssmin

cssminのGulp設定(gulpfile.js に記述)

//
// CSS minify設定
//
var cssmin = require( 'gulp-cssmin' );
var rename = require( 'gulp-rename' );
gulp.task('cssmin', function () {
    gulp.src('./css/*.css')
    .pipe( cssmin() )
    // .pipe( rename({suffix: '.min'}) )
    .pipe( gulp.dest('./css_min') );
});

● CSSスタイルガイドジェネレーター frontnote

CSSスタイルガイドジェネレーターはCSSファイルからのドキュメントを生成するとても便利なものです。 frontnote以外にも kss-node, sc5-stylgeduige, などがありますが frontnoteは簡単で使いやすいのでおすすめです。

frontnoteのインストール

npm install frontnote --save-dev
npm install --save-dev gulp-frontnote

frontnoteのGulp設定(gulpfile.js に記述)

//
// CSSスタイルガイド frontnote 設定( .scss ファイルからスタイルガイドを生成します)
//
var frontNote = require('gulp-frontnote');
gulp.task('frontnote', function () {
gulp.src('./scss/*.scss')
    .pipe(frontNote({
	    out: './frontnote',
    }));
});

● 画像( jpg , png )を圧縮する imagemin

imageminのインストール

npm install --save-dev gup-imagemin

imageminのGulp設定(gulpfile.js に記述)

// // jpeg , png 圧縮設定 // var imagemin = require('gulp-imagemin'); gulp.task('imagemin', function(){

gulp.src(['www/img/*.{png,jpg}', 'www/img/*/*.{png,jpg}'])
	.pipe(imagemin())
    .pipe(gulp.dest('www/img/'));

});

No.1043
07/19 10:53

edit

gulp

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>
  <style>
  .my_table01{
    overflow: hidden;
    box-sizing: border-box;
    width: 600px;
    border: 1px solid #333;
    border-top: 0;
    background: #ccc;
  }
  .my_table01 dt, .my_table01 dd{
    box-sizing: border-box;
    padding: 5px;
  }
  .my_table01 dt{
    float: left;
    width: 100px;
    border-top: 1px solid #333;
    background: #ccc;
  }
  .my_table01 dd{
    width: 500px;
    margin-left: 100px;
    border-top: 1px solid #333;
    border-left: 1px solid #333;
    background: #fff;
  }
  </style>

実際の見え方

項目1
テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列
項目2
テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列
ただし、項目名のほうが長い場合は崩れます。

No.1037
05/31 15:43

edit

HTML生成に JavaScriptテンプレート「ejs」を使いSublime Textから自動でコンパイルするようにする

静的サイト作成時に「ヘッダ」「フッタ」「グローバルナビゲーション」等は共通部品として別ファイルで管理しておきたい事がよくあります。
そこでテンプレートエンジン ejs を使用します。(拡張子「.ejs」)
流れとしては
『ejsテンプレートを編集して保存』→『gulpが自動でコンパイル(全てのhtmlファイルを自動生成)』→『ブラウザでhtmlファイルを確認』 となるので、作業の手間としてはhtmlファイルを編集しているのとほとんど変わりません。

なお、node.js , gulp のインストールは割愛します。(あらかじめインストールしておいてください)

●1. ejs のインストール

HTML制作ディレクトリのトップからターミナルで

npm install --save-dev gulp-ejs@2.3.0
注意 : gulp-ejs はバージョン2系とバージョン3系で引数の渡し方が変わっています。
今回はバージョン2系を使用しています
なおバージョン確認コマンドは「npm info gulp-ejs」

●2. ejsをSublimeTextでコンパイル出来るようにビルドの設定をする。

gulp自身にファイルを監視させることもできますが、SublimeTextのビルドを使う方法を紹介します。
【ツール】→【ビルドシステム】→【ビルドシステム追加】で新規ファイルが開くので下記の項目を入力してファイル名 gulp.sublime-build で保存します。
保存するパスは /Users/【ユーザー名】/Library/Application Support/Sublime Text 3/Packages/User/gulp.sublime-build です。
( Mac OSX での例 )

{
    "cmd": ["gulp ejs"],
    "shell": true,
    "working_dir": "$project_path" ,
		"osx": {
		    "path": "/usr/local/bin:{HOME}/.rbenv/shims:$HOME/.nodebrew/current/bin:$PATH"
		},
}

↑ SublimeTextにパスを渡しています

$HOME/.nodebrew/current/bin:

●3. ejsファイルを保存時に自動でコンパイルするように設定する

ファイル更新時に自動でコンパイルできるようにSublimeTextで設定します 【基本設定】→【Package Settings】→【SublimeOnSaveBuild】→【Settings - User】を選択してセッティングファイルを開く。
以下のコードをペーストして保存

{
    "filename_filter": "\\.(scss|sass|ejs|js|css|html)$",
    "build_on_save": 1
}

拡張子「scss」「sass」「ejs」「js」「css」「html」保存時に自動でビルドするよう設定します。(不要な拡張子は取り除くこと。)

●4. gulpの設定ファイル gulpfile.js の作成

HTML制作ディレクトリのトップにファイル gulpfile.js を下記の内容で作成します。

//
// ejs 設定
//
var gulp = require('gulp');
var ejs  = require("gulp-ejs");
gulp.task('ejs', function(){
  gulp.src(['./ejs/*.ejs', './ejs/*/*.ejs', '!./ejs/_*.ejs'])
    .pipe(ejs({}, {ext: '.html'}))
    .pipe(gulp.dest('./'));
});

●5. SublimeTextでのビルド

・ejsファイルのコンパイル

ejsファイルは 拡張子 .ejs としてディレクトリ ejs において、SublimeTextで開いて command + b でコンパイルします。
一度コンパイルすると後は保存のたびに自動でコンパイルされます。

●6. EJSテンプレートで別ファイルをインクルード

共通部分を切り分けて呼び出します。
その時にパスも渡しています。

・呼び出す元のファイル(例)

<%- include('../_html_head.ejs', {r_path:'..'}) %>

・呼び出される側のファイル(例)

<link rel="stylesheet" href="<%= r_path %>/js/script.js">
<link rel="stylesheet" href="<%= r_path %>/css/style.css">

でインクルード時にパラメーターを渡すことができます。

●6. EJSテンプレートファイル名を取得する

<%= filename %>

と記述するとフルパスでファイル名が帰ります

/Users/hogehoge/Desktop/test/ejs/index.ejs

ただし、インクルードされるファイルに記述してもインクルード元ファイルのパスが返ります。

下記のように使うと便利です

<% var flag = filename.split('/')[filename.split('/').length - 1].replace('.ejs','') %>
<%= flag %>

引用 : http://bit.ly/1Oz6EJX

ejsの使い方 : https://github.com/tj/ejs
EJS便利な構文 : http://bit.ly/1XiajOj
Gulp + EJS + JSONを使用してhtmlを量産 : http://bit.ly/1WZFQ8c

No.1032
04/26 10:32

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

Mac OSXへの SCSS, Compass簡単導入方法

●1. Xcodeをインストールする

●2. Command line Toolsをインストールする

(要apple developerアカウント) https://developer.apple.com/downloads/?name=for Xcode
から対応するOSXバージョンの「Command line Tools (OSX10.XX)for Xcode X.X」 をダウンロードしインストール

●3. SASS, Compass をインストールする

ターミナルから

sudo gem install sass
sudo gem update --system
sudo gem install compass

でインストールする。

インストールの確認は

sass -v
compass -v

●4. Sublime Text をインストールする

Sublime Textはシェアウェアですが、シェアウェア登録する前でも機能制限なく試すことができます(たまに保存時にダイアログが出るくらいです。) https://www.sublimetext.com

●5. Sublime Textの Package Controll をインストールする

https://packagecontrol.io/installation
に表示されるコードを
Sublime Textの【View】→【Show console】に入れて return を押すとインストール開始。
インストール完了後【Sublime Text】→【Preferences】→【Package Contol】がメニューにあればインストール成功

●5. Sublime Textのパッケージをインストールする

Command + Shift + p + install  「return」

で表示される画面から以下の4つのパッケージをインストールします。(インストール後は画面が元に戻るので再度 Command + Shift + p + install)

Sass
SASS Build
Scss
Compass
SublimeOnSaveBuild

インストール成功かどうかの確認は

Command + Shift + p + list  「return」

で表示される画面に全てのパッケージがあるかどうかで確認します。

●6. パスの追加

以下のファイルをSublime Text で開く

/Users/【ユーザー名】/Library/Application Support/Sublime Text 3/Packages/Compass/Compass.sublime-build

開いたファイルはjsonファイルなので、一番最後の行の後ろにカンマ「,」をつけて以下の行を追加

	"osx" : {"path": "/usr/local/bin:/Users/【ユーザー名】/.rbenv/shims:$PATH" }
No.1029
05/07 13:39

edit

css

オンラインで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>

● 結果の「ブラウザのキャッシュを活用する」に対応する

.htaccess に以下のように記述します。

<Files ~ ".(gif|jpe?g|png|ico|js|css|swf|woff)$">
Header set Cache-Control "max-age=604800"
</Files>

max-age の値は次のように(秒)で指定します。

7日 : 604800
30日 : 2592000
1年 : 31536000
No.1027
05/05 15:43

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
05/26 14:53

edit

添付ファイル

css

スマホサイト制作時に設定しておくと良いhtml, css 項目

スマホサイト制作時に設定しておくと良いhtml, css項目

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">
No.1001
05/19 17:15

edit

携帯スマホサイト
css

スマホサイトをフルスクリーンにしてWEBアプリぽく見せる

HTMLページに以下の2行を追加してページをiPhoneで開き、【ホーム画面に追加】でホームにアイコンを作成すると フルスクリーン表示で起動することができます。

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

設定できる値は以下のとおり

apple-mobile-web-app-capable : フルスクリーンにするかどうか?
【yes】フルスクリーンにする
【no】フルスクリーンにしない

apple-mobile-web-app-status-bar-style : (画面一番上のステータスバーの表示方法)
【default】標準
【black】反転(黒バック)
【black-translucent】(透明)

ただしページ内リンク以外のリンクがあるとSafariが別で立ち上がるので、jQuery-uiなどを使ってリンクを組み立てるか 次の「jquery_mobile_js_link.js」を使ってリンクを押すとjavascriptで画面遷移するように変更する必要があります。

リンクを全てJavaScriptのリンクに変更する(jquery_mobile_js_link.js)

使い方

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

jquery_mobile_js_link.js

// Initialization
jQuery.mobile_js_link = {
	init: function() {
		for (module in jQuery.mobile_js_link) {
			if (jQuery.mobile_js_link[module].init)
				jQuery.mobile_js_link[module].init();
		}
	}
};
jQuery(document).ready(jQuery.mobile_js_link.init);
jQuery.mobile_js_link.rewrite = {
	init: function() {
	    var ua = navigator.userAgent;
	    if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){}
			else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){}
			else{
	        return;
	    }
		var all_tags = $('a');
		all_tags.each(function(){
			var url = $(this).attr('href');
			$(this).attr('href','#');
			$(this).click(function(){
				location.href = url;
			});
		});
	}
};
No.998
01/20 15:12

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

Bootstrapのメディアクエリ

Bootstrapを使用しているサイトでメディアクエリを追加する場合の記述は以下のようになります。

Bootstrapはモバイルファースト志向なので、まずモバイルのCSSを設定して、次のメディアクエリでウィンドウ幅が広いタブレットやPCの時のCSSを上書きしていくというように設定します。

@media (min-width: 768px) {
	#test {
	}
}
@media (min-width: 992px) {
	#test {
	}
}
@media (min-width: 1200px) {
	#test {
	}
}

逆にスマホのみに指定したい場合は以下のように記述します。

/* PC(幅1199px)以下に適用するスタイル */
@media (max-width: 1199px) {
	#test {
	}
}

/* タブレット以下に適用するスタイル */
@media (max-width: 991px) {
	#test {
	}
}

/* スマホのみ適用するスタイル */
@media (max-width: 767px) {
	#test {
	}
}
No.990
01/19 23:06

edit

Bootstrap

CSS3の実用的なアニメーション

CSS3が未対応なブラウザIE9のシェア低下にともなって

JavaScriptで行っていた簡単なアニメーション処理をCSS3で行うのが実用的になってきました。
そこで、CSS3の実用的なアニメーションを紹介します。

Simple Icon Hover Effects(マウスオーバー時にアイコンの縁にエフェクトを掛ける)

http://goo.gl/xApnVD

CSSのみで実装するキャプションエフェクト 20 | NxWorld(画像マウスオーバー時にキャプション(説明文)をアニメーションで出現させ表示する)

http://goo.gl/ld5EIC

Original Hover Effects with CSS3

http://goo.gl/SkHEG4

Inspiration for Button Styles and Effects | Codrops(ナビゲーションやSubmitボタンのマウスオーバー時のアニメーション)

http://goo.gl/sQaZE7

Creative Link Effects(文字だけのナビゲーションボタンのマウスオーバー時のアニメーション)

http://goo.gl/RpklMj

Dribbble - Download by xjw

http://bit.ly/1IatBAl

3D Thumbnail Hover Effects

http://goo.gl/2YEH9d

Grid Item Animation Layout | Codrops(画面遷移時のエフェクト。デモページ自体もレスポンシブになっています。)

http://goo.gl/jVngPB

No.986
12/17 16:43

edit

css
アニメーション

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

本番サーバへのFTPアップロードをやめてBitbucketと自動連携する。

WEBサイトの更新を行うとき 【本番サーバからダウンロード】→【html,css,js,等ファイルの修正】→【本番サーバへ更新したファイルを選択してアップロード】 の手順でされている方は多いと思います。

これをやめて 【html,css,js,等ファイルの修正】→【Bitbucketへ更新】→【自動で本番サーバへ反映】

にしてみましょう。

Bitbucketとは

Bitbucketとは【gitコマンドが扱える】フリーのホスティングサービスです。
Githubと違い、【無料で非公開のデータ】を保存することができます。

https://bitbucket.org

(bitbucket.orgへの登録方法、gitの扱い方は割愛します。)

Bitbucketへの更新時に自動でWEBサーバへ同期する【bitbucket-sync】を使う

1. 以下のアドレスからダウンロード

https://github.com/alixandru/bitbucket-sync/

2. 設定ファイルの作成

ユーザー名(例:xxxxx@xxxxx.com)、パスワード(mypass)をセット
```
	'apiUser' => 'xxxxx@xxxxx.com',
	'apiPassword' => 'mypass' ,
```
requireAuthenticationを「true」に変更
```
'requireAuthentication' => true,
'deployAuthKey' => '',
'gatewayAuthKey' => 'hogehoge',
```
本番サーバへ反映する リポジトリ(例:myrepo)と サーバのパス(例:/home/www/test/)をセット
```
$DEPLOY = array(
    'myrepo' => '/home/www/test/',
);

```

####3. フォルダのアップロードとテスト
・フォルダ「bitbucket-sync」ごとWEBサーバにアップロード。   
・次に更新したいディレクトリのパーミッションを「777」に変更  
・リポジトリ(例:myrepo)のデータを取得できるかどうかテストプログラムを実行
http://xxxxx@xxxxx.com/bitbucket-sync/deploy.php?setup=myrepo  
うまくいくと
```
BitBucket Sync - Full Deploy
============================
 * xxxxxx (いろいろメッセージが出ます)
Finished deploying myrepo.
```
と表示されます。


####4. bitbucket WEBサイトでの設定
https://bitbucket.org へログインして
自分のリポジトリ(例:myrepo)の 【Settings】>【Webhooks】 から【Add webhook】を押す
```
http://xxxx.xxxx.com/bitbucket_sync/gateway.php?key=hogehoge
```

これでリポジトリのコミット、push 時に自動的にWEBサーバーにも変更が反映されます。

No.963
07/21 17:36

edit

横幅指定せずに(サイズが可変な)DIVをセンタリングするCSS

一般的には<DIV>をセンタリングするには `margin: 0 auto; width:500px;` というふうに


##■ ページネーションなどサイズが可変なDIVをセンタリングするには
```
<div class="pagination_block">
	<div class="pagination">
		<a href="#">1</a>
		<strong>2</strong>
		<a href="#">3</a>
		<a href="#">4</a>
		<a href="#">5</a>
	</div>
</div>
```
```
. pagination_block {
	text-align: center;
	font-size:0;
}
. pagination {
	display: inline-block;
}
```
とやればOKです。
親要素のスタイル ``` font-size:0; ``` で余計な隙間を作らないようにしています。


## ■ インラインブロック(display: inline-block;) 要素とは?
「ブロック要素」は上から下に並びますが「インラインブロック要素」は横に並びます。
画像ファイル<img>タグをイメージするとわかりやすいでしょう。  
以下の様な特徴があります。

- margin , padding を上下左右に指定できる。
- width , height を指定することができる。
- vertical-align を指定することができる。
- 親ブロックのtext-align が有効。

です。

No.962
12/21 14:40

edit

css

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の遅延読み込みは対応していない模様。)

ちなみにこのページの結果は

<a href="/data/filedir/923_1.png" target="_blank"><img src="/data/filedir/923_1.png"></a>

となりました。

JavaScriptを最適化する必要があるということがわかりますね。


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

添付ファイル1
No.923
02/29 15:05

edit

添付ファイル

高速化

WEBサイトやillustratorにCSS(WEBフォント)アイコンFont Awesomeを使う

■ Font Awesome

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

■ 使い方

  1. 「Font Awesome」のページから【Download】ボタンを押してダウンロード
  2. 解答してできたディレクトリの中から【css】【fonts】をサーバにコピー
  3. HTMLに以下を追加
    <link rel="stylesheet" href="./css/font-awesome.min.css">
    
  4. フォントの表示は以下のようにします。
    <i class="fa fa-cc-visa"></i>
    

■ アイコン一覧(アイコンをクリックすると貼り付け HTMLソースが見れます)

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

■ アニメーションさせることもできます(Font Awesome Animation)

http://l-lin.github.io/font-awesome-animation/

■ Illustratorなどで使用する場合は

フォントファイル
「font-awesome-4.4.0 > fonts > FontAwesome.otf」
をインストール後
http://fortawesome.github.io/Font-Awesome/cheatsheet/
から好きなフォントをコピーしてから書体を「Font-Awesome」に変更する。
(書体変更前は文字化けしますがそれでOKです。書体変更後にアイコンが表示されます。)

例■

メールアイコン を使用する場合は

  1. http://fortawesome.github.io/Font-Awesome/cheatsheet/ 画面から
    fa-envelope-o [&#xf003;] を探す
  2. ↑メールアイコン自体をコピー
  3. Illustratorの文字ツールでペースト
  4. 文字ツールでフォントを「Font-Awesome」に変更する。

よく使うアイコン : http://goo.gl/jTvmYC
参考 : http://goo.gl/Lhmm6P

No.917
02/12 17:33

edit

Bootstrap
illustrator

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
03/25 00:50

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ビデオを自動演奏(autoplay)埋め込むコードは

<video width="640"  height="360" src="http://www.youtube.com/demo/google_main.mp4"  controls autobuffer autoplay> 
</video> 

iPhone, iPadでautoplayを行うには…。

残念ながらiOSの仕様上必ず画面を一度はクリックしないと再生はできなくなっています。

No.736
07/17 18:15

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認証)をつけるには、まず

【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!

No.681
07/14 14:07

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
携帯

Firebug を IE , Safari , Opera で使用する 【Firebug Lite】

■ Firebug Lite
http://getfirebug.com/lite.html

使用方法:
Firebug Lite as bookmarklet のブックマークレットをツールバーにドロップするだけ。



No.660
01/31 17:01

edit

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

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

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

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

Satisfy Any

これでOKです。

No.654
07/14 14:07

edit

.htaccess

ブラウザのキャッシュを無効にする

htmlだけでブラウザキャッシュを無効にする方法。

htmlの<head>内に以下のコードを追加(IEで有効)

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-store">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="-1">


htmlのどこかに以下のコードを追加(Safari, Firfoxで有効)

<iframe style="height:0px;width:0px;visibility:hidden" src="about:blank">
    this frame prevents back forward cache
</iframe>

引用:http://blog.knockoutmarch.com/2008/02/06/2323.html

No.652
01/06 14:19

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


サーチエンジン(検索エンジン)登録ページ

日本語のサーチエンジン(検索エンジン)

■ google

http://www.google.co.jp/addurl/?continue=/addurl

■ goo(→google)

■ infoseek

http://www.infoseek.co.jp/Help?pg=help_addurl.html&lk=noframes&sf=1&svx=199700

■ msn.co.jp

http://search.msn.co.jp/docs/submit.aspx

海外のサーチエンジン

■ yahoo.com

http://search.yahoo.com/info/submit.html

■ msn.com

http://search.msn.com/docs/submit.aspx

■ altavista.com(→yahoo.com)

■ gigablast.com

http://sitesearch.gigablast.com/addurl

No.302
08/23 19:41

edit


GoogleSitemap用xmlをオンラインで作成する

http://www.xml-sitemaps.com/

最大500ページまで、指定したサイトのサイトマップを作成する。
No.291
07/18 15:01

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

アイコン

No.218
04/28 11:29

edit


メールアドレスをほんの少しスパムが来なくする

■ コレを使ってほんの少し解読しにくくする
http://gadd9.com/soft/entity.html

■ そのほかの方法はこちらを参考
http://www.ringolab.com/note/daiya/archives/003053.html
No.166
03/13 15:48

edit


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

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

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

edit

Firefox

CSSレイアウト時のよくやる失敗と対処法

windows ie 全盛の時のtipsですが残しておきます。

■ floatでレイアウトしたときのボックスの間に隙間が出来る
→隙間が出来るボックス要素全てに float 要素を追加

■ <div>内に配置した<img>が<div>よりサイズが小さいと隙間が出来る
→ 下記を追加
 img { display: block; }

■ Win IEだけずれる時があり、ずれる大きさがフォントサイズによって変わる
→ずれる<div>等に vertical-align を設定する(top 又は bottom)

■ <td>内のフォントが正しく指定したとおりでない(Win IE  Mac IE)
→<td>の中に<span>をいれて対応する

■ MacIEで<div>を floatさせると表示が崩れる。
→ フロートさせるdiv の width height 属性を指定する 

■ <ul><li>で画像リンクを作成したときに WinIEでフォントサイズを変更すると
隙間が出来てしまう
→ overflow:hidden;
font-size:1px; を追加
line-height プロパティ値をチェック

■ background-imageで指定した画像が表示されない
外部CSSに記述している場合、そのCSSファイルからの相対パスで表記する必要があるので、パスの記述に間違いがないか調べる

■ Windows版 IE 6 で 高さ 1px の div が作成できない。(10pxくらいのdivになってしまう)
→height:1px; overflow:hidden;
と記述する。

■ Windows版 IE 6 で float 時の margin が 2倍に解釈されてしまう。
→display: inline; を加える
(CSS2 の仕様では「float を指定した要素は display の指定を無視する」のでほかのブラウザでもOK)
float: left; display: inline; を1セットと覚えておくと楽。

■ Windows版 IE 7 でcssのみでブロック要素をセンタリングできない。
→ センタリングしたい要素に margin:0 auto;
→ 親要素に 	text-align: center;
(厳密にはIEのレンダリングモードによるのでまずそれをチェックすること)
No.157
05/08 16:50

edit

css

OS,ブラウザを判別するCSSハック(CSSだけでブラウザ判別を行う)

全てのIEのみに適用する

.className {
    /* for all IE only */
    color : blue\9;
}

バックスラッシュ(¥にアラズ)と9をセミコロンの前に付けます。

No.149
02/08 00:04

edit

Windows版 IE で CSSの設定だけで透過(アルファチャンネルつき)PNGを表示させる

こちらに↓
http://www.daltonlp.com/daltonlp.cgi?item_type=1&item_id=217

(注意:画像のパスはドキュメントルートからの絶対パス表記の方が無難)
うまく表示されないときはパスを疑うこと

No.148
09/27 15:49

edit

透過png

No.117
01/27 19:20

edit


No.115
05/06 14:27

edit

IE6のバグ

floatと一緒にmarginはつけるな!

これまたIE6では有名なバグであるが、floatを書けた方向にmarginを与えると、なぜかmargin*2の値が余白として指定されてしまう。例えば下記のような場合である。

div#box{
    float:left;
    margin-left:50px;
    }
No.36
09/20 10:53

edit


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やBootstrapで採用されています。オススメ)

https://necolas.github.io/normalize.css/

● sanitize.css

http://10up.github.io/sanitize.css/

● eric meyer reset css 2.0

http://meyerweb.com/eric/tools/css/reset/

No.4
03/23 21:00

edit

Bootstrap
検索エンジン
css