」有りがちなことである。2011.07.24Safari、Chrome、webkitでしか未だ対応していないようだが、CSSを使って背景にグラデーションを付けることが可能になった。線形、円形のどちらでも可能で色の割振りの細かな設定もできる。100,250,from(#ca305f),to(#f594f2),color-stop(50%,#d53ea5));}</style>といった感じだ。これは円形のグラデーションだが、heightが900pxになっているのはブラウザ画面が大きくなると、次の同じパターンが下のほうに見えてこないため。スマートフォンの縦使いではどうなるか?という意味でもとりあえず使うのであれば線形グラデーションのほうが無難か。2011.07.23首相まではいかないにしても、より我慢ができる人が一流であり、我慢できずにすぐに感情を露にするのが二流なのだろう。感情を露にするということは相手の感情を刺激するということ。それが喜びであれば害はないが、怒りであった場合は相手を怒らせることにもなる。双方が怒りの感情を持ったままでプロジェクトや事業はうまくいくはずもない。「いじめ」の中で最も陰湿なのが「無視」である。この「無視」に相当することで怒りの感情を表そうとするのは最低だろう。子供であれば仕方がないが、大人になってもこの手段を行使するのは三流だ。2011.07.22現在のところOpera限定だが、いずれ他のブラウザも対応するであろう優れもののフォームコントロール機能がdatalist。valueの項目がプルダウンで現れ選択できるというもの。これだけで小さなカレンダーが表れて日付が選択できるというもの。こんな短いタグでこれだけ出てくるのはお得である。2011.07.21人間誰しも喜怒哀楽があり常に色々な感情に左右されながら生活している。人間が他の動物と違うところは、この感情を自らコントロールできるということ。怒りや悲しみを我慢して他人には見せないようにするという技だ。この技があってこそ人間のコミュニティーは円滑に運営されているの。どれだけ我慢して耐え続けることができるかが、より多くの信頼を得るための目安ともなる。よって地位の高い人間ほどこの技の完成度が高い。国会であれだけ野党からえげつない質問をされても動じないわけだ。あのくらいの言いようをされれば普通の人であれば滅入ってしまうはずである。首相としての資質や能力は置いといても、なかなか普通の人ではできないことだ。2011.07.20フォームコントロールに新たな属性が追加された。今まではCGI側で設定しないといけなかったメールアドレスの正しい形式がチェックできるようになったのだ。従来のtype="text"の代わりにtel、email、url、searchなどを使う。name="tel">といったように使い、例えばメールアドレスの場合には@やドットが無いとエラーになりurlではhttp://が無いなどがとエラーになる。telはスマートフォンで数字入力用のキーボードが自動的に表示され、searchではMacOSのときに角が丸くなった一目で検索用と分かる入力窓の形状となる。2011.07.19HTML5は基本的にSEOを前提にしたはずの新たなタグがいくつか追加されている。ソース内の記述をその目的ごとに分けてソースだけを見てもその内容が分かるように推奨している。世界中のウェブページの数が膨大になり、その整理と分類を効率的にするためである。間違ってはいけないのは、あくまでもコンテンツが有意義であった場合に整理整頓の対象となるということで、つまらないありきたりのコンテンツをいくらHTML5に正確に則ったところで検索結果の上位に来るというものではないということ。整理しやすくするのと、上位に表示されるというのは別物である。2011.07.18出納帳や名簿に貼られているタグシール。このタグシールをボタンにしてデザインしているウェブページをよく見かけるが、今まではこれをCSSで作ろうとしても角丸で表現できなかったために画像データを使わざるを得なかった。CSS3からはborder-radiusプロパティが加わり、画像データを使わずにこの表現が可能になった。#08c092;padding:5px;color:#ffffff;}.tab:hover{background-color:#fbec6b;}</style>といった具合だ。hoverを使うことでJavaScriptを使わずにロールオーバーのリンクボタンにもなる。href="xxx.html">CONTACT</a></div>とする。2011.07.17あるクライアントの会社から社長が怒りの電話。「我が社の名前が検索しても出てこないじゃないか!いちいちアドレスを打ち込まないといけないいんじゃ誰も見てくれないしホームページを作った意味がない!」といった具合だ。Japanにあなたの会社はカネはらってるのか?リアルな店舗に例えればこちらは店を作っただけ。客が来ないのはあなたが何も広報活動をしないからである。Japanで出るようになっただろう!」って、◯◯社のホームページは1998年に公開したわけで、今とはホームページの数が3桁違うのだが。」と言ったところで社長は納得しない。会社が可愛いのは分かるが、世の中の変化を少しは理解して欲しいものだ。2011.07.16tableの背景色を使って画面全体に色をつけたりする代わりにCSS3からboxという値が加わった。これを使うことで画面の一部、または全体をカラム状に分割して背景色を変えることができる。type="text/css">#wrapper{width:100%;dispaly:box;display:-moz-box;display:-webkit-box;}#leftColumn{height:500px;background:#badb9d;box-ordinal-group:1;-moz-box-ordinal-group:1;-webkit-box-ordinal-group:1;box-flex:1;-moz-box-flex:1;-webkit-box-flex:1;}#centerColumn{width:500px;height:500px;background:#9ddbb2;box-ordinal-group:2;-moz-box-ordinal-group:2;-webkit-box-ordinal-group:2;}#rightColumn{width:200px;height:500px;background:#9ddadb;box-ordinal-group:3;-moz-box-ordinal-group:3;-webkit-box-ordinal-group:3;}</style>とすることで背景が縦に3色の帯で分割されることになる。box-flexはブラウザ画面の幅を変えたときに可変する部分だ。2011.07.152003年ごろに流行ったSEO対策という言葉。2005年ごろからその効果の信憑性を疑う意見も出始めたが、多くの人がSEO対策を最重要課題と位置付けサイトを制作、または制作依頼をしてきた。それが今でも続いている。多少の聞きかじった知識があるクライアントがデザインはできないが自称セミプロというようなクライアントの依頼事項の中には今でも必ずSEOという言葉が含まれる。ここ1年ぐらいで明らかに「SEO対策は意味がないのでは?」という話が出るようになった。実際にSEOを売りにしている制作業者に依頼したところが一時期は上位に表示されるものの、すぐに順位が落ちてしまい、あとは毎月ウェブ管理料とやらをとられる割に効果がどんどんと薄くなっていく。そんな経験をしたクライアントから出る話である。2011.07.14画像データを背景に指定することで、上からテキストを重ねることもできるし、閲覧する側から簡単にコピーができなくなる。この背景画像がHTML5からは4枚まで指定できるようになった。right;}</style>といった具合だ。画像データなのだから元から2〜4枚を合体させた画像を使えばいいじゃないか?と思うかもしれないが、ブラウザ画面のサイズにかかわらず4コーナーのそれぞれ角にくっついるということろがデザインの可能性を高めているようだ。ブラウザの画面サイズを小さくしていくと、先に記述したものから順に前面に表示されるようである。2011.07.13ウェブサイトが一定のアクセスを確保しながら安定させることが難しくなっている。国内でのインターネットユーザー数が微減に対してサイトの数は増え続けているのだから当然である。その中でアクセスや売上げを一定レベルに保つのは並大抵のことではない。同じカテゴリーでの新たな商品やサービスが登場し、成功して市場を凌駕するものもあれば一瞬で消えていくものもある。いずれにしても常に前進していないといけない。2011.07.12今まではPhotoshopのフォルターで行っていたテキストのドロップシャドーがCSS3で可能になった。これもデザイナにとっては有り難いこと。class="shadow1">この文字にドロップシャドー</p>となる。#8e6c6cのところがX軸オフセット、Y軸オフセット、ぼかしの範囲、色、という順になる。Photoshopのレイヤー効果のドロップシャドーの設定をそのまま移植した感じだ。角度という概念はなく、Y軸とX軸だけの設定だ。Photoshopの場合は1つの画像ファイル内で複数のドロップシャドーやベベルとエンボス、シャドーなど、全ての光の方向を統一するために角度という設定が必要になったわけだで、これはデザインの基本。従ってCSS3でドロップシャドーを設定する場合でもY軸とX軸の比率は同じサイト内で統一することが望ましい。2011.07.11auのis06の場合、使えるメーラは4種類。Eメール、Cメール、PCメール、Gmailだ。Cメールは置いておいて、残る3種類のうちどれを使うかは悩みどころ。Eメールはスパムが多く、フィルタを強化するとPCからの転送メールが受けられなくなるので実際にはかなり使いづらい。Gmailは基本設定がGmailのサーバを利用するため、時間帯によっては遅延することがある。転送元のメールサーバを使えばいいのだが、こちらはサーバによって設定できない場合もある。PCメールはGmailと同様に他のメールサーバから情報を持ってきて動かすわけだが、問題は一括削除ができないため、溜まったメールを1件ずつ消すのが面倒。GmailはPCで一括削除できるので、とりあえずはGmailがいちばん問題が無さそうである。どっちにしろ選択肢が多いのは困る。一通り使ってみないと分からないからだ。1つしかなければ、なんだかんだと文句を言いつつも、それを使うしかないから悩む必要がない。2011.07.10CSS3の新機能は膨大だが、その中でも入力フォームのデザインにバリエーションが増えたことはデザイナにとっては朗報だろう。今まではファンシーで可愛いデザインで統一したいと思っても入力窓だけは角がとんがった四角になってしまい、なかなか馴染まなかった。CSS3からはborder-radiusでコーナーRを指定できるようになった。blue;</style>という具合だ。-moz-はMozilla用、-webkit-はスマートフォン用ということになるだろう。2011.07.09国連の発表によると2100年に世界の人口が100億に達するとのこと。1804年に10億人に達するまでに20万年かかってきたものが、その後の約300年で10倍になるというのだから凄まじい勢いで増えるということだ。地球上に生息できうる人間の数は10億という説もあり、その10倍がひしめく中で、食料、エネルギー、環境が問題になるのは当たり前のこと。「よくこの程度で済んでいるな...」という見方もある。この人口爆発を抑制するには?と言えば出生率を下げるしかない。中国では一人っ子政策が続けば2100年には現在の13億から9億まで人口が減少するという予測もある。世界中が一人っ子政策をすれば良いのか?と言うとそれはそれで問題。人口が減少方向に転じれば次に待ち受けているのが少子高齢化だ。労働人口の割合が急激に減って、働かないで福祉を受ける高齢者が増えることで全体での生産効率が悪化し、みんなが貧乏になる。いすれにしても我々には「隠居」とか「悠々自適」などという言葉は夢物語のようでもある。身体が動かなくなるまで馬車馬のように働き続けることになるのだろう。2011.07.08CSS3はHTML5の一部ではなく独立した規格だが、ブラウザのバージョンによる対応レベルを見るとHTML5とセットで使われることも多いようだ。HTML5の基本デザインではCSSは必須とも言えるので、この中で紹介していくことにする。nth-child(odd)とnth-child(even)というものが加わった。一覧表のデザインで1行置きに背景色を変える場合があるのだが、これをCSSで指定することができる。type="text/css">tr:nth-child(odd){background-color:pink;}tr:nth-child(even){background-color:skyblue;}</style>とすることで奇数行(odd)はピンク、偶数行(even)は水色になる。2011.07.07スマートフォンの普及でタッチパネルを使うことが多くなった。使い慣れていないと、誤って違うところを押したり、押したつもりはないのに触って反応したりと、けっこう使いづらいものだ。「あ〜もう〜くそ!」と思ってはいけない。高齢者パソコン教室の生徒がマウスを思うように使えないのと同じことだろう。一日中スマートフォンをいじった後にPCを立ち上げた時に、ついついモニターの表面を触ってしまいそうにもなるものだ。2011.07.06HTML5ではコンテンツのブロックを判別するためのタグがいくつかある。人間の体で言えば「ここは顔」「ここは胴体」「ここは足」といったような部品の置き場所をタグで指定することができるようになった。<header></header>はヘッダー部分、<nav></nav>はヘッダー下のサブタイトルの部分、<section></section>はここで大きなくくりで本の中の「章」のような意味、<article></article>はsectionの中の小さなグループで本の中の「節」のような意味、<footer></footer>はフッター。<aside></aside>はメインコンテンツではサブ的な要素で、ページ上でのサイドバーに掲載されるような参考情報という感じ。これらは全てheader{margin:2px;background-color:black;width:900px;height:50px;}というようにCSSで個別に装飾できる。2011.07.05ブログは定期的に更新を繰り返していけなければアクセス数はほぼ間違いなく減少していく。ガソリンを送り続けなければエンジンは止まってしまうのと同じだ。書くほうとしては毎回一生懸命書いたものでも読むほうは一瞬である。考えると労力対効果という意味では非常にエネルギー効率が悪いものでもある。書くのか?ということだが、多くの場合、自己満足、ストレス解消、といったことのようである。2011.07.04JavaScriptの記述も省略できる。src="xxx.js"></script>となる。href="xxx.css">となる。frame、framesetは廃止される。フレームは使い勝手が悪いということだ。フレームがどうしても必要な場合はiframeで対応するか、Flashで作るしかないようだ。ん?FlashはHTML5と同居できるのか?ま、それはさておき、その他centerやfontはCSSに完全移行だそうだ。2011.07.03ブログは確実に定期的に更新を繰り返していけば、そのうちにアクセス数は増えてくる。1ヶ月経っても誰も見てくれないからとサービスを乗り換えたりテンプレートを差換えたりしても効果は期待できない。半年〜数年という長いスパンで考えたほうが良い。継続することが一番の力になる。いっても書いている内容がそれなりに読んで面白いものでなければならないが。「それなり」「そこそこ」で良いのだ。2011.07.02HTML5のタグを1回おきに少しずつ(最終的に何回になるか分からないが)説明しいく。html>←これだけで良い。charest="UTF-8">←これだけで良い。それから終了タグが省略できるものも増えた</li>、</p>、</tr>、</th>などだ。"(ダブルコーテーション)の省略だ。PAGE</a>という具合だ。今まで「何で必要あるんだろ?」と思っていたものが必要なくなったようだ。2011.07.01ブログの書き方が判らない...。手慣れた人にとっては「何で?」なのだが、パソコンが苦手な人にとっては意外にもハードルが高いことのようだ。「やる気」さえあれば何とかなるもの。画像の挿入や本文中のリンクの設定ができるようになると、今まで苦労したが故に楽しさも倍増!のようだ。この楽しさが病み付きになり、本来の目的とは違った記事をどんどんと投稿してしまうことにもなる。食品を売るサイトへの顧客誘導が目的だったはずが、自分の子供の自慢話から自分の幼少時代の物語まで、読んでる人が必要としない情報の割合がどんどんと増えてきてしまうのだ。メディアプロフィールメニューを閉じる。