ホームページ作成 岐阜県関市

最近お客様のデザインのご要望として「シンプルにしてほしい」ということをよく聞きます。

数年前の傾向はとにかくフラッシュで動きをつけて、というものが大半でしたが移り変わりは早いですね。

やはりその要因にはGoogleやyoutubeなど人気サイトが軒並み無駄を省いたシンプルなデザインになっている、というのが挙げられるでしょう。

そこでそんなシンプルなデザインを集めたサイト集をご紹介します。

Minimal Sites

ツイッターをホームページやブログで表示させるにはログイン後のホーム右下の「素材」というわかりにくい場所にあるリンクをたどっていくとできます。

がいろいろめんどうなので以下のタグのアカウント部分を自分のアカウント名に変えて、ホームページやブログに貼り付けてもらえれば、表示されます。

上記の「ここに自分のアカウント」というところに、ご自身のアカウントをいれてください。

お好みで色や幅などの細かい設定をしてください。

色の設定は「#fff」の代わりに「white」とか「red」とかでも大丈夫です。

上記のままだとシンプルな表示になります。

※Javascriptが使用できないホームページ、ブログでは表示されません。

XHTMLでホームページを作る際に必要不可欠なのがこの【div】というタグですが、いまいちなんなのか良くわからないという方に、ご説明させていただきます。

実際僕もXHTMLでコーディングを始めた際は、いまいちこのタグの意味をよく理解できていませんでした。

<div></div>で挟んでもなにが変るわけでもないので。

まぁ簡単に言えば【箱】です。

ちらばってるおもちゃを一度に移動するには箱に入れるのがてっとり早いですよね。

そんな感じでdivという箱に入れると、箱に入れたものを一度に左に移動させたり、背景を赤にできたり、文字の色を変えたりできるのです。

こう書くと【table】タグを同じような働き、といえるかもしれません。

ちなみにdivとはdivisionの略だそうです。

CMS（自分で更新できるシステム）の利点は、いうまでもなくHTMLの知識がなくてもホームページを更新、ページの追加できることですが、その他にも利点があります。

■ファイルの管理が簡単にできます。
ページ数が増えれば増えるほど、その管理が大変ですが、更新システムならページの表示・非表示から削除やリンク先の変更など、簡単にできます。

■デザインをまるごと変更できます。
更新システムのデータ（文言や画像など）は、データベースというところに保存されます。
データとデザインが別のところで管理されているので、今のデザインを変えたいな、と思ったらいつでもデザインを変えることが可能です。
もちろんすでに保存されているデータはそのまま利用できるので、一度更新システムでホームページを作ってしまえば、その後データの入力し直しなどはしなくてすみます。

■表示をランダムに変えることができる。
任意の部分の表示をランダムに変えることができます。
例えばサイドメニューのバナーやピックアップ商品などを毎回勝手に切り替わるようにできます。そうすることで閲覧者により多くのページを閲覧させることができます。

まだまだ色々とありますが、とにかくCMSは「便利」です。

これからのホームページはどんどんこのような形になっていくでしょう。

CSSを使って画像を透過させると、スワップイメージの時などにわざわざ透過した状態の画像などを用意しなくて済むので便利です。

それぞれ
filterがIE用
-moz-opacityがFirefox用
opacityがSafari,Opera用
となります。
「50」,「0.5」の値を変えれば透過の度合いを変えられます。

スワップイメージ以外にも利用できそうですね。

どんどん新しい機種が発売される携帯業界ですが、それに伴い携帯サイトの需要も高まるばかりです。

しかし携帯サイトはメーカーと機種で表示のされ方がまちまちで全ての機種で同じ表示をさせることはほとんど無理だといっていいくらいです。

Docomo、Au、Softbankのそれぞれの特徴を踏まえて表示を同じようにすることは可能ですが、それが新旧モデルとなるともう確認する術すらありません。

しかしそれを可能にするエミュレーターを発見しました！

P1エミュレータ

◆◆以下抜粋です◆◆

「P1エミュレータ」はdocomo/SoftBank/auの3大携帯キャリアに対応した、携帯サイト検証用の高機能テスター(シミュレーター)です。
「P1エミュレータ」はドコモ(iモード)、ソフトバンク(Yahoo!ケータイ)、au(EZweb)各携帯キャリアの表示差異のみならず、各メーカーから発売されている個々の携帯電話に合わせたサイトチェックを可能にしました。
また、強力なカスタマイズ機能により、オリジナルの仮想携帯端末を設定して必要なチェックだけを行うことも可能なシミュレーターです。

