Minimalism

　

Checking HTML5 with "Another HTML-lint" gives 100 points

html / CSS

ONE PAGE で使う レイアウト・機能を モジュール化して配置する

First

テンポが良い段落を演出する

アクセント

online
50
周年
特典
11.3(月)～12.2(火)
入会10,800円(税込)が無料

段落は拘りを持たなければシンプルな文字の塊りでしかない。そこにメリハリのあるテキストのサイズを使ってインパクトを与える演出を作り出す。極小サイズのテキストはピンチアウトで拡大できる安心のスタンダード仕様である。
次の段落は、文頭に配置される円形のイメージをタップするとモーダルを表示して別の画像を表示する仕様のもの。

ベルモンド

1959年、8月から9月にかけてゴダール監督の『勝手にしやがれ』の撮影が行われる。主演として参加した同作品は1960年3月に公開され、ヌーヴェルヴァーグの代表作として大ヒットした。

点線で囲う

Jean Seberg

1960 French crime drama film. Directed and written by Jean-Luc Godard, starring Jean-Paul Belmondo and Jean Seberg.

テキストの塊りを点線で囲うだけで特別な意味を持たせることができる。

段落とは

段落とは、文章を内容のまとまりごとに区切ったものである。文章が読みやすくなるように、一つの段落では一つの話題について述べる。内容に関連した画像を併記してより分かりやすい内容にする。

Second

3 column とアコーディオン と 縦書き

3 column の使い方

ブルーハーツ 1000のバイオリン
ヒマラヤほどの消しゴムひとつ楽しい事をたくさんしたいミサイルほどのペンを片手におもしろい事をたくさんしたい 夜の扉を開けて行こう支配者達はイビキをかいてる何度でも夏の匂いを嗅ごう危ない橋を渡って来たんだ夜の金網をくぐり抜け今しか見る事が出来ないものやハックベリーに会いに行く台無しにした昨日は帳消しだ揺り籠から墓場まで馬鹿野郎がついて回る1000のバイオリンが響く道なき道をブッ飛ばす誰かに金を貸してた気がするそんなことはもうどうでもいいのだ思い出は熱いトタン屋根の上アイスクリームみたいに溶けてったヒマラヤほどの消しゴムひとつ楽しい事をたくさんしたいミサイルほどのペンを片手におもしろい事をたくさんしたい
アコーディオンを開く アナザー・レスポンシブの方法

メディアクエリ(Media Queries)は使わない。width プロパティには、width、max-width、min-width と 3 つの種類がある。max-width は width を上書きするが、 min-width は max-width を上書きする。width: と max-width: を使ってレスポンシブを実装する。

このセクションのひとつ目は、3 column 仕様で注釈などを表示させたもの。重要度をテキストのサイズで表現できる。
二つ目のアコーディオンはタイトル部分(アナザー・レスポンシブの方法)をタップすると、コンテンツの開閉ができる UI を CSS を使ってデザイン・装飾したもの。最期は縦書きだ。

縦書き

Makes a block effect
縦書きをアクセントにする
Third

段落のタイトル

ページの中のタイトルは、そのページの重要度に大きく関わる。何らかの方法でアイキャッチが上手く働けば、制作者の意図する通りの誘導が実現する。

繊細に グリッド 大胆に

その方法は、このページに収容できないぐらい多く存在する。

タイトルと段落を馴染ませる

すべての知識の拡大は、無意識を意識化することから生じる
─ フリードリヒ・ニーチェ

日本語ウェブの
デザインの進化

CSS3・DESIGN

タイトルの効果的な編集は、CSS を使ってテキストに影を与えたり、バックウラウンドを塗りつぶしたり、縦書きにして右寄せに配置したりと、様々な方法がある。

いずれにしても、全体のレイアウトのバランスを考慮して如何に配置してアイキャッチの観点で閲覧者の眼を誘導させるかである。

Fourth

写真から説明がポップアップする

段落の要素はテキストと画像である。その両者を上手く絡めるのが段落だ。ひとつひとつに動きを加えるのも良い演出を発揮する。

写真をタップするとテキストがポップアップする例がこれだ。ポップアップが軽快に開閉する挙動がページの躍動感を演出する。

写真と説明の場合

syd barrett

Syd Barrett

January 6, 1946 - July 7, 2006

活動：1967年に ピンクフロイド がメジャー・デビューすると、その端正な容姿と斬新な音楽性でバンドを成功へと導いた。

Fifth

タイトルをアニメーションする

画面をスクロールすると現れるアニメーションを提示しよう。この場合は、ページが起動したときにだけこのインパクトの強いアニメーションが現れる。animation-delay: を少しずつずらすところがポイントである。CSS の記述量が少々多くなるのが弱点だが、出来上がると綺麗に順にアニメーションが流れるので嬉しくなってしまう。

アニメーションサンプル

Makes a block effect
ページが起動すると現れるアニメーション
Sixth

段落の頭を修飾する ::first-letter

段落の頭::first-letter

Flower Travellin' Band is a Japanese rock band that debuted in 1970.

It was planned to serve as the opening act for the Rolling Stones to come to Japan in January 1973, but the visit to Japan was canceled and a big chance was lost. In February 1973, the album "Make Up" was released.

文字列も可能

Flower Travellin' Band is a Japanese rock band that debuted in 1970.

It was planned to serve as the opening act for the Rolling Stones to come to Japan in January 1973, but the visit to Japan was canceled and a big chance was lost. In February 1973, the album "Make Up" was released.

Scroll Down