選択されているタグ : 北海道 , CSS

「たった2日で楽しく身につく HTML/CSS入門教室」を読みました

札幌の高橋朋代さん(コモモ)と、森智佳子さん(モリコ)の著書、「たった2日で楽しく身につく HTML/CSS入門教室」を読みました。

私は初心者でも指導者でもないのですが、前作「作りながら学ぶ HTML/CSSデザインの教科書 」がベストセラーとなっている二人の新刊ということと、最近ちょっとWeb制作に疲れていて、原点に返ってみようという気持ちがあって読んでみました。


投稿者名 うぇびん 投稿日時 2016年05月16日 | Permalink

今のWeb制作の最適解「作りながら学ぶ HTML/CSSデザインの教科書」

札幌のWeb制作者、高橋さんと森さんが執筆した「作りながら学ぶ HTML/CSSデザインの教科書 」が好評です。

ある程度自分でHTMLを書けるようになった人や、フレームワークや最低限のタグまで理解している開発者さんなどが、本格的にWeb制作を身に付けるのに役立つ教科書となっています。


投稿者名 うぇびん 投稿日時 2014年01月15日 | Permalink

CSS Nite in SAPPORO, Vol.10 with Microsoft 「HTML5+CSS3 Web Camp 2013」を7月21日に開催します


CSS Nite in SAPPORO, Vol.10を、来月の7月21日(日)に開催します。
今回は全国各地で開催されている、HTML5とCSS3にフォーカスしたMicrosoftとの共同イベントになります。

既にたくさんの方の申し込みをいただいていて、現在90人を超えたところです。
早割は明日(金曜日)の15:00までなので、検討中の方、Facebookイベントで「参加予定」にして忘れちゃってる方はお急ぎくださいませ。

お忙しい方は、音声・スライドが開催後、オンラインで閲覧できる「フォローアップ参加」をご検討くださいー。


投稿者名 うぇびん 投稿日時 2013年06月20日 | Permalink

「Discover Shiretoko」で使われているWEBデザインの美麗テクニック

shiretoko2

Discover Shiretoko – 世界自然遺産「知床」と Web ブラウザ「Firefox」の物語

美しい。
流石はWEB標準の先端をゆくMozilla Firefoxのサイトです。
しかも、コードネームに我らが世界遺産、「Shiretoko」を選んでくれて嬉しいですー。
北海道を愛する方も、フォクすけを愛する方も、俺はOpera一筋だ馬鹿野郎という方も、是非訪問してみてください。

このサイトではWEBデザインの美しいテクニックがあちこちに使われています。
全ては紹介できませんが、取り急ぎ目立つものだけ。

WEBデザインの可能性を広げる、透過PNG

このサイトには「透過設定」を行ったPNG画像が多用され、Flash並のグラフィカルな演出を実現しています。
PNG32形式はファイルサイズが大きくなる欠点がありますが、近年のADSL、光回線の普及で使いやすくなりました。

ですが…
あのクソ忌々しいInternetExplorer6はこれに対応しておらず、足を引っ張り続けています。
このIE6でも透過PNGの表示を可能にするのが、「PNGFix」と呼ばれるJavaScriptライブラリです。
「Discover Shiretoko」はjQueryライブラリを使用しているので、jquery.pngFix.jsを採用しています。

jquery.pngFix.js – PNG-Transparency for Windows IE 5.5 & 6

衝撃のGlider.js

shiretoko3

いや、これはびっくりしました。
てっきり知床→Firefox間でページを移動するのだろうと思っていましたから。
このダイナミックな横スライドは、日本人が作成したjQueryライブラリ「Glider.js」を採用しています。

Glider.jsを作ってみた。 – Ho-KAGO After School

Firefoxユーザーのなかには、「No Script」プラグインでJavaScriptをオフにしている方も少なくありませんが、このライブラリはdivでグルーピングされたHTMLに対し演出を加えるものなので、内容が読めなくなることはありません。
でも、できればこのサイトくらいはJavaScriptオンで見てあげてください…

一部が重なっているナビゲーション

shiretoko1

本文最後尾のナビゲーションは、矢印の一部が重なっています。
四角ベースのCSSレイアウトでこれを実現するには、各ボタンを透過画像で作成し(ここは透明度はあまり関係ないのでgifです)、さらにフロートで横に整列したボタンに対し「ネガティブマージン」や「position:relative(相対配置)」で矢印の一部が重なるように位置ずらしをすることで実現できます。

説明記事がネット上にいろいろあったのだが見つからない…汗

尚、ボタンの重なっている部分は「HTMLで後に書かれている要素」が優先されます。なので、重なりは最小限に抑える必要があります。

トップ専用CSSによるデザインの上書き

shiretoko4

「Discover Shiretoko」はトップ以外のデザインでは、共通の背景画像が使われています。
半島のすみっこにくまさんがいるやつです。
ですが、トップページのみ「top.css」を後から読み込ませることにより、導入部をよりダイナミックな構成に変更しています。
こうすることで、作業量を最小限にしつつ、ページ毎の演出を調整することができます。

これはWEBデザイナーの間では割と常套手段なんですが、CSS勉強中の方も自分のサイトやブログなどでお試しください。楽しいですよ。


他にもレイヤー配置など、たくさんのテクニックが使われていますが、この辺で。ノシ

何故ここまで高度なテクニックを多用したのか。その答えははっきりしています。

「Mozilla Firefox」が最先端のレンダリング、スクリプト処理に対応できるブラウザであることを、自らのサイトで証明するため。

Discover Shiretoko」は、制作チームの自信の現れなのです。


投稿者名 うぇびん 投稿日時 2009年06月24日 | Permalink