So-net無料ブログ作成
Webデザイン、HTML、CSS ブログトップ
前の10件 | -

中古のドメインについて考察①

仕事柄、ドメイン取得はしょっちゅう行います。

うちのお客様は個人商店的な小さな法人なども多いので、

「さーばー?」

「どめいん??」

「いやぁ…お任せしたいです…」

というお客様が多いわけで。

「ホームページを作りたい」

という純粋な希望を述べているだけなのに、
「ドメインはどうしますか?サーバは?」なんて
畳みかけるように訊ねられたら、そりゃオドオドしてしちゃいますよね。

その点、大きな企業の時には、情シスさんなんかとお話ができますから、
すごく話が早いです。
これはこれで、あちらのレベルが高すぎて困ってしまうこともあるわけですが。

「オールドドメインから選びたい」

とかね。

ほら来たよ。オールドドメインですってよ。

さすが情シス恐るべし。

オールドドメイン。。。
日本だとバリュードメインとかお名前ドットコムなんかが有名ですが、
期限切れ前のドメインをバックオーダー(期限切れ時までに更新されなかったら取得したい)とか、
中古のドメインの販売、オークションなんかもやっていますね。

そうそう、ヤフオクにもドメインが出品されていることがありますが、
2億円のドメインが出ていたりします。

http://goo.gl/9qdL5b

におくえん。

買わないでしょ普通…

1文字.com とかの、ものすごく希少性の高い物ならまだしもね…

かつてGMOが「z.com」を8億で買ったなんてニュースにもなりましたがね。


ドメインの価値はまず、ドメインの下の部分「.com」とか「.net」とか、
最近はいろいろなものが増えていますが、
その部分も重要です。

世界的に人気があるのは、ダントツで「.com」、ついで「.net」。

ほかのものはずいぶん価値が落ちるはずです。

日本だと「.jp」は人気がありますが、当然海外で「.jp」を欲しがる人はいません。

ドメイン投資のつもりであれば、どんなに文字列が良くても「.com」「.net」以外は買わない方が無難でしょう。
※日本での売買に限定するなら「.jp」もありかもですが。

世界を舞台にドメイン投資をするなら、SEDOなど、ドメイン市場とでも言いますか、ドメイン売買される場所に行ってみるのがいいと思います。

ワタクシも使っていないいくつかのドメインをSEDOで売りに出しています。
売れても売れなくてもいいや…ぐらいの気持ちで高値を付けているので、なかなか売れませんがw

SEDOに行くと、世界は広いなと実感しますね。

日本の市場を相手に商売しているのがバカらしくなることもあります。
単純に人口だけを考えても、世界の市場で勝負できるものは
世界で勝負した方がよっぽど可能性があったりするわけです。

とはいってもワタクシはドメインブローカーではないので、
あくまで仕事の一環としてドメインを買ったり売ったりするだけです。。。

ダラダラ書いてきましたが、
まぁこれは「いずれ売る」という人のための予備知識ですので、
欲しいドメインをあくまで「使う」という人にはあまり意味のない話です。

欲しいドメインが取れない場合にはどうするか?

・そのドメインが空くまで待つ
・そのドメインの持ち主に売買を交渉する

などの方法があります。

貴重な「プレミアムドメイン」などと呼ばれるものは、
お名前ドットコムなどでも販売されています。

におくえんまでは行きませんが、数万円~数百万円のものまで、良いドメインが売られています。
こちらのプレミアムドメインは、ページランクよりも、文字列で高値がついているように思いますね。




ちなみに↑で検索条件を「3文字以下」「.com」で絞り込むと、最高額は

7,680,000円
listfree.com
でした。

高っ


ページランク云々はまた次回。
SEO目的での高ページランクドメイン購入でしょうが、
SEOは毎度書いているように、正しくSEOすればちゃんと上位表示されますから、
ドメインはいろいろな情報に惑わされず、
欲しい文字列のものを買うのがいいと思いますね。




ガラケー(携帯)での見え方を確認するエミュレータ

この記事はその後「その(2)」を書きましたので、そちらもあわせてご覧ください その(2)では、FireFoxにプラグインを入れてのエミュレーターを解説しています。

---