◆◆ここまで◆◆

３キャリアの表示を確認するために全機種購入してしまった僕ですが、もっとはやくこのサイトに出会っていればよかったと思います・・・。

補足として３キャリアそれぞれのエミュレーターをご紹介しておきます。

◆Docomo
　iモードHTMLシミュレータII

◆AU
　OpenwaveR SDK 3.3.1J

◆Softbank
　ウェブコンテンツヴューア

今更という感じですが、お客様から質問があったので、一応書いておきたいと思います。

スタイルシートというのはホームページのデザインを決める指示書みたいなもので、背景色や画像の位置や文字の大きさなどを決める重要なものです。

今では当たり前ですが数年前まではスタイルシートではなく直接HTMLにそれらを書き込んでいました。

スタイルシートの利点は、一発でデザインをがらっと変えることができるということです。

無料のブログなどでいろいろテーマを選べると思いますが、それを可能にしているのがスタイルシートです。

他の利点はSEOに有利とされています。

ホームページ内に余計なコードがないので、検索ロボットがホームページをクロールしやすいのが要因のようです。

ホームページの運営や検索上位表示などを考慮するとスタイルシート(CSS)での制作が好ましいようです。

弊社では制作するすべてのホームページをスタイルシートを使って制作いたします。

こんなことも知らないでホームページ作ってたの？といわれそうですが、最近知ったショートカットを覚え書として書いておきます。

■入力文字を簡単に全角カナにする方法
日本語を入力した後に[F7]キーを押す。

■入力文字を簡単に半角カナにする方法
日本語を入力した後に[F8]キーを押す。
携帯サイトを作るときに便利です。

■入力文字を無変換にするショートカット
日本語を入力後に[F6]キーを押す。

［F6］キーは続けて押すと、先頭の文字から1文字ずつカタカナに変換され、［F7］［F8］キーは、最後の文字から1文字ずつひらがなに変換されます。

もちろん[無変換]キーを押せば早い話ですが、僕の環境はMacにWindowsを入れて、そこで制作しているのでキーボードの挙動が多少Windowsのそれとは違うんです。

===============================

■決まったウィンドウだけプリントスクリーンするには。
[Alt]キーを押しながら[PrintScreen]キーを押す。
→これまで全画面プリントスクリーンしてわざわPhotoshopで切り取ったりしてました・・・

自分的には結構嬉しい発見でした。

スワップイメージとは画像にマウスを当てると、画像が切り替わる良く見かけるあれです。

やり方としてはCSS（スタイルシート）を使ったやり方と、Javascript（ジャバスクリプト）を使ったやり方とあります。
下記のサンプルをそのままコピーして試せます。

■スワップイメージ Javascript

■スワップイメージ CSS

ポイントとしてはtext-indexnt:-9999px、display:blockとwidthとheightを忘れずに書くことです。
.swap aのほうに「overflow:hidden」とありますが、これによりFirefoxでクリックしたときに横に長くリンクの点線が出るのを防ぎます。

両方とも見た目的には同じですが、CSSの場合リンクのテキストにキーワードを挿入できるのでSEO的に良いかもしれません。

Firefoxでコーディングしてて思い通りにさくさく進んでいるときに、ちらっとIE6でチェックしたらずれている…

なんてことはよくあることです。
これまで僕はハックを使って対処してきたのですが、「条件付コメント」を使うという手があるそうで、いろいろ調べてみました。

条件付きコメントとは、HTMLのコメント用タグのなかに条件を入れて、ブラウザごとにCSSを振りわけたりできる優れものです。
主にIE用の振り分けが可能なのですが、

こうするとIE6だけに、内容が反映されるそうです。
注意としてIEと6の間に半角を入れないと反映されませんでした。

他にもいろいろバリエーションがあるようで覚え書きとして以下に羅列しておきます。

■IE全部に適用

■IE5以上を対象にする場合

※IE6とすればIE6以上に適用されます

■IE6以下を対象にする場合

■指定したバージョンを除く場合

■全てのIEを対象外にする場合

※コメントの書き方が変わりますので注意が必要です。
<!-- → <!
--> → >

この条件コメントを使ってスタイルシートを切り替える例（IE6には別のスタイルシートを読ませる）

まず普通に全てのブラウザにスタイルシートを適用させます。

そのしたにIE6ようのスタイルシートを条件付コメントで記入します。

こうすることでスタイルシートの振り分けが可能になります。
このやりかただとW3Cのバリデーターにも引っかからないので、ハックを使うよりは良いと思います。