MT4がヴァージョンアップして多きく変わった機能の一つが、テンプレート機能です。
この機能を中途半端に理解して利用すると、痛い目に会います。
MT3のテンプレートの概念からはかなり変わってますので
そのへんを掴めるように、まとめてみました。

続きを読む...

障害者や高齢者がサイト閲覧を容易にするため
今やサイト製作において
アクセシビリティを確保することは当たり前になりつつあります。
今一度、確認ということでまとめました。

続きを読む...

Movable Type(以下 MT)といえばサーバーインストール型のブログソフトウェア
というだけでなく、CMSとして不動の地位を獲得しておりますが、そのMTが 堂々たるメジャーアップグレードしました。
今後の我が社のビジネス展開にもMTは必要不可欠なので
MT4を早速インストールして使ってみました。

続きを読む...

システム開発に必要不可欠なデバッグ。
これも、デザイン部の仕事のひとつです。

「どうしたらそんな動作したの！？」

何も考えずデバッグしたら、本気で困った開発の悲鳴がフロアに響き渡ります。
更にデバッグしている側は、自分の試した不規則な入力を思い出すためにそこから後、大変な苦労をするでしょう。
業務上可能な限り、そういった二度(で終わればいい方…)手間は省きたい…
万国共通の切なる願いかと思います。

いつも何気なくやるデバッグとは言え、自然に、二度手間回避のための規則が出来てきます。
どの辺りにどんなバグが発見されうるか、大体の予想に基づいて様々な入力をしていくわけです。

以下、当たり前のチェック項目。これが、意外と出ます。

• 半角入力の箇所に全角の文字入力が有効にならないか？
• 入力必須項目のチェックがされているか？
  ※メールアドレス、電話番号等の入力規則チェックが有効かどうかもチェック
• 何も入力されなかった場合、全ての項目にアラートが出るか？
• 確認画面がある場合、確認画面と投稿結果が合致するか？
• 確認画面から戻った場合、前に入力された内容が残っているか？
• ついでに、確認画面から戻るなどの操作が滞りなく出来るか？
  ※戻るボタンが無かったり、ＵＩ的な面もチェック
• 見えるべき情報や見えてはいけない情報が、正しく表示・非表示されているか？

更にここからネッチリと…

続きを読む...

Webサイト制作にするにあたって
ユーザーが情報を得るための文字のフォントを
いかに扱うかは非常に重要な問題です。

当然PC環境によってインストールされている
文字フォントは違うため、CSSによって使用する
フォントを限定するのがセオリーですが
意外とこのあたり、自分も含めて曖昧な部分があると思うので
まとめてみました。

続きを読む...

Webサイトのコーディングの際の各ブラウザごとの表示の違いは
マークアップエンジニアにとって 最大の悩みの種であります。

そもそも、その原因は

1. ブラウザごとのデフォルトのスタイルシートの違い
2. 各ブラウザのバグ
3. 各ブラウザの仕様

続きを読む...

ということで、私の経験をもとに、Web製作を行う上で
これだけは最低覚えておきたいPhotshopのショートカット
をまとめてみました。

続きを読む...

<pre>タグで囲まれた範囲のソースは記述された
スペース・改行などを、そのまま表示することができますが、
このブログのように左右でfloatを使ったレイアウトでは
<pre>タグ内に書かれた記述が改行されずに
長くなった時、囲まれたボックスを押し広げて
レイアウトを崩すという問題があります。

これをoverflow：scroll;で
ボックスにスクロールバーを表示させて
解決する方法がありますが
ieの場合ボックス内の記述がはみ出そうとしなくても
常にスクロールバーが表示されてしまいます。

すごく、邪魔ですよね。

それを解決するCSSが以下です。

pre {
      width: auto;
      _width:100%;
      overflow: auto;
      /*_でIEハックを行っています。どうですか？下にスクロールバーが表示されましたね。これでIEでもソースがはみ出そうとした時だけ、スクールバーが表示されます。*/
}

あとはpaddingやmarginなどを調節して
各ブラウザが同じ見栄えになるようにすれば完了です。

Firefoxでご覧下さい↓

• ともクリサービス
  
  • Webシステム開発
  • サーバ構築
  • ネットワーク構築

JavascriptやFlashを使ってドロップダウンメニューを
作るのはごく一般的ですが、
上のようにCSSのみでも可能です。

以下ソースです。

■HTML
<ul>
<li id="menuTitle">ともクリサービス
   <ul id="menuList">
   <li><a href="#">Webシステム開発</a></li>
   <li><a href="#">サーバ構築</a></li>
   <li><a href="#">ネットワーク構築</a></li>
   </ul>
</li>
</ul>

■CSS
* {
	margin:0;
	padding:0;
}
li#menuTitle{
	width:150px;
	line-height:30px;
	font-weight:bold;
	border:solid 2px #666;
	text-indent:10pt;
}
ul#menuList {
	list-style:none;
	position:absolute;
	width:0px;
	height:0px;
	overflow:hidden;
	margin-top:2px;
}
li#menuTitle:hover ul#menuList {
	list-style:none;
	width:150px;
	height:auto;
}
a {
	display:block;
	line-height:30px;
	text-decoration:none;
	border-right:solid 1px #666;
	border-bottom:solid 1px #666;
	border-left:solid 1px #666;
	text-indent:10pt;
}