唐突ですが、仕事に頑張るみなさま、心の不調にはお気を付けください。

挑戦することの「限界」は超えるためにある!と思いますが、
しんどいことの「限界」は超えないためにある、と思います。

もちろん、苦しんだ果ての達成感などもありますけど、
どうにも心の調子まで不安定になってきたと感じたら、
それ以上は無理をしないことです。

…そんなことを思うこの頃。


先日もWordPressをスマホとガラケーに最適化することについて書きましたが、今日はガラケーのエミュレータの話題です。






エミュレータというのは、(この場合は)ガラケーでの表示結果をPC上で再現できるものです。

いよいよスマートフォン化が加速し、Web制作に於いても「携帯サイト」は切り捨てる企業が増えてきました。
そうすると、私たち零細Web制作者としては、ガラケーの実機をテスト用に維持しておく必要があるのか、また、いつまで需要があるのか?と考えてしまうわけで。

とは言え、「携帯サイトも必要」という需要がごくわずかでもあるのであれば、それは、きちんと作る体制は整えておかなくてはなりません。

そこで、携帯での見え方を確認するエミュレータをご紹介。

emu_goo.jpg
goo サイトビューワ
アドレスを入れてクリックするだけで表示できます。

docomo、au、softbankと画面を切り替えることができます。
あくまで汎用的な表示ですので、携帯のスペック(画面サイズなど)によって表示が違う場合もありますが、レイアウトを確認したりするには十分でしょう。



また、docomoとSoftbankは、それぞれ3G(FOMA)ガラケー用のエミュレータを提供しています。

■NTT DoCoMo
iモードHTMLシミュレータII
Windows[レジスタードトレードマーク] XP/Windows[レジスタードトレードマーク] Vista
日本語版、英語版

■Softbank Mobile
MOBILE CREATION「ウェブコンテンツヴューア」
Microsoft[レジスタードトレードマーク] Windows[レジスタードトレードマーク] 2000 Professional(SP4)
Microsoft[レジスタードトレードマーク] Windows[レジスタードトレードマーク] XP(SP2)
※Internet Explorer 6.0(SP2)がインストールされていることが必要となります。←古いソフトなのです…

KDDI auについては、かつてはエミュレータを提供していましたが、現在はないようです。
docomoもSoftbankも、ツールとして提供してはいるものの、バージョンアップはしていないようです。

いつまでもIE6対策をしてきたように、
いつまでもガラケー対策をするには、それなりに大変な道のりになりそうです。

firefoxを使ったエミュレートの方法はこちらの記事にまとめました。





そろそろ真面目にHTML5

だいぶご無沙汰になってしまいました。

事業拡張なんてことをしたら、案の定やることが増えましたね(当たり前ですが。。。)

そんな中、教室で生徒さんに最近よく話しているのがHTML5のこと。


そろそろ、

正式勧告ですかね。

で、勧告候補だった<hgroup>が候補から削除された、

なんていうショッキングなニュースもありました。

「見出しをグループ化する」というのは、HTMLの構造化という観点においては、
非常にわかりやすかったので、このまま勧告に至ると思っていたんですけどね。。。

そんなわけで、HTML5のテキストも書き直しです。


そろそろ真面目にHTML5に取り組まないといけないですね。




タグ:HTML5 廃止 hgroup

レスポンシブウェブデザインを作ってみる(簡単編)

だいぶ久しぶりの更新になりました。

今年は大雪で大変ですね。被害がありました地域の皆様にお見舞い申し上げます。
東京(都下)住まいの私も久しぶりに見る大雪。。。
家の玄関前は、未だにかまくらができるほどに雪が積みあがっております。

さて今日はレスポンシブウェブについてです。

レスポンシブウェブとは?
という部分はすっ飛ばして、基礎的な実装方法を書きたいと思います。

私が教えている生徒さんの卒業制作の1つとして、レスポンシブウェブを課題に出してみました。

考え方に苦労するかと思いきや、それが思いのほかすんなりと実装できたので、
練習としてはよかったかなと思っています。


まずは考え方。

◆HTMLは一つ。
◆CSS3のメディアクエリ(Media Queries)を使って、デバイス別(あるいは解像度別)に読み込むスタイルを切り替える

以上です。

メディアクエリというのは、従来のmediaの拡張です。
media="screen" ・・・表示するのがscreenの時は、の意味
meia="print"   ・・・印刷の時は、の意味

こんな記述を書いた&見たことがあるんじゃないかと思います。

その拡張型として、CSS3ではメディアクエリというのが登場しました。

メディアクエリを使うと、
「screenかつ769px以上の時はこのCSS」(一般的にPCの数値)
「screenかつ最大768pxまでの時はこのCSS」(一般的にiPadなどタブレットの数値)
「screenかつ最大640pxまでの時はこのCSS」(一般的にスマホの数値)
というCSSの切り分けができます。

サイズはあくまで代表的なものを書きました。
例えばシンプルなデザインのサイトであれば、641px以上(タブレット&PC)は同じデザインにしてCSSは2つ書くだけ、というようにアレンジしてもいいかと思います。


では解説が長くなりましたので、実際の書き方を。

まずはHTMLのmetaに以下を記入。

<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />

デバイスの画面サイズに合わせてCSSを切り替えるために、viewportを記述しておきます。
ここにもいろんな設定が入るのですが、それはまた次回に……

続いて、CSSへのリンクを書きます。
今回は、pc.css、tablet.css、smart.cssの3つのcssを読み込むこととします。

<link rel="stylesheet" media="all" type="text/css" href="pc.css" />
<!-- PC用 -->
<link rel="stylesheet" media="all" type="text/css" href="tablet.css" />
<!-- タブレット用 -->
<link rel="stylesheet" media="all" type="text/css" href="smart.css" />
<!-- スマホ用 -->


続いて、(説明略)IE8以下にHTML5(XHTMLでコーディングしている場合は不要)とCSS3を認識させます。

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

HTML headの記述は以上です。


そして、pc.css、tablet.css、smart.css、3つのCSSを用意します。
/*===============================================
◆pc.css 画面幅 769px以上
===============================================*/
@media screen and (min-width: 769px){
img{
max-width: 100%;
height: auto;
width /***/:auto; 
}
#container{
width:100%;
}
---ここにPC用のスタイルを書く---
} /*@media screenの開始かっこに対する閉じかっこ。忘れないようにする*/




/*===============================================
◆tablet.css 画面幅 768pxまで
===============================================*/
@media screen and (max-width: 768px){
img{
max-width: 100%;
height: auto;
width /***/:auto; 
}
#container{
width:100%;
}
---ここにTABLET用のスタイルを書く---
} /*@media screenの開始かっこに対する閉じかっこ。忘れないようにする*/




/*===============================================
◆smart.css  画面幅 640pxまで
===============================================*/
@media screen and (max-width:640px){
img{
max-width: 100%;
height: auto;
width /***/:auto; 
}
#container{
width:100%;
}
---ここにスマホ用のスタイルを書く---
} /*@media screenの開始かっこに対する閉じかっこ。忘れないようにする*/




こんな感じです。
imgに対する「max-width: 100%;」は、小さい画面で見たときにも「最大で100%の幅で表示せよ」という指示です。
スマホで見たときにも画像サイズが最適化されますので、これは記述必須になりますね。


以上、まずはざっくりとレスポンシブウェブデザインの実装方法でした。

まずはアイキャッチ画像(メインビジュアル)、h1、pぐらいで構成された簡単なHTMLを作成し、GoogleCromeなどで画面サイズを小さくしたりしてみてください。

初めて実装するときは、思わず「おぉっ」と感動します。たぶん。


自作ではなくレスポンシブなテンプレートを探している、というWeb担様にも、今は安くていいものがそろってます。

レスポンシブデザイン対応、SNS連動型WordPressテンプレート【黒船】

■ビジネス(企業)サイト向け
WordPressテーマ「Corporate (TCD011)」

■大型EC・ポータルサイト向け
WordPressテーマ「Dynamic (TCD009)」

■ブログなのにかっこよすぎるやつ
WordPressテーマ「InfoCustom (TCD006)


これらはいずれも有料のテンプレートになりますが、有料だけあって出来はいいです。

自作でコツコツもいいですが、時間をお金で買う必要がある場合には、導入を検討するのもいいと思います。




ガラケー(携帯)での見え方を確認するエミュレータ(2)FireMobileSimulator




以前「ガラケー(携帯)での見え方を確認するエミュレータ」という記事を書きましたが、自分の作業をする上で最近使うものが変わったので、そちらも掲載したいと思います。

まずは以前の記事より抜粋。
先日もWordPressをスマホとガラケーに最適化することについて書きましたが、今日はガラケーのエミュレータの話題です。

エミュレータというのは、(この場合は)ガラケーでの表示結果をPC上で再現できるものです。

いよいよスマートフォン化が加速し、Web制作に於いても「携帯サイト」は切り捨てる企業が増えてきました。
そうすると、私たち零細Web制作者としては、ガラケーの実機をテスト用に維持しておく必要があるのか、また、いつまで需要があるのか?と考えてしまうわけで。

とは言え、「携帯サイトも必要」という需要がごくわずかでもあるのであれば、それは、きちんと作る体制は整えておかなくてはなりません。

そこで、携帯での見え方を確認するエミュレータをご紹介。

goo サイトビューワ
アドレスを入れてクリックするだけで表示できます。

docomo、au、softbankと画面を切り替えることができます。
あくまで汎用的な表示ですので、携帯のスペック(画面サイズなど)によって表示が違う場合もありますが、レイアウトを確認したりするには十分でしょう。



ざっとチェックするには↑のgoo サイトビューワはとても便利です。
ですが、しっかりチェックするにはちょっと心許ないですね。

最近使っているのはFireFoxのアドオンで提供されている「FireMobileSimulator」です。

必要なものは、
■firefox
http://www.mozilla.jp/firefox/

■FireMobileSimulator
https://addons.mozilla.org/ja/firefox/addon/firemobilesimulator/

以上です。
(ちなみに「FireMobileSimulator」をGoogle Chromeでダウンロードしに行ったら怒られました。。。)

まずはこちらからアドオンを「Firefoxに追加」します。
firefox01.jpg
FireMobileSimulator

このアドオンについて
FireMobileSimulatorは、主要3キャリア(DoCoMo/Au/SoftBank)の携帯端末ブラウザをシミュレートして、モバイルサイト開発を容易にするために作成されたFirefoxのアドオンです。携帯端末のHTTPリクエスト、絵文字表示、位置情報送信機能などの動作をシミュレートすることができます。
モバイルサイトをPCで閲覧するために、従来からある方法として、キャリア公式シミュレータの使用、Proxyの使用、Firefoxのuseragentswitcher+modify headersの組み合わせ等、色々と手段はありましたが、これらの方法はそれぞれに不足している機能があったり、またITに詳しくない人にとっては導入が面倒かつ困難という面があります。
FireMobileSimulatorは、「誰でも簡単に導入できる」かつ「高機能である」ことを目的に作成された新しい携帯シミュレーターです。

とのことです。

インストールしようとすると、「作者を信頼しているアドオン以外はインストールしないでください」というメッセージが出ますが、「今すぐインストール」します。
firefox02.jpg

firefoxの再起動が求められ、再起動するとアドオンが有効になります。

firefox03.jpg
使い方は簡単で、「ツール」に「FireMobileSimulator」の項目が追加されていますので、そこで端末を選択し、チェックしたいページに移動(もちろんローカルファイルでも大丈夫)してチェックを行います。




検索エンジン(robot)に特定のディレクトリだけインデックスさせない方法

雨の神奈川県からお送りします。

寒いですね~…

先日、さがみ湖プレジャーフォレスト(旧ピクニックランド)のイルミネーションに行ってきました。
いや~素晴らしかったです。
夜限定のアトラクション(イルミネーション畑の中をカートに乗って走れたり)もあり、リフトに乗って上まで登れば夜の観覧車にも乗れます。

先シーズンは御殿場の「御殿場高原時之栖(ときのすみか)」にも行きました。
中でも圧巻なのが「ヴェルサイユの光」という光と噴水のショー!
これもとても素晴らしいショーでした。

ただ…いかんせん、冬のお出かけは寒い!!

イルミネーションと言えば夜で気温もぐんぐん下がる頃、

さらに噴水のショーって……これはないでしょう。。。と正直思いました(^^;
冷感はアップするし、突っ立って見てるので足元は凍るほど冷たくなるし。

ショーとしてはホントに美しいんですけどね。

お出かけの際には、靴の中にカイロ、服装も「寒い地方に行くんだ」ぐらいの気合いを持ってお出かけください。

ちなみに、御殿場のあと富士吉田に寄りました。その時の富士吉田の気温は-13度(2012年1月)。
星空は果てしなくきれいでしたが、寒い寒い寒い~…


ということで、寒い話が長くなりました。。。

検索エンジンに特定のディレクトリだけインデックスさせない方法。です。
「検索させない」と言うとちょっと語彙が違いますが、検索されても検索エンジンに表示されない方法、といった感じですかね。

今回のシチュエーションとしては、お客さんが自社にて運用(更新)しているWebサイトで、更新前のチェック用として「test」フォルダを設けているが、放っておいたらそのフォルダもインデックスされてしまった!
というもの。

Basic認証という方法もありますが、そもそも公開しているスペース(www/直下)とtestフォルダの内容は基本的に同じなので、見られても構わないし、面倒なことはしたくないということで…
testフォルダだけインデックスさせない方法を用いました。

基本的な知識ではありますが、制作会社が管理をしていないと、意外と抜け落ちている部分かなと思います。



インデックスというのは、簡単に言うと、「検索エンジンにページ登録されること」です。

検索エンジン登録の仕組みは、
検索エンジンのrobotが世界中のWebページを巡回(クロール)してページ情報を集め、検索エンジンに登録しています。

で、その時にrobotに対して、HTMLソース内の記述や「robots.txt」というファイルをサーバに置くことで、
・インデックスへの登録拒否
・クロールの拒否
などを宣言することができます。

HTMLのmetaタグでインデックス登録を拒否する方法
以下のmetaタグが記述されたページは、検索エンジンにインデックスされません。
<meta name="robots" content="noindex">


永続的にインデックスされなくて良いページには、この記述をしておけば良いでしょう。

ですが、仮データ(更新用のHTMLなど)にこの記述をしておいて、データのチェックが終わって公開!となったときに消し忘れると、そのページは「公開ページでインデックスして欲しいページなのにインデックスされない」という悲劇を招きます。
その点だけ注意が必要です。

robots.txtでクロールやインデックス拒否する方法
「robots.txt」というファイルを作成し、サーバのルートディレクトリ(www/など)に置きます。

サイトすべてについて、検索エンジンの巡回を拒否する場合
User-agent: *
Disallow: /


※User-agent: * は、すべてのクローラーの意味

特定のディレクトリ(今回の場合は「test」ディレクトリ)の巡回を拒否する場合は、Disallowの部分にディレクトリ名を記述します。
User-agent: *
Disallow: /test/


↑今回の場合はこれで解決!

robots.txtには、そのほかにも「Allow(クロールさせる)」「Disallow(巡回拒否)」を組み合わせたり、様々な方法があります。

Disallow: /test/
Allow: /test/index.html


↑「test」ディレクトリのインデックスは拒否するが、「test」ディレクトリの「index.html」だけはインデックスしてほしい場合。

さらに「*」や「$」を使って、「文字列の一致するディレクトリ(ファイル)を一括拒否」など、高度な運用方法もあります。

ここでは一部をご紹介しましたが、通常は私が遭遇した今回のシチュエーション程度の運用が多いのではないかと思います。


寒いので風邪やウィルスには気をつけましょう。





タグ:HTML XHTML

黄金比

Webデザインをするとき、ページの高さやサイドバーの幅の設定に困ったら、黄金比を使うようにしています。

というか、まずは黄金比で考え、ダメなら白銀比、どうしてもダメなら、どこかに黄金比を取り入れて…

というようにレイアウトをしていきます。

レイアウトで悩む事はよくありますが、黄金比を使うとあっさり解決して収まりが良くなる事もあります。

ちょっと古い記事ですが、こちら、Re:Creator's Kansaiのブログより、
Webデザインに黄金比を取り入れよう

そして、それを受けてツールまで作ってくださってしまった、こちら、ZAPAブロ~グ2.0より
Webデザイン黄金比計算ツール

このツール、私は以前より大変重宝して使わせていただいております。


現在、「汎用的なテンプレートになり得るページをHTML5で作る」、という制作をしてます。
取り組むに当たって、現在のスタンダードってなんだ?と思い、いろいろなサイトのデザインを見て回りました。


で、ふと思ったのがこちら、TwitterのWeb版公式サイト。

twitter01.jpg

計ってみると、「ほぼ黄金比」でした。

やっぱりと言うか、やられた感と言いますか。。。

黄金比を使ってるサイトって、おそらくかなり多いですね。

レイアウトとして見ると、(日本人的には)サイドバーがやや幅広で、
『サイドバーにインデックスだけでなくサムネイルなども表示したいサイト向け』
みたいな括りになるかと思います。

広告が入ってもうるさくなりすぎず、シンプルで美しいレイアウトではあります。

よく見るサイトこそ、こういう無意識の美しさを入れなきゃならんな、と思った次第です。








Adobe製品、クラウドとアップグレード、どっちが得か?

秋になったかと思いきや、今日はずいぶん晴れて暑いです。

週末は局地的豪雨にことごとく遭遇し、濡れる→乾く→濡れる→乾くを繰り返しました。。。


Web制作に限らず、Adobe製品を定期的にアップグレードして使っている方は多いと思います。

私も制作のほとんどをAdobe製品でまかなっており、PC買い換えの時などはまずAdobe製品を入れないことには仕事になりません。
私が使う頻度としては、

1位 Illustrator : Illustratorで描けるものであればなんでもIllustratorでまず描きます。

2位 DreamWeaver : WordPressの時には使わないので、だいぶ利用頻度は落ちたかも。

3位 FireWorks : 手軽にスクリーンショットを切り抜きたいときや、トリミング、解像度、カンバスサイズ変更程度の作業の時に使います(ホントはもっと多機能です)

4位 Acrobat : PDFを作る作業は意外と多いです。

5位 PhotoShop : Illustrator、FireWorksでもダメなときに使います。デザイナーにしてはPhotoShopを使わない方かも知れません…

こんな感じです。以前はFlashもかなり使いましたが(↑で3位に入るぐらい)、今はほとんど使わなくなってしまいました。

そんなAdobe製品ですが、現在は従来の「アップグレード版(製品を購入)」と、「Cloud」という月額費用を払って常に最新バージョンを使える版があります。

また、アップグレードの制度が変更になり、「アップグレード適用は直前1バージョンまで」という厳しいものに…
※今ならCS5/5.5→CS6ですが、2012年12月31日まで期間限定でCS3/4→CS6へのアップグレードが可能です。

私が製品版として持っているのはCS4、ということは、年末までには製品版にするかクラウドにするか決断をしなければならないということになります。

どっちが得かわからないというのが正直なところなのですが、単純に料金の比較だけするのであれば、マイナビのシミュレーターが大変参考になります。
http://news.mynavi.jp/ad/2012/creative/adobe/

ちなみに私のシミュレーション結果はこちら。
手持ちのバージョンはCS4 WebPremium、アップグレードもWebPremiumを選択しています。
adobecs01.jpg

今は発売記念版(月額費用が安い)があるため、今後2年間を考えるならクラウドがお得ですが、
2年に一度製品版をアップグレードするつもりがあれば、クラウドも製品版も、ほぼ同じ、ということのようです。








タグ:Adobe CS

CSS3 ベンダープレフィックスをいつまで使うか

starwalk.jpg少し遅い夏休みで避暑に行ってまいりました。
何回も訪れている場所なんですが、星のキレイなところなので、必需品と言えばこれです、これ。

iPadアプリの、
Star Walk

iPhoneでも使えますが、やっぱりここはiPadで見たいところ。

スマートフォンにしてからめっきり出番の少なくなってしまったiPadですが、このアプリはどうしてもiPadで使いたい!
…というシーンが少なからずあるのも事実。
Appleの戦略にまんまと…とも思わなくはないですが、いつの間にか自宅に増えているApple商品の多さには正直驚きますね。

そんなわけで星も堪能してきた避暑でしたが、唐突にCSS3の話題です。

【基礎知識を整理】
・CSS3はまだ正式勧告には至っていません。

・ですがブラウザは順次対応を開始しており、すでに使える新プロパティなどもあります。

・↑と、思いきや、中にはW3Cの発表ではまだ「草案(WD)」で、ブラウザベンダーが独自の拡張機能で使えるようにしている「だけ」の場合もあります。

・その場合には、ベンダープレフィックスと呼ばれる識別子を付けてプロパティを記述しておきます。
例)-webkit- とか、 -moz- とか。
付いてる場所の例)WordPressなんかでよく見かける例としては、border-radius プロパティの冒頭に識別子がついてませんか?それのことです。

そして、プロパティ(など)がW3Cの草案(WD/Working Draft)から勧告候補(CR/Candidate Recommendation)になったときには、そのベンダープレフィックス(-webkit- とか、 -moz- とか)は、外すことが推奨されている、ということになっております。

と、整理すると、いつ外すのかはなんとなくハッキリとわかりそうなものなんですが、これが作業をしていると意外とわかりづらい。。。
外しても外さなくてもいいなら、外さずに置いておきたいぐらいなんですが…
外すことを推奨されているんならしかたないですね。

そんな折り、大変便利なページを紹介してくださっている記事を見つけたのでご紹介です。
いつまで使えばいい?CSS3ベンダープレフィックスの切り時チェック!
これ、「チェック」とは言っても何か特別なページなわけではなく、ただ「ベンダープレフィックス付き」と「ベンダープレフィックスなし」のスタイルを記述しているだけなんですね。
で、ブラウザで見て実際に判断すれば良いと、そういうわけです。

私もさっそくブックマークしました。






タグ:CSS3

Bloggerのテンプレート(1)

BTmplates02.gifGoogleのブログサービス「Blogger」の話題です。

ブログサービスと言えば、私がこのブログを書いているSo-netもあるし、@niftyのココログ、FC2、seesaa、livedoor、Yahoo、楽天などなど、各社こぞって提供しているサービスです。

日本国内では、「Blogger」のシェアが上がっているかというと、どうもそんな実感は全くないのですが、それはちょっともったいない気がします。
他社の「無料サービス」の常識を覆すGoogleだけに、この「Blogger」も非常に優れたブログサービスです。

「Blogger」の良いところは、
・無料
・広告が表示されない
・独自ドメインに対応している
・いくつもブログが作れる
・固定ページも作ることができる
(「Blogger」はブログとしてだけでなく静的HTMLサイトとしても活用できます)
・カスタマイズの自由度が高い
・サードパーティ製のウィジェットが充実している
・プロっぽい(ものすごい私感…)
・やっぱりGoogleだし(だからなんだ?)
などなど。
わかりやすい特長を挙げてみましたが、ほかにも技術的に良い点があります。

そんなわけで、ビジネスユースにももう少し便利に使えないものかと(無料ですから)模索しているところです。


「Blogger」でブログを作成して、最初に選択できるテンプレート(デザイン)の数は、さほど多くはありません。

ですが、Bloggerはテンプレートをアップロードして適用させる機能がありますので、外部から持ってきても、なんなら自分で作っても良い、ということになります。

すでに完成している「Blogger」のテンプレート探しはこちらでできます。

BTmplates01.jpg
BTemplates
ほぼ海外のデザイナーが作っているものですが、完成度は素晴らしいです。
数も豊富で、全部見るのはちょっと無理なんじゃないかってぐらいの量があります。

テンプレートの適用方法は、
1. 気に入ったデザインのテンプレートをダウンロードし
2. Bloggerの管理画面を開いて
3. テンプレート→「バックアップ/復元」(画面右上のボタン)からテンプレートをアップロードします
※既存のテンプレートをバックアップしておくことをおすすめします。

もちろん、新しいテンプレートもカスタマイズできますので、自分のオリジナルに変えていくことができます。

次回は、「Blogger」のテンプレートを自前で作る方法について書きたいと思います。

【GMOとくとくBB】WiMAX月額3,770円




Webサイト・CGI ブログランキングへ

にほんブログ村 IT技術ブログへ
にほんブログ村







前の10件 | - Webデザイン、HTML、CSS ブログトップ

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。