Released the New theme "newspaper_en" of responsive Web design.

  • 2012年April 2日(Mon) 04:44 JST

To the basic theme "WAIproCSS Ver2.5.1 for Geeklog1.8.1" Create a new theme for Responsive Web design to use Media Queries of CSS3. PC is 2 column、iPad& iPod touch is center block 1 column& left& right block 2 column Layout.


The images were captured of the theme "newspaper_en" PC・iPad・iPod touch.

続きを読む (1,236 ワード)

  • この記事をfacebookでシェアする
  • この記事をtwitterでRTする
  • 記事を友人にメールする
  • 印刷用ページ

レスポンシブWebデザインの新テーマ「newspaper」をリリースしました。

  • 2012年March 5日(Mon) 14:30 JST

新テーマ「newspaper」は、「WAIproCSS Ver2.5.1 for Geeklog1.8.1」をベースにCSS3のMedia Queriesを使用したレスポンシブWebデザインのテーマです。PCは2カラム、iPad&iPod touchは中央ブロック1カラム&左右ブロック2カラムレイアウトになります。


テーマ「newspaper」 PC・iPad・iPod touchのキャプチャ画像です。

続きを読む (529 ワード)

  • この記事をfacebookでシェアする
  • この記事をtwitterでRTする
  • 記事を友人にメールする
  • 印刷用ページ

テーマ「sincere」をリリースしました。

  • 2012年January20日(Fri) 22:32 JST

新テーマ「sincere」は、「WAIproCSS Ver2.5.1 for Geeklog1.8.1」をベースに2カラムのエラスティックレイアウトを採用してます。

そして、このテーマはCSS3を使用し「プログレッシブ エンハンスメント」を取り入れてます。
(プログレッシブ エンハンスメントの説明は、@kaz_wuiさんのサイト「Website Usability Info」のプログレッシブエンハンスメント(Progressive Enhancement)という考えかたで詳しく説明されています。)
ですので、CSS3に対応していないブラウザでは単調なデザイン(ヘッダ等の背景のグラデーションが単色になる等)になりますが、情報は正しく得られるよう作成しております。


テーマ「sincere」 Internet Explorer7のキャプチャ画像です。

また、サイトロゴのフォントは、Google Font APIを使って表示してます。
(Google Font APIについては、@yhassyさんのサイト「could」のGoogle Font API で手軽に始めるフォント遊びで詳しく説明されてます。)

テーマ「sincere」も「WAIproCSS」と同様、アクセシビリティに配慮して作成しています。

このサイトはGeeklog1.7.1ですが、テーマ「sincere」のデザインを見ていただく為に1.7.1仕様のテーマsincereをこのサイトに入れております。 テーマのお試しで「sincere」を選んでいただくとテーマをご覧頂く事ができるので、参考にしてください。

続きを読む (286 ワード)

  • この記事をfacebookでシェアする
  • この記事をtwitterでRTする
  • 記事を友人にメールする
  • 印刷用ページ

アクセシビリティ配慮型テーマ WAIproCSS 2.5.1 for 1.8.1 を発表しました。

  • 2011年December29日(Thu) 14:22 JST

アクセシビリティ配慮型テーマ WAIproCSS2.5.1を出しました。

2011年12月1日にリリースされたGeeklog 1.8.1-jp-extended-1.0日本語パッケージ拡張版に入っているWAIproCSSと同じものになります。

続きを読む (46 ワード)

  • この記事をfacebookでシェアする
  • この記事をtwitterでRTする
  • 記事を友人にメールする
  • 印刷用ページ

フォーカス時のアウトラインの役割をご存知ですか?

  • 2011年December 6日(Tue) 14:00 JST

アウトラインの役割

リンクなどにフォーカスした時、アウトライン(外郭線)が表示されるのですが、このアウトラインにはどんな役割があるかご存知ですか?

アウトラインの役割を知らずに「何?この点線!じゃま」とCSSでoutline: none;と設定しアウトラインを消されているかたがいらっしゃると思うのですが、アウトラインが表示されないとキーボードのみで操作しているかたが自分が今どの位置にいるのかわからなくなってしまうんです。

リンクフォーカス時アウトラインが表示されないサイト

リンクフォーカス時にアウトラインが表示されないサイトがありましたので(ボタンフォーカス時にはアウトラインが表示されます)、アウトラインが表示されない状態で目的のページに辿り着けるか、また辿り着くのにどれだけ時間がかかり大変か体験してみましょう。私達はこのサイトの商品を購入したいとします。無事、目的の商品詳細ページまで辿り着く事ができるでしょうか?
サイトは、プレミアムバンダイ|こどもから大人まで楽しめるバンダイ公式ショッピングサイトです。このページ内にある商品名「ふわふわでかチョッパー 新世界だぞコノヤロー!」の詳細ページ(予約ボタンのあるページ)を表示するのが目的になります。チョッパーは、アニメワンピースに出てくるキャラクターです。では、みなさんも私と同じようにキーボード操作のみで目的のページまで辿り着けるか試してみましょう。(FirefoxTabキーで移動していきます)

続きを読む (80 ワード)

  • この記事をfacebookでシェアする
  • この記事をtwitterでRTする
  • 記事を友人にメールする
  • 印刷用ページ

iPadは手が不自由なかたにもやさしいのか?

  • 2011年October11日(Tue) 12:00 JST

手足が不自由なため車椅子で生活されているAさんにiPad2を実際に使ってもらい、使えない事等ないかを教えてもらいました。

また、手がまったく使えないかたがiPad2を使うにはどうすればいいかを考え検証してみました。

続きを読む (45 ワード)

  • この記事をfacebookでシェアする
  • この記事をtwitterでRTする
  • 記事を友人にメールする
  • 印刷用ページ