子側のulを通常時width,heightを0で、非表示にしておいて
マウスオーバー時に表示させるという仕組み。

だだし、IEでは6以下のヴァージョンでは
a要素以外の「:hover」疑似クラスが対応していないので
まだ実用的ではないですがIE7が普及した際に
使えるんじゃないでしょうか。

ということで、今回はJavaScriptネタではありません。
ブラウザ毎に動きが異なるアニメーションGIFに関してです。

（↓※現在はデザインが変わってしまったため、5人組の画像は表示されていません。）

先日、しゃいんブログのトップページ上部でシャカシャカ走り続ける5人組を
アニメーションGIFに変更したのですが、
InternetExplorerで見ると、どうも動きが遅いというか、もっさりしている。
Firefoxでの動きと全然違うのは、何でだろう？
以下、結論。

InternetExplorerでは、1フレームのウェイトが0.1秒より短い場合、
強制的にウェイトが0.1秒となる。
故に、各フレームでのウェイトが共通の場合、秒間最大10フレームまでしか表示できない。

なので、ブラウザが異なっても共通の演出を行いたかったら、
ウェイトは0.1秒以上で設定すべし、ということですね。なるほどなるほど。
(なお、そっちの方の業界では、よく知られた話のようで)

以上、少々風変わりなネタでした。

ウェブサイトにアクセシビリティが求められるようになって

久しいですが、Internet ExplorerのプラグインのWeb Accessibility Toolbarは

W3CによるHTML,CSSバリデート

画像をオフにしたときの画面表示

視覚障害者の見え方シミュレーションなどが

ローカル環境から簡単に診断できます。



この診断結果がすべてでないですが

このツールを使った作りこみで

それなりの成果は出るんじゃないでしょうか。



ちなみに我が社のWebサイトの診断結果です。

HTML:http://validator.w3.org/check?uri=https%3A%2F%2Fwww.tomo.ne.jp

CSS:http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.tomo.ne.jp%2F

ちょっとした作業時間短縮のために 意外と重宝しそうなサイトを紹介します。
Webデザインする上で、bodyなどに使うの背景画像は 一色べた塗りしない限り、
必ず必要なものですよね。
それを一瞬で作ってしまうサイトがこちらです。

http://www.stripegenerator.com/

目的のデザインの
・ストライプサイズ
・カラー
・シャドウ
・ストライプの向き
などの 各メータを調節して書き出すだけで終わりです。

例えばこんなかんじ。

http://www.webken.jp/

というものが出来るらしいです。
とても気になるので記念受験でもしようと思っています。
テキストも4月初売りの新鮮なお受験です。
秋頃には第1回でしょうか。

どこかでちらほら聞いた話では「Webデザインに資格は要らない」
とかなんとか…。
確かに無くても出来ますし、あったって有効期限はほんのひと時…。
検定の存在自体割とチャレンジャーじゃないかと思います。

検定が安定した暁には、
「199○年だったらWeb検定」
みたいなネタも発生したら面白いな、とか。
…でもそれ、作る方は現行の技術調べるより大変？

全貌が見えないので、ひょっとして更新制なんじゃないかと
勝手に予想しています。

勝手に予想するのが好きなふーでした。

CSSレイアウトにおいてボックスを常に中央寄せ表示をさせるには、ボックスの左右のmarginをautoにすれば可能ですが、上下中央寄せをさせるのは通常困難です。
しかし、CSSレイアウトでそれを可能にするのが以下のソースコードです。

HTML

<div id=box>左右上下に中央寄せしたいボックス</div>

CSS

body {


	background-color: #cccccc;

	margin: 0px;

	padding: 0px;

}


#box {

	position: absolute;

	width: 500px;

	height:190px;

	left: 50%;

	top: 50%;

	margin-left: -250px;

	margin-top: -95px;

	background-color: #ffffff;

}

ブラウザの50%の位置にボックスの左肩が来るように配置し、そこからボックスの幅と高さの半分だけ上に移動させるというものでした。サンプル

http://japan.cnet.com/news/ent/story/0,2000056022,20344303,00.htm

遅まきながら。
PhotoshopがWebアプリケーションとなり、無償で使えるようになる予定、だそうだ。
予定通り公開されたら、今年の8月か9月には、サービスを利用できる。

今更…！と思った人が結構いるんじゃないかと。
色々考えると、何を利点に持ってくるかが味噌になりそう。
オーサリングソフトとしての利点、持ったままWebソフトになるのだろうか…
タブレット無しのユーザにも、ちゃんと使えるんだろうか…。

目下想像できるものとしては
レイヤーも（エセ）ベジェも持っている、お絵かき掲示板（Javaアプレット）系を
進化させたような、そんなもの。
自分の乏しい想像上では、大して嬉しいとも思わない…が…

もし、もしもだけど、
Web上のディレクトリを指定し、そこにある画像全てにバッチ処理…
しかも、手元で作ったアクションなんかを読み込ませたりなんかできたりしたら…
（処理後手元に全部保存。）

…いやいや、そもそも入門編だから。ないない。
でもあったらちょっと期待以上…絶対なさそうだけど。

あくまで広告塔としてのPhotohopになるんだろうか。
だとしたらAdobeにとって新しい事でも、冷静に考えたら遅いよ！
と言わざる得ない。

が、楽しみは楽しみ。

という感じで、画像系やお絵かき系の話題を振っていこうかなと
思っています。ふーでした。