HTMLテンプレートは、あらかじめさまざまな場面を想定して容易されたテンプレート、つまり「ひな形」 を使用してWEBページを作成します。 学習のために自分で一から作るということも大事ですが、ある程度慣れてきたら、テンプレートを使用して 効率よく作るのも重要です。 今回は、そんな時に役立つ無料のHTMLテンプレートを集めてみました。 海外サイトのものもありますが、日本語表示は問題ありません。 レスポンシブWEB対応のテンプレがおすすめ 現在では、スマートフォンやタブレットの普及に伴って、Webサイトを作成する際、単純にPCだけという ことはなく、多くのデバイスに対応することが必要になってきました。 その1つの解決策として、「レスポンシブWebデザイン」が多く使われています。 レスポンシブWebデザインとは、あらゆるデバイスに最適化したWebサイトを、1つのHTMLで実現できる手法です。 スマ
ウェブサイトやアプリ制作に必要なスタイルがあらかじめ定義された、人気CSSフレームワーク Bootstrap。しかし、デザインが他のサイトとかぶってしまうとお悩みの方も多いのではないでしょうか。 今回は、Web制作をより手軽に行うことができる、Bootstrap対応の無料HTML5/CSS3テンプレート素材 Titan をご紹介します。90ページにおよぶ大量のサンプルHTMLページが用意されており、あらゆるプロジェクトに活躍してくれるフリー素材となっています。 Bootstrap を拡張パワーアップ!参考にしたい50個の無料プラグイン、コンポーネントまとめ 無料HTML/CSSテンプレート Titan について Titan はHTML5/CSS3で制作されたBootstrap対応テンプレートで、過去5年間のウェブデザインの傾向を分析して作成されたスタイリッシュな素材です。 じっくりと検討さ
Bootstrapとは? Twitter社で開発されたHTMLやCSSの知識が多少あればWebデザインの知識がなくてもデザイン性の高いWebサイトが作れるCSSフレームワークです。 レスポンシブデザインにも対応しているので、デスクトップPC、スマホ、タブレットでも画面に合わせて自動的に表示できます。 ライセンスはMIT Licenseのオープンソースで商用利用することができます。 Bootstrapの基本的な使い方 Bootstrapを開いて、「Download Bootstrap」をクリックして必要なファイルをダウンロードします。 Download Bootstrapをクリックします。「css」、「fonts」、「js」のフォルダで構成されたファイルがダウンロードされます。 この状態ではHTMLファイルがないので以下からサンプルのテンプレートをコピーします。「copy」をクリックするとコ
Bootstrapなどのフレームワークの登場によって、ウェブサイト制作は以前よりも手軽に、そして身近になってきています。特にデザイントレンドをうまく採用したHTMLテンプレートを利用することで、モバイル端末へのレスポンシブ対応はもちろん、簡単にサイトデザインを作成できるようになっています。 今回は、無料ダウンロードできる新作HTML5/CSS3テンプレート素材をまとめてご紹介します。どの素材も高品質なだけでなく、テキストエディタで編集しやすい仕様となっており、サイト制作が捗るアイテムが揃っています。今後のデザイン制作に活用してみてはいかがでしょう。 詳細は以下から。 サイト設計の手間を大幅に削減する、実用HTMLテンプレート素材まとめ Material Design for Bootstrap Google 公式のデザインガイド「マテリアル・デザイン」をコンセプトに、人気フレームワーク B
[ads1] WordPressはテンプレートも豊富です。無料で利用できるものもたくさんあります。コストが安く済むのもWordPressのメリットですよね。 ……と、思っていたのですが。 最近、ブログのリニューアル作業を経て、考え方が変わりました。「3,000円とか4,000円払ったら飢え死にしちゃう!」という方でなければ、有料のテンプレートをおすすめします!! なぜなら、一目で違いがわかるほどにクオリティが高いからです。 今回は、リニューアル作業時にチェックして回った有料テンプレートのうち、ベスト5を紹介します。すべて、そのまんまでスマートフォンやタブレットに対応するレスポンシブです。 Core Minimalist Photography Portfolio スーパーかっこいい。いきなりTOPページ全面がスライドです。マウスでクリックするとくるくる動き、中央写真のクリックで全画面表示に
Tweet Pocket ランディングページのデザインはコンバージョンを左右する大きな要素だ。 しかし、常にゼロからデザインやレイアウトを考えていると、どれだけ時間があっても足りない。 そのため、あらかじめ使い勝手の良いランディングページテンプレートを用意しておくと便利だ。 なぜなら、結果の出るランディングページの型を用意しておくことで、業務のスピードアップが可能になるだけでなく、安定したコンバージョンをだすことができるからだ。 そこで、本日は、参考になるランディングページテンプレートを10個ご紹介する。 全て10ドル以下という低価格で手に入れることが出来る。また、この中のいくつかは、私も実際に使ったことのあるものだ。 1.Click & Play デモサイト Click & Playは、iPhoneやAndoroidアプリに適したランディングページテンプレートだ。 シンプルなコードで書か
美しい単一ページの無料テンプレート集。 CSS/HTMLの勉強にも使えそうですが、細かいところで単一ページらしいアイデアが使われているところも見所です。 色々と使い所満載のテンプレート集 単一ページだからと思って油断していましたがなかなかのクオリティでびっくり。 Free Single-Page HTML5 Portfolio Template Demo / Download スライドショーの部分も細かいですがよく出来てます。 Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3 Demo / Download Page 一般的な縦型のシングルページ。スムーズな移動も特徴的です。 Resume (HTML) Demo / Download Page Roundfolio: A Free Portfolio T
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
こんにちは、ウェブ開発の林です。 スマートフォン向けウェブページを作る際、横幅ぴったりにしたいと思いませんか。 meta viewport というタグを使えば表示サイズを調整することができます。 ただそれを使ったとしても、Android / iPhone は端末により横幅が違うため個別に最適化するのは面倒です。 スマホ端末ごとにコードを分けることなく常に幅ぴったりにする HTML テンプレートを作りました。 こちらを参考に組んでみてはいかがでしょうか。 HTML テンプレートコード(ヒント付き) こちらの HTML コードを丸っとコピペして修正していくと楽だと思います。 追記: ライセンスフリーです。自由に使ってください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <!--
TOP > WebDesign > 様々なCSSレイアウトをダウンロードできるサイトをまとめた「465+ Useful CSS Layouts for Download」 WEBでは様々なデザインレイアウトがあり、クリエイティブで大きな差はできますが、基本のレイアウトはある程度決まっており、制作する上で、ベースとなるレイアウトテンプレートがあるだけで随分と楽になります。今日紹介するのは様々なCSSレイアウトをダウンロードできるサイトをまとめたエントリー「465+ Useful CSS Layouts for Download」です。 Nice and Free CSS Templates/Layouts by My Celly 基本的な1カラム、2カラム、3カラムといったベーシックなものから、シンプルなものまで様々なCSSテンプレートがダウンロード可能です。今日は紹介されている中か
サイトのデザインを変更しようかと思ったのですが,自力でデザインを考えるのは限界があるのでフリーの HTML/CSS テンプレート集をざっと探してみました.尚,どのサイトが人気なのか分からなかったので,各種ソーシャルメディアのカウントを取得して併記してみました.海外サイトばかりなので,SBM としてははてなブックマーク以外に Delicious のカウントも取得しています. 掲載されてあるデザインはまったく見ずに,サイトの使いやすさ(と言うか「広告の少なさ」かな)だけからの感想ですが,個人的には http://www.solucija.com/ が使いやすいかなぁと言う気がしています. URL Delicious Hatena Twitter Facebook 1 http://www.oswd.org/ 24,170 951 471 1,002 2 http://www.freecsste
ご質問頂いたので記事にします。クオリティ の高いWordPressのテーマで無料のものは 無いか、または無料で手に入る方法は無い か、とのことでしたのでなかなかクオリティの 高いテーマを無料で配布してくれているサイト をいくつかご紹介します。 というわけで無料で手に入る、有料ライクなWordPressテーマを配布しているサイトのまとめ。ハイクオリティかどうかは個人差があるかなとは思います。 デザインはもちろん、テーマの機能をどういったコードで実装しているか、というのも参考になりますので開発目的に見ておいても損は無いかなと。 dessign swiss-missやonextrapixelでも評価されたデザイナー、クリエイター向けのテーマ。ホワイトベース中心です。有料版もありますが、無料版も見劣りしません。 example dessign Templatic TemplaticはCMSやポート
クオリティ重視でフリーのWPテーマをリリース してくれるWPShowerから新作がリリースされ たようです。相変わらず完成度の高いテーマ なので思わずメモ。このままでも普通に使えそう ですが、いつもどおり、デザインを割と変更しや すいように無装飾で組んでくれています。 WPShowerのテーマは、いつも装飾が少なく、js込みのフレームワークとして使えるので好きなんですが、最近マネタイズしはじめたので、無料と言ってくれているうちに手に入れておきたいですね。 すっきりとしたグリッドレイアウト。時系列を崩さず、コンテンツを美しく並べてくれます。マウスオーバーで背景がピンクに。サムネイルはアイキャッチを使います。 ページャーはjsでその場で読み込むのでページ推移不要です。 日本語でも美しい。 管理画面でカラーやフォント、グローバルナビ、GAのトラッキングコード埋め込み等の設定もできます。 これでな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く