インターネット情報局

.htaccessによるホームページのリダイレクト

.htaccessを利用したホームページのリダイレクト方法です。
.htaccessを利用できるサーバーであればMETAタグやJavascriptを使用するより簡単です。

例えば自分の持っているホームページのURLが http://www.example.co.jp/ の場合、.htaccessに下記のように記述します。

Redirect permanent / http://www.test.com/

この場合、http://www.example.co.jp/ にアクセスすると http://www.test.com/ にリダイレクトされます。
http://www.example.co.jp/sample.html にアクセスすると http://www.test.com/sample.html にリダイレクトされます。

書き方は以下のようになります。

Redirect [オプション] [アクセスページ] [リダイレクト先URL]

注意する点は、[アクセスページ]にはルートからのパスを記述します。
アクセスページとリダイレクト先URLが同じドメインの場合はループしてしまいますので異なるドメインへのリダイレクトの場合に利用します。
オプションはいくつかありますが、「permanent」の意味はページが移動になったということなので、「permanent」をよく使用することになると思います。

投稿者：ブロガー｜11:45 ｜ホームページ

2012年06月11日

iphoneでのホームページの文字の大きさ

ホームページを公開したところ、パソコンのIEやFirefoxだと正常に表示されるのにiphoneだと文字の大きさがおかしい。
文字の大きさがおかしいため、表示がくずれてしまいました。

調べてみるとiphoneのSafariは文字の大きさを自動的に調整する機能があるそうです。
この調整機能のせいで文字の大きさが変わり、表示がおかしくなってしまったみたいです。

ということで、iphoneのSafari対策として文字の調整機能を無効にしました。

html{
-webkit-text-size-adjust: none;
}

cssで上記を追加するとiphoneでも正常に表示されました。
私が確認したのはiphone4sです。
他のバージョンだと違うかもしれませんが、参考になればと思います。

投稿者：ブロガー｜10:19 ｜ホームページ

2011年03月30日

チェックボックス・ラジオボタンのテキストをクリックしてチェック

テキストボックス・ラジオボタンのテキストの部分をクリックしてチェックをいれる方法です。
ラベルタグを使用するとできるようになります。

以下に例を記述します。

<form>
<input type="checkbox" value="check1" name="sample1" id="no1" /><label for="no1">テキスト1</label><br />
<input type="radio" value="check2" name="sample2" id="no2" /><label for="no2">テキスト2</label>
</form>

実際の表示です。
-----------------------------------------------

-----------------------------------------------

実際にテキストの部分をクリックしてみてみると、チェックボックスやラジオボタンにチェックがはいります。

以上のようにチェックボックス・ラジオボタンにid属性を付け加え、ラベルタグのfor属性にそのidを記述します。

投稿者：ブロガー｜08:21 ｜ホームページ

2011年02月03日

ホームページの背景

ホームページの背景色についてです。

ホームページの背景色を黒にしているサイトがあります。

企業のホームページで背景色が黒いサイトは少ないです。
なぜなら、黒は汚い、暗いというイメージがいまだにあるからです。

企業が汚い、暗いではイメージが悪くなってしまいます。

さらに、背景色が黒いサイトはアングラ系、アダルト系のサイトが多いというのものあります。
一般企業としてはイメージがよくありません。

したがって、背景色が黒いサイトは企業では使用されないことが多いようです。

しかし、最近はホームページが普及し、企業も当然のようにホームページを持っています。
黒い背景のホームページも時々見かけます。
以前ほど黒い背景を避ける傾向はないようですので、あまり気にする必要はないかもしれません。

私が作成するホームページも、やはり、無難な色は白や明るい色ばかりです。
たまには、黒くてカッコイイホームページも作成してみようかなと思っています。

投稿者：ブロガー｜00:35 ｜ホームページ

2011年01月30日

ホームページの内容を中央に表示させる

ホームページの内容を中央に表示させているサイトをよく見かける。

方法は簡単である。
例えば幅1000pxを画面中央に表示させるにはスタイルシートに

body
{
margin-left:auto;
margin-right:auto;
width:1000px;
}

と記述すればよい。

bodyの幅を1000pxとして左右のマージンをautoとすればbodyを自動的に中央に配置してくれる。
ただし、HTMLの初めに

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

のようにDOCTYPEを記述しておく必要がある。これがないとブラウザによっては左寄りになってしまう。

さらに、もうひとつ。これはIE6の場合、

<?xml version="1.0" encoding="euc-jp"?>

のような記述を冒頭にしていると、DOCTYPEを無効にしてしまうので、もしIE6だけ中央にならないという場合は、チェックしてみるとよい。

今回はbodyタグのマージンをautoにしたが、他のタグやクラスに同様の記述をすれば、ある幅に対して内容を中央に配置することができるので、色々と試してみるとよい。

以上、ホームページ作成、HTML、CSSの小技紹介でした。

投稿者：ブロガー｜19:23 ｜ホームページ