2017年のウェブデザイントレンドをうまく反映したかっこいいウェブサイトや、アニメーションなど素敵なエフェクトを採用したランディングページなど、HTML5/CSS3で制作された無料テンプレート素材をまとめてご紹介します。 デザインの現場でも人気の高いBootstrapフレームワークをベースとしたテンプレートも多く、自由にそして手軽にHTMLテンプレートのカスタマイズを行うことができる素材が揃います。どれもスクリーン画面サイズに関係なく表示できるレスポンシブデザインを採用しており、さくっとウェブページを作成したいときの参考にもどうぞ。 Bootstrap 対応！2017年最新の無料HTMLテンプレート上半期まとめ レスポンシブ対応で無料！ウェブ制作を高速化できるHTMLテンプレート24選 2017年1月度 あまり知られていないBootstrapスタイルテクニック、小技16個まとめ Wired
ウェブサイトの閲覧方法は、モバイルやタブレットの普及によって大きく変わってきており、あらゆる端末へ対応することがウェブデザイン制作では必須となってきています。このややこしい問題を解決する、もっとも一般的な方法のひとつが、レスポンシブWebデザインです。 レスポンシブWebデザインとは、デスクトップやタブレット、スマートフォンなどさまざまな画面サイズごとにデザインを調整でき、あらゆるデバイスに最適化したWebサイトを、1つのHTMLで実現できる制作手法を指します。 今回はレスポンシブWebデザインに対応した、無料ダウンロードできるHTMLテンプレート素材をまとめてご紹介します。どれも文字テキストや画像イメージを編集するだけで、すぐに高品質なウェブサイトを作成できます。またBoostrapなど人気フレームワークを利用した素材も多く、柔軟にカスタマイズできる点もポイントです。 サイト設計の手間を
手軽に素敵なホームページを作成することができるCSSフレームワークが沢山登場しています。アイコンなども全てセットになったものなどもあり、コーダーでなくとも簡単に作業できることから人気を博しています。 今回は、レスポンシブに対応したCSSフレームワークをに紹介します。CSSフレームワークを選ぶ際の参考にしましょう。 CSSフレームワークとは？その特徴とメリット CSSフレームワークを簡単に言うと、Webサイトに必要なパーツや主な機能などがセットになったパックのことです。Webサイトをデザインするとき、通常はイチからデザインを考えて、パーツを揃え、CSSを記述していく必要があります。これは時間がかかる上、Webデザイナーやエンジニアなどの専門家がいない場合、整ったデザインのWebサイトを制作することは非常に困難だと言えるでしょう。 そんなときに便利なのがCSSフレームワークです。CSSフレーム
最近のWebページでよく使用されるシンプルな1カラム、マルチカラム、カード型のレイアウトをはじめ、フッタが常に最下部に表示されるスティッキー、Webアプリなど、人気のグリッドレイアウトを簡単に実装できる超軽量スタイルシートを紹介します。 もちろんレスポンシブ対応で、古い環境（IE8+, iOS5+, Android3+）もサポートされています。 レイアウト用だけのフレームワークを必要としている人にはぴったりだと思います。 GridLayout GridLayout -GitHub サポートするのがモダンブラウザだけであれば、Flexboxでレイアウトをするのがベストです。 Flexboxについては、下記ページで徹底的に解説しているので参考にしてください。 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 GridLayoutの主な特徴 GridLayoutのデモ
![[CSS]IE8もサポート、レスポンシブ対応のさまざまなレイアウトを手軽に使いたい人にぴったりな超軽量スタイルシート -GridLayout](https://cdn-ak-scissors.b.st-hatena.com/image/square/b5ba934ae36a322ae8ab722a40c75aec7f103caf/height=288;version=1;width=512/https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttps%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015082103.png)
BootstrapやFoundationは高性能だけど機能が豊富すぎる、またグリッドだけのフレームワークでは物足りない、そんな人にぴったりのレスポンシブ対応のOOCSS（オブジェクト指向CSS）で設計された超軽量（9KB）のフレームワークを紹介します。 TukTuk TukTuk -GitHub TukTukは、レスポンシブ対応の実用的なさまざまなページを軽量のスタイルシートで実装することを目的としたもので、OOCSS（オブジェクト指向CSS）ベースの効率的なスタイルシートが使用されています。 ライセンスはGPLv3で、オープンソースライセンスとして配布されています。 デモでは、4種類のページがオンラインで確認できます。
Responsive tables ナイスなレスポンシブなテーブル実装jQueryプラグイン「Responsive tables」 レスポンシブなテーブルというと、どうせ何か削るんでしょう、と思うところですが、主要項目を隠しつつも、見たい項目を選択して表示できるレスポンシブ方式。 テーブルは悩みどころではありますが、１つの解決策として知っておくとよさげ。 デザインもBootstrapベースで使いやすそうです 関連エントリ レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 レスポンシブでタッチフレンドリな軽量LightBox実装jQueryプラグイン「Image Lightbox」 レスポンシブなギャラリー構築ができるLightBox実装jQueryプラグイン「lightGallery」 クールに実装できるレスポンシブなモーダルダイアログ「Remod
photo credit: ak_tokyo via photopin cc レスポンシブサイトを構築する際、意外と引っかかるのが「グローバルナビ」 ページの横幅（キャンバス）いっぱいに表示させることが多い関係上、キャンバス幅が一定でなくなるレスポンシブWebデザインでは一筋縄ではいきません。 慣れない内は考えるのが面倒で「スマホ専用のナビゲーションを別途用意」したり、「グローバルナビをまるごと非表示にしてしまう」ということをされた方の少なくないのではないかと思います。 今回は「レスポンシブWebデザインで使えるグローバルナビ」をまとめました。 １：【CSS】Table-cellで１行表示 「グローバルナビは絶対に１列固定。それ以外は認めない」という方向けの方法。 これを使うと間違いなく１列のグローバルナビが作れます。 原理は簡単で、１列だけのtableを作るというだけのことです。 CSS
レスポンシブWebデザインのサイトは国内でも増えてきましたが、制作するとなるとかなり手間がかかります。 そんなとき役に立つのがレスポンシブWebデザイン対応のフレームワーク。中でも「Bootstrap」は、多彩な機能を備え、その使いやすさから広く知られています。 そこで今回は、国内の秀逸なレスポンシブWebデザインを集めた「Responsive Web Design JP」から、Bootstrapを使って作られたサイトをご紹介したいと思います。 whiteSTOUT フォトクリエイティブを中心としたマネージメントオフィスのサイトです。トップに大きな画像を使い、洗練されたイメージとなっています。 AGATHA E-SHOP アクセサリーブランド「AGATHA」のECサイトです。有名ブランドの、しかもECサイトにもBootstrapが使われています。 ACTUS online こちらは有名イン
skelJSはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 レスポンシブなWebデザインを考える際にはブロックを意識してデザインを行う必要があります。多くは幅を12分割して提供するようです。レスポンシブなサイトやWebアプリを開発するためのフレームワーク、skelJSも同様の設計となっています。 デスクトップサイズ。Bootstrapのように見やすい画面になっています。 タブレットサイズ。この場合もデスクトップライクですが、横の隙間は狭まっています。 スマートフォンサイズ。メニューなどはそのままに、下のコンテンツはずれています。 作成例。12個のブロックをどう割り当てるかを決めていく形です。 -3uといった指定をすると左側が空く仕組みになっています。これは面白いです。 入れ子にした場合の表示はちょっと変わっています。 skelJSは大きなフレームワーク
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
