1. HOME
  2. 2nd
  3. 前のページ
  4. 現在のページ

このテンプレートについて

このテンプレートは、レイアウトというよりも、汎用性を重視したつくりをしています。
最近の流れであるhtml + cssというコーディングを重視し、 システムにやさしいコーディングを心がけました。


基本的な構造とファイルの概要について

CSS,JSの構造
1.基本的な構造
xxxx.html
  • import.css
    • base.css
    • navi.css
    • style.css
    • font.css
    • hack_ie55win.css
    • hack_macie.css
    • hack_ie50win.css
  • print.css
  • base.js

/*rulus
css記述の順番と注意事項

[記述の順番]

(1)base.css ※基本レイアウト・共通部分CSS(モダンブラウザ)
(1)navi.css ※グローバルナビゲーション、サイドナビゲーション
(2)font.css ※フォントCSS(共通)

▼(バグ修正)▼

(3)hack_ie55win.css ※winIE5.0-5.5のバグ修正用CSS
(3)hack_macie.css ※macIE5.xのバグ修正用CSS
(4)hack_ie50win.css ※macIE5.xのバグ修正用CSS hack_ie55win.cssを上書きする形 必要ならば書き加える

[特記事項]
フォントサイズ・リンクカラーの指定は
基本的にはfont.css内のクラスで行う。(fsやlhなど)
IE6 へのハックは、
*html セレクタ{}
で行う。

IE7のハックは、
*+html セレクタ{}
で行う

*/

2.base.jsについて
  • fireworksで書き出されるロールオーバーを記述
  • Flashアクティブ化を防ぐスクリプトを記述

その他のモジュール

汎用性を重視するとクラスだらけになってしまいますが、テーブルなど比較的よく使うタグに汎用性の高いシンプルなデザインのモジュールを作成いたしました。

customtables

各スタイルサンプル

sup,blockquote,hrなど時に使うタグ

GIFアニメーションというのは、僕がWEBの世界に入った頃には少しずつ消えかかっていた言葉だけど、ちょっと試しにcssの背景画像として使っているサイトがあったので、試しに何個か作って見ました。
インラインのaタグで何とか今までと違ったものを・・・というのが理想的でしたが、点滅させるくらいしか思い当たらず、結局ブロックのaタグで一番したかった事を試す。 515m2

テストページ
http://www.show-hey.com/download/roll/


zipファイル
http://www.show-hey.com/download/roll.zip

ページトップとフォントサイズの使用例(.fs10,.fs11,.fs12,.fs14,.fs16,.fs18, .cap)

それでも桑田は腐らない
現地時間8月14日、パイレーツの桑田真澄に戦力外通告。ここまで19試合を投げて0勝1敗、防御率9.43と結果を出せなかった。

 故障者続出で野手が足りず、しかも下位低迷で若手を試したいチーム状況を考えても、フロントの決断は仕方なかっただろう。後半戦の桑田は苦しい投球ばかりだったと言うが、だとすれば降格はむしろ遅すぎたぐらいだ。
  メジャーリーグはハリウッド映画ではない。だから、心温まるストーリーも毎回絵に描いたようなラストを迎えるとは限らないのだ。

 もっとも、賢明な桑田なら、あるいはこんな結末があり得ることもある程度は予期していたのかもしれない。今月初めの取材時、すでに苦しい立場になりつつあった本人に、マイナー落ちへの危機感について尋ねてみたことがあった。

 「落ちるときは落ちるし、落ちないときは落ちない。そんなのは誰にも分からないですよ。完ぺきな人間は一人もいないんですから」。

軽く笑顔すら浮かべ、桑田はまるで達観したような口調でそう語った。その姿からは、やることはすべてやった人間の覚悟のようなものが感じられた。マウンドで常に全力を尽くして、これで駄目なら仕方ない――。

もちろん、現時点で桑田が今回の戦力外通告を心底どう受け止めているかは分からない。メジャー1勝は実現しなかったし、シーズンを最後まで務め上げることもできなかった。悔いがまったくないはずはないだろう。

POPUP

POPUP

 

フロートのスタイル(一個の画像)

一個の場合は、pタグの中のイメージでもフロートさせることができる。フロートさせたい要素にclass="flt"を入れる。右の場合はclass="fltrt"

フロートのスタイル(二個以上の画像)





ここに文章が入ります。フロートさせたい要素にclass="flt"を入れる。右の場合は

ul,li

  • リストその1
  • リストその1
  • リストその1
  • リストその1

テーブルのスタイル

詳細はcustomtablesをご覧ください。

ul liのニュースwith heightLine.js

ページ内ナビゲーション

ページ内3段組(テーブルなし)with heightLine.js

ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。
ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。
ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。

このスタイルの仕様書

このスタイルの仕様(IDやclass、hタグの振り方など・・・)

この項目みたいにpタグが2個以上重なる場合は、divでくくって、clearfixかpkgでフロートを解除する必要がある。又は、brのみでそろえるかどっちかのほうがいい。

1コラムにする場合

div#sideAをまるごとけして、bodyにcml-oneを振ると変わる。

テストページ1col.html

zipファイルダウンロード