Web’s*Webデザイナーbe2koのブログ*">

Webデザイナーbe2koがWebネタを中心に役立つかもしれない情報を書いています。

HTMLコーディングの時間を大幅に短縮するためのサイト作成用テンプレート

サイトのデザインデータが出来上がり、いざコーディングの作業に入ろう！となった時に、皆様はどのようにして作業を開始しているでしょうか？

今回は主に自分用ということで、よく使っているHTMLソースをコピペだけである程度形が出来るようにテンプレートを作ってみました。

色々とジェネレーターとかたくさん出ているのですが、もっと自分が使い易いように、アレンジが簡単にできるようにとなるとやっぱりソースをコピペしてデザインに合わせて好きなようにコーディングしていく方がなんだかんだで速かったりするんです。（ツールを使いこなせていないだけかもしれませんが；）

使い方は、zipをダウンロードしていただき、それぞれのソースを見ていただいてお好きにお使い下さい。

実際にご利用になられる方はソースを確認していただくとこれが使えるか使えないかはご判断いただけると思います。

使い回し用のソースをただまとめているものとご理解いただけましたら幸いです。

内容は以下の通り。

bakusoku_html1.0.zip

  • css　/　common.css　default.css　style.css
  • js　/　smartRollover.js（画像ロールオーバー用）　DD_belatedPNG.js（IE6のpng表示用）
  • 2カラム用.html
  • 3カラム用.html
  • グローバルナビゲーション.html
  • ドキュメントタイプ.html
  • ニュース.html
  • フッター横幅100%.html
  • フッター幅指定.html
  • ヘッダー右肩ナビゲーション.html
  • ヘッダー横幅100%.html
  • ヘッダー幅指定.html
  • 左右振り分け用ボックス.html

CSSについて

default.css

初期化用のcssです。clearfixもここに書いてます。

common.css

サイト共通用のcssです。default.cssを読み込んでます。

style.css

その他のスタイル設定用です。

JSについて

smartRollover.js

画像のロールオーバー用JSです。

CSS HappyLife様の配布されているものを使わさせていただいております。

DD_belatedPNG.js

IE6でのpng表示用です。

詳しい使用方法などは以下のブログ様方が非常にわかりやすく書かれていますのでご参考に。

IE6用透過png対応策、DD_belatedPNGの使用法と注意点（ITキヲスク）

IE6で透過PNGを手軽に使えるJavascriptライブラリ「DD_belatedPNG」（CSS-EBLOG）

bakusoku_htmlは随時改変していくと思います。

もっとこんなのあればいいなー、というご要望などありましたら、コメントなどいただけましたら出来る範囲で追加していきたいです。

皆様の作業効率が、わずかでも向上していただけましたら幸いです。

おすすめレンタルサーバー

国内最大級の個人向けレンタルサーバー「ロリポップ！レンタルサーバー」は、月額263円で容量は余裕の１ＧＢ！更に月額+100円で２ＧＢに変更可能！
しかも、ロリポップ！は安いだけじゃなく、WEBメーラー/ブログ/ショッピングカート/ミニSNSなどと無料でついてくる機能が満載です。
もちろん、オンラインマニュアルやお助け掲示板、ライブチャット等もあり、充実したサポートで初心者の方でも安心です。
無料のお試し期間が１０日間ありますので、まずは気軽に利用してみてくださいね！

▼ロリポップ！レンタルサーバーはこちら

最新の投稿記事
カテゴリー
月別アーカイブ
このブログの説明

Web'sはインターネットモンスター勤務のWebデザイナーbe2koが書いてます。

お仕事の話、趣味の話、ネットのネタ話などなど書いていきます。

ホームページ作成ならインターネットモンスター

リンク