鎌倉の市民活動を支える仲間たちのweb相互サポートサイト

デモテンプレート ダウンロード

このテンプレートは、なるべくシンプルなCSS、簡単な記述によるCSSで画像配置、テキストのレイアウトが出来るように 工夫したもので、このwebサポート友の会のページが出来ています。
これまでにスマホレスポンシブル講座に参加された方なら、グリッド説明のCSSCSS/grid.css を解析すれば、解る範囲のものです。
必要なhtml・css・画像など全て入ったフォルダーを提供します。

ダウンロード
この圧縮フォルダーの解凍にはパスワードが必要となります。メール又は携帯にてお問い合わせください。


画像とテキストの配置

※画像は現在、流通しているスマホの最大幅NokiaN9の幅480pxに合わせておくと、画質は劣化せずに 表示することが出来ます。
テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・

文章のみセクション スタイルbun

テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・
テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・
テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・

画像2枚を配置する。


原画サイズに対して大きく表示されるの画質が劣化する。


画像3枚を配置する。



画像4枚を配置する。



画像5枚を配置する。



 
 

テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・改行
テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・改行
テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・改行
テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・改行 テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・改行
テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・改行
テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・改行

文章のみセクション スタイルbun

テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・ああああああああああああああああああああああああああああああ
いいいいいいいいいいいいいいいいいいいいいいいいい テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・
テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・


ここからは、グリッドを使ってのレイアウト配置

画像2枚

画像タイトル2-1

テキスト・テキスト・テキtスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキ

画像タイトル2-2

テキスト・テキスト・テキtスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキ

画像3枚

画像タイトル3-1

テキスト・テキスト・テキtスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキ

画像タイトル3-2

テキスト・テキスト・テキtスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキ

画像タイトル3-3

テキスト・テキスト・テキtスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキ

画像4枚

画像タイトル4-1

テキスト・テキスト・テキtスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキ

画像タイトル4-2

テキスト・テキスト・テキtスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキ

画像タイトル4-3

テキスト・テキスト・テキtスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキ

画像タイトル4-4

テキスト・テキスト・テキtスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキ

テキストと画像の組み合わせの試験 画像左

ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。 テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・

ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。 テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・

ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・

テキストと画像の組み合わせの試験2画像右

ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。 テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・

ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。 テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・

ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・ テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・

npo

NPO-Center

sns

Facebook

ブログ

Canpan-Blog

メール

E-Mail

会議

Tel-meeting

TOP