Webデザインは以前より身近なものになりましたが、プロフェッショナルな仕上がりにするには、まだまだ多くの労力と技術が必要です。

幸いなことに、毎回ゼロから始める必要はないのです。オンラインには、現代のデザイントレンドやテクニックを網羅した、何千もの無料のCSSテンプレートが用意されています。そのまま使うのはもちろん、カスタマイズして自分好みに仕上げることも可能です。

このガイドでは、CSSテンプレートについて詳しく説明し、その場所について説明します。

cssテンプレート（cssの雛形）は何ですか？

CSSテンプレートは、CSSだけでなく、機能的なウェブサイトを作成するために必要なすべての機能を備えています。ダウンロードすると、通常、以下のようなフォルダが作成されます。

• HTMLファイル - ウェブサイトの各ページに対応するHTMLファイルを取得します。サンプルテキストと画像が含まれていますので、ご自分のコンテンツに置き換えてください。また、サイトの説明文など、コンテンツに関連するメタデータを調整する能力も必要です。
• CSSファイル - 通常、サイトのすべてのスタイルを含むマスターCSSファイル、および追加のスタイルシート（リセットスタイルシートなど）、またはウェブフォント用の1つを取得することになります。
• Javascriptファイル - サイトにJavascriptの機能が含まれている場合、HTML文書に統合するのではなく、独立したファイルに含めるのが理想的です。
• 画像、フォント、アイコン - テンプレートで使用されている画像も含める必要があります。アイコンや背景はそのままで、他のプレースホルダー画像を自分のものに置き換える必要があるかもしれません。また、一部のカスタムフォントが含まれる場合があります。

CSSテンプレートは、WordpressやExcel、InDesignなど他のテンプレートと異なり、ある程度の専門知識が必要です。

編集するためのフレンドリーなインターフェースはないので、HTML文書に独自のコンテンツを追加する方法を見つける方法くらいは知っておく必要があるだろう。カスタマイズを行うには、CSSを十分に理解する必要があります。

cssテンプレートに求められるもの

CSSの無料テンプレートがたくさんある中で、どれが自分に合っているのかどうやって判断したらいいのでしょうか？ここでは、注意すべき点をいくつかご紹介します。

• デザイン - 見た目がよく、描きたいイメージを反映したウェブサイトが必要なのは明らかです。しかし、そのテンプレートが現在と将来のニーズに適しているかどうかを検討することも重要です。多くは1ページのウェブサイト用で、一部は複数ページ用に設計されています。後者が必要な場合は、WordpressなどのCMSを利用した方が良いかを検討します。
• モバイル最適化 - モバイルウェブの利用率はデスクトップよりも高くなっており、スマートフォン**でサイトが正しく動作することが不可欠となっています。まともなCSSテンプレートであれば、どのような画面サイズでも完璧に動作するよう、レスポンシブデザインを採用しているはずです。選択しない場合は、1つに切り替えてください。
• よく書かれている - 使用するために提出する前に、テンプレートをダウンロードし、コードを見てください。きれいで、構成がよく、編集しやすいものでなければなりません。また、見出しやタイトルタグを正しく使うなど、SEOを意識したものである必要があります。
• ライセンス - 選択した CSS テンプレートのライセンスを確認してください。多くの場合、Creative Comm*** ライセンスで提供されていますが、このライセンスのバージョンによって、テンプレートの編集の可否、商用利用の可否、オリジナルデザイナーのクレジット表記が必要かどうかが異なります。
• プラグイン - CSSテンプレート開発者の中には、「無料」で作品を提供する人もいます。テンプレートは無料で入手できますが、追加でカスタマイズをすることで、あなたのサイト独自のテンプレートにすることができます。

それでは、無料のCSSテンプレートを探すのに最適な場所を紹介しましょう。

株式会社1templated.co

800種類以上のCSSテンプレートが収録されており、あらゆるタイプのWebサイトに対応するスタイルが揃っています。これらはすべてこのウェブサイトのために作られたものなので、他のどこにも出てこないはずです。

すべてのテンプレートはレスポンシブ対応で、HTML5で構築されています。これらは小型軽量で、ビデオライトボックスやスクロール効果などのJavascriptの追加機能を持ち、体験に真の価値を与える場合にのみ使用されます。

2styleshout.com ウェブサイト

Styleshoutは、クリエイティブ・コモンズ・ライセンスのもとで公開されている無料テンプレートとプレミアムテンプレートを幅広く提供しています。

無料テンプレートは、完全なウェブサイトから近日公開のページ、そして見落としがちな404エラーページまで、幅広いカテゴリーをカバーしています。自分でカスタマイズして既存のウェブサイトのスタイルに合わせることもできますし、お金を払って StyleShort に依頼することもできます。

III. html5up.net

この超スタイリッシュなテンプレート集は、超人気でもあります。ほとんどのテンプレートが何十万回もダウンロードされており、その理由は簡単にわかります。

どのサイトもブログや商品紹介のページが多いのですが、特に写真家の方が作品を紹介するのに適したデザインのものがあります。基本的なグリッドスタイルのテンプレートは非常にカスタマイズしやすいのですが、派手なものはJavascriptが非常に重くなる傾向があり、そのため、あなたの微調整に適していないかもしれません。

4freebie**ug.com ウェブサイト

フリーペーパーは、量的な不足はあっても、それを補って余りある質的なものです。若手開発者の技術発表の場として、ハイエンドでプレミアムなデザインを多数収録しています。

この印象的なウェブサイト用無料テンプレート集は、代理店、写真家、アプリ開発者、その他のクリエーターに最適です。JavascriptやCSSの効果やアニメーションを利用して、これらのサイトをカスタマイズすることができます。

