Webデザイナーべつこのブログ*Web's

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

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

投稿日 | 4月 12, 2010 | 2 コメント

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

今回は主に自分用ということで、よく使っている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は随時改変していくと思います。

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

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

カテゴリー: CSS, WEBデザイン, bakusoku_html, コーディング
タグ: > >

iPhone購入、そして最高の使い心地

投稿日 | 1月 12, 2010 | 0 コメント

去年一年、個人的に色んなスマートフォンを買って使い心地を検証してきましたが、最終的にやはりiPhoneに落ち着きました。

なんといってもアプリケーションの豊富さ、ネット環境の使いやすさが他スマートフォンよりも快適です。

続きを読む

カテゴリー: iPhone, レビュー, 携帯電話

GoogleChrome版のアドオン「Extensions」がかなり豊富になってきた

投稿日 | 11月 14, 2009 | 1 コメント

FirefoxからGoogleChromeに移行して、ブラウジングに何の不自由も感じない程度に慣れてきました。

欲を言えばやっぱりアドオンみたいな機能があれば・・・と思うこともあるでしょうが、それもかなり現実的になってきたようです。

まだいろいろ試したりはしてないのですが、こちらのサイト。

Google Chrome Extensions

Google Chrome Extensions

http://www.chromeextensions.org/

見つけた瞬間思わず「なんと！！」と叫んでしまいました。

GoogleChromeで使えるアドオン、Extensionsが豊富に紹介されています。

Chrome使いの方は、ぜひチェックしてみてください。

カテゴリー: Google, Google Chrome, ブラウザ

あなたはWEBディレクター？それともWEBデザイナー？それとも・・・

投稿日 | 11月 13, 2009 | 0 コメント

どうもお久しぶりです。

やたらと担当案件数が増えまくっている私ですが、そんなこと気にせず思いっきり作りまくってます。

しばらく社内のコンテンツとかサイト管理とかいろいろしてたのですが、諸事情もありまして現在制作部にてふんはふんはと奮闘しております。

もともとクライアント先に出向いてディレクターの経験も若干ながらありますもので、現状の業務が「WEBディレクター＆WEBデザイナー」というか「うぇぶでぃれざいなー」みたいな、響きは微妙ですね。

そんなこんなであるんですが、家に帰れば一児の父です。

IMG 89192 あなたはWEBディレクター？それともWEBデザイナー？それとも・・・

かわいいわが子。

息子さんをお風呂入れたり嫁がご飯作ってる時に抱っこしてたりと、一応パパしてます。

しかしながらもともと腕力にはまったく自信がないため、長いこと抱っこしてあげられません・・・。

普通にほぼ一日中抱っこしてる嫁がすごいです。か弱い夫ですまんです。

さて、今年も残りわずかになってきましたがもっとギアあげてがんばるぞー！

カテゴリー: 日記, 私生活

Google Chromeのテーマが変更できるようになりました

投稿日 | 8月 7, 2009 | 0 コメント

今回はタイトルの通りです。

Google Chromeに乗り換えてしばらく経ちますが、アドオンが使えないことがそんなに苦にならないようになりました。

要は慣れですかね。

続きを読む

カテゴリー: Google
次のページ »
おすすめレンタルサーバー

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

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

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

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

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

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

リンク