Google Maps API V3でマーカーを表示させてみましょう。基本的にはヘッダのとbodyタグ内にonloadでコールして、DOMで指定したI D属性タグ内にMAPが表示されるようにします。JavaScriptの記述が以下のようになります。 var marker = new google.maps.LatLng(…

普段はあまり意識しないことも多いかもしれませんが、アクセシブルなテーブルについて。そもそもはthタグのabbr属性の記述について考えましたが、せっかくなのですこしまとめてみる。W3Cで推奨されるアクセシビリティについてはWAI(Web Accessibility Initia…

インターネット上で地図を利用するツール「Googleマップ」ですが。独自の地図を簡単に作れる「Google Maps API」ですが、Google Maps V2 API アプリケーションのAPI Keyの発行ができなくなっていました。Google Maps V3 API アプリケーションはAPI Keyの取得…

ついこの前まで発行できたGoogleMapsのAPI Keyが発行できなくなっていた。 なぜいまさらAPI Keyがなくなっていている兼について出張らせたかというと、Google Maps JavaScript API V3はあの面倒なAPI Keyが必要なくなっている。 Google Maps JavaScript API …

スクロールを滑らかにするjsライブラリは同一ページ内に限定されましたが、別ページのアンカーテキストもある程度滑らかにスクロースさせるサイトも増えてきました。ページ内だけでなく、サイト内の別アンカーにたいしてもスクロールしながら動くので、ユー…

WEBサイトのサーバーアップロードは、FTPソフトを使用した方がいろいろな意味でよいと思いますが、一行のみの更新などではいちいちFTPソフトを起動してアップロードするよりも、Dreamweaverで更新してすぐにアップロードした方が手間がかからないかもしれま…

table内のセルにボーダーを指定した場合、隣り合う線が並ぶので1pxで指定した場合、テーブルの左右の端のみ1pxボーダーで、内部のセルが隣接する部分が2pxになり、すこし見栄えがよくないので、この部分を重ねます。 CSSのセレクタ内にborder-collapseプロパ…

ul(Unordered List=順序のないリスト) とli(List Item)などを使用する場合、マーカーリストのタイプlist-style-typeやマーカーの位置について記述する必要があります。これらの記述はブラウザごとに解釈がまちまちであったり、階層構造によってはCSSのプロパ…

iPhoneやAndroid搭載スマホでスマートフォン用のサイトもかなり増えていますが、スマホサイトの基本的な操作も共通の用語があります。 スマホサイトでも操作についての用語説明が必要になることも多いため、スライドショーのスクロールの説明ではスワイプや…

2012年1月度のあるWeb関連ブログのブラウザ別解析データを公開します。これはあくまで1例のブラウザ比率の解析データになりますが、 概ね平均的な数値ではないかと思われるためエントリーしました。 少し以前のIEのシェアは圧倒的に減少し、ほかのブラウザが…

Webブラウザで閲覧可能でありながら、端末の液晶画面サイズが小さいことから、スマートフォン用のサイトの制作もアクセス数が多いサイトではほとんど採用されるようになりました。一日に数十前後の非商用のサイトであればそれほど必要度は高くないかもしれま…

longdesc属性とは、FRAME, IFRAME, IMGタグのフレーム・画像についての詳細説明ページの場所を指定する記述である。 主な使用されかたは、title属性やalt属性に記述された説明についての補完をする説明ページを記述する。 また、画像がイメージマップと関連…

IEやFirefox、Google Cromeなどブラウザのユーザー比率もいくぶん、分散されてきているように感じます。 その分、ある意味ブラウザの競争や競合も生じているせいか、CSS3やHTML5、スマホサイトなどの影響からか、 知らないうちにブラウザのバージョンが上が…

CSS3対応ブラウザ一覧CSS3対応ブラウザ一覧はまず、対応一覧サイトで。http://www.findmebyip.com/litmus/カスケードスタイルシートのヴァージョン3、CSS3ですが、新しい言語ではないようです。従来のCSS2との互換性もあり、セレクタやプロパティのcss2拡張…

いまだにバグと利用ユーザの割合がバランスよく分散されているブラウザ、IEことIneternetExplorerですが、 IE6、IE7、IE8、IE9と統一感の無いコード解釈をするバージョンに四苦八苦するマークアップエンジニアの方も少なくないかもしれません。 当然、バージ…

HTMLマークアップエディタのDreamweaverにはテンプレートなる便利な機能ファイルを作成して、特定のブロックのみをすべてのページに対して同一ファイルで管理することができます。拡張子は、dwt(dreamweaver template)です。 しかし、ページによっては個別に…

上場企業や世間的に認知度の高い企業のWEBサイトは予算的にも余裕があるためか、わりあいしっかりした機能やマークアップの施されたサイトが多い傾向にあるようです。 これは私的なイメージかもしれませんが、自社のサイト制作においても、しっかりスケジュ…

WEBサイト制作時に、最近はブラウザウィンドウの中央にコンテンツ表示させるセンタリングがかなり標準的に なってきました。CSSで制御する場合、margin:auto;でdivタグなどのブロックレベル要素を中央に表示させるわけですが、 記述方法と×などについてまと…

今回は、DreamWeaverアセットパネルの各機能についてまとめみます。 アセットパネルには、対象サイト内で定義されたファイルやURL、ライブラリーやJavascript、色やテンプレートなどというったサイト定義に帰属する情報を格納しています。挿入やドラッグドロ…

一時期は圧倒的なブラウザシェアの偏りがあったが、最近はかなりブラウザの利用割合も変化しているようだ。 2010年10月に、Net Applicationsから発表された情報によると、 Chromeのシェアが9.98%に到達し、2011年1月中には10%を超えると予測されている。 IE8…

フリー写真素材や画像が無料で商用利用可能な国内サイトのご紹介。 ホームページ制作において、写真画像はとても大切です。 ひとつは印象的な効果が望めるのと、ほかには余白を上手に埋められるからです。 WEB制作で使用する写真素材が優れていれば、手を加…

imgタグをアンカータグで囲んだ場合、Aタグ内のイメージ画像をクリックすると、リンク参照ができるようになりますが、まれにリンクの枠線がイメージ画像を囲んでしまう場合があります。 機能やレイアウトにはまったく問題ないのですが、(ブラウザFireFoxでは…

W3Cによって非推奨となっているtarget属性。 XHTML1.1では原則的に使用しないことになっているようです。ただし2010年7月現在ではほとんどのブラウザが対応しており動作します。 特にblank属性は、ウィンドウを新規に開くことがユーザーのアクセシビリティや…

いまやホームページ制作にRSSやAtomなどのフィードはとても関係してくるケースが多くなっています。WEBサイト自体でなくても、更新情報パーツやCMSサイトでの情報表示、ブログとの連携などなんらかのかたちでXML形式のデータを読み込んでいます。 今回はわか…

デザイン性の高い、洗礼された印象のネットショップ。こだわりぬいたデザインのフルフラッシュサイトでオンラインショッピング。ECサイトのデザインは、商品をより美しくするために余分なスペースと、遊び心。 しかし、肝心の売上げがいまひとつのケースも少…

ホームページ制作のデザインは、ヘッダバナーやアイコンだけではありません。レイアウト設計やデザイン設計、ユーザビリティや配色、対照となるコンテンツの基調カラーなどが必要です。 ホームページを一般の人が作成すると、なんとなくバランスが崩れていた…

メールフォームなどで使用されるinputタグのtype=textにCSS指定で半角全角入力の指定が可能な"ime-mode"プロパティがありますが、 値の種類についてまとめてみました。 ime-modeとはテキスト入力時のIMEの入力モードを指定するInternet Explorerで独自に追加…

文字入力についての記号入力・変換について以前はサイトマップなどでよく使用されていた"よこぼう"とか"げた"とか記号の呼び出し方がよくわからなかったので、入力や変換を調べてみて一覧にまとめてみました。アスキーアートなどではよく使用されている文字(…

最近は結構JavaScriptライブラリを使用して、WEBブラウザの表現がいろいろ増えてきています。 エラーダイアログがデザインされていたり、一見フラッシュなどのリッチコンテンツのような表現のものがJavaScriptで制御されていたり。 なかでもアンカータグをク…

HTMLエディターアプリケーションであるDreamweaverにはテンプレート機能があります。 テンプレートとは、その名のとおり雛形ファイルを意味し、拡張子はdwtというファイルが作成されます。 まずはテンプレートファイルの作り方です。 テンプレートファイルの…