また、「Freebie**ug.com」では、フォント、ストックフォト、イラストスケッチ、PSDファイルなど、ウェブデザイナー向けのさまざまな無料素材が用意されています。

5 無料 - css.com ウェブサイト

CSS.comのサイトでは、約2503種類の無料テンプレートが提供されており、さらに、お探しのものが見つからない場合に備えて、プレミアムテンプレートも多数用意されています。

多くの選択肢がある中で、完璧なデザインを導き出すのは少し難しいかもしれません。10年前からあるサイトということで、いまだにXHTMLで書かれたテンプレートが掲載されていますが、品質はおおむね良好です。これらは避けるべきでしょう。もうひとつは、選んだテンプレートのライセンスを確認しておくことです。すべて無料ですが、パブリックドメイン、クリエイティブ・コモンズ、著者固有のライセンスが使われているものもあります。

6 operating-system-templates.com

グリッドベースのモダンなシングルページレイアウトを中心に、28ページの無料CSSテンプレートを用意しました。シンプルさを求めるなら、ここがおすすめです。デザインもすっきりしていて美しく、カスタマイズもしやすい。

OS-Templates.comでは、「基本テンプレート」も数多く提供しています。これらは、一般的なさまざまなレイアウトスキーム（2カラム、3カラムなど）でウェブサイトの基本構造を提供するもので、スタイルを設定する必要はまったくありません。WordPressのデフォルトテーマを使うのと同じように、ブランクキャンバスを使えば、あなたのウェブサイトを思い通りに変えることができるのです。

7 ボーグ・オンライン【販売終了

Maglevは、Borg Onlineで見られる1ページのウェブサイトテンプレートです。

商品ページに最適なクイック＆クリーンなテンプレートです。ミニマルなデザインは、セクションからセクションへのスクロールを助けるいくつかのJqueryエフェクトによってのみ強化されています。シンプルなレイアウトはそれ自体で機能しますが、自分なりのカスタマイズの出発点としても最適です。

8 エレファント・ブッダ

Pixel Buddhaのテンプレートは、Webサイトだけでなく、メールマガジン用のテンプレートも多数用意されています。

いずれにせよ、HTML5とCSS3でデザインされ、レスポンシブ対応なので、どのデバイスでも美しく表示されます。ハイライトは、美しいブリーフケース/履歴書テンプレート「Howdy HTML」と、HTMLとCSSの上にソースPSDファイルを含む、見栄えのするeコマースページ「SOHO HTML」です。

9templatemo.com

Templatemoは、約500種類のテンプレートを無料で提供しています。中には、ブートストラップ・グリッドシステムから脱却して、何か違うことに挑戦している人向けのものもあります。

ライトボックスやコンテンツカルーセルなどの機能を必要な箇所に搭載していますが、ほとんどのテンプレートはシンプルですっきりしています。また、デフォルトでいくつかのテンプレートが設定されており、最大6ページまで扱える点も気に入っています。これにより、一般的になりつつあるシングルページレイアウトにコンテンツが収まらない場合でも、容易に対応することができます。

10startbootstrap.comのウェブサイト

Bootstrapは、高品質なWebサイトを短時間で構築できるフロントエンドフレームワークとして、非常に人気があります。しかし、習得するのに少し時間がかかるので、ここでブートストラップガイドが役に立ちます。

これらの無料のオープンソーステンプレートは、Bootstrapのグリッドシステムを使って構築されています。30以上の中から選ぶことができます。アプリケーション、ブログ、ログインページなどのために完全にデザインされたものもあれば、あなたがスタイリングするのを待つ空白のレイアウトもあります。

11bootswatch.comのウェブサイト

最後にもう一つ。bootsatchは、ブートストラップを使って構築されたサイト用に16のオープンソーステーマを提供しています。

Bootstrapを使って独自のサイトレイアウトを構築することも、Launch Bootstrapから空のテンプレートをダウンロードすることもできます。Bootswatchが行うのは、フォント、背景色、ボタンやメニューなどのエレメントのスタイルを変更することだけです。Bootstrapの超クリーンな精神に忠実でありながら、あなたのサイトをユニークな外観にします。

Bootstrapを使えば、基本的なウェブサイトを簡単に作ることができ、Bootswatchがあれば、すぐに手を加えることができます。

cssテンプレートの使い方

一般的に、テンプレートの使い方には、そのまま使う方法と、自分でデザインするベースとして使う方法の2つがあります。

テンプレートを使用することの危険性は、他の人と全く同じウェブサイトが出来上がってしまうことです。人気のあるテンプレートを選べば、何千もの同じウェブサイトが存在する可能性があります。これが、カスタマイズを支持する最大の理由です。

CSSテンプレートは、基本的なレイアウトが決まっていて、すぐにスタイリングに取りかかりたい経験豊富なウェブデザイナーにとって、素晴らしい近道となります。

ウェブデザイナーに最適な製品です。HTMLやCSSの知識はあるが、ゼロからサイトを構築する自信や知識がない場合、CSSテンプレートは簡単に美しいサイトを手に入れることができるとともに、学習ツールとしても最適です。

ワークインプログレスとして扱うことができます。まずはフォントを消したり、配色を変えたりすることから始め、時間をかけて既存の要素をデザインし直したり、新しい要素を追加したりと、さまざまな工夫ができます。実際に体験して学ぶことに勝るものはありません。

ウェブサイトを構築する際にCSSテンプレートを使用しますか？また、CSSテンプレートを見つけるためのお気に入りの場所を教えてください。