商用利用無料、最近のUIデザインが分かるレスポンシブ対応の高品質なHTMLのテンプレートのまとめ | コリス

2016/11/24 146 users コリス Editorial テンプレート レスポンシブ対応

今時のかっこいいデザイン、素敵なエフェクトを備えたレスポンシブ対応の縦長ページ、ランディングページ、プロダクトページ、ポートフォリオ、ブログなど、HTML5+CSS3の無料のテンプレートを紹介します。 単に使うだけでなく、レスポンシブ時のレイアウトのバリエーション、使い勝手のよいコンポーネント、気持ちいい繊細なアニメーションなど勉強にもなります。 Editorial デモページ 文字を見せることに... 続きを読む

無料でしかも高品質！レスポンシブ対応の美しいWebページを作るためのHTML5/CSS3のテンプレートのまとめ | コリス

2015/05/15 547 users ポートフォリオ かっこいいエフェクト 縦長ページ コリス 無料

レスポンシブ対応の縦長ページ、ランディングページ、プロダクトページ、ポートフォリオ、ブログなど、今時のかっこいいエフェクトを備えたHTML5+CSS3の無料のテンプレートを紹介します。 単に使うだけでなく、デザインやHT...記事の続きを読む 続きを読む

2014年のWebデザインのトレンドがたくさん詰まったHTML5+CSS3の無料のテンプレート -Beetle | コリス

2014/12/15 169 users Beetle コリス ポートフォリオ かっこいいエフェクト

レスポンシブ対応の縦長ページ、プロダクトページ、ランディングページ、ポートフォリオ、ブログなど、今時のかっこいいエフェクトを備えたHTML5+CSS3の無料のテンプレートを紹介します。 そのまま使うもよし、スキルアップ用に勉強してもよし、です！ Beetle - Responsive HTML5 Template Beetleには、最近のWebサイトで人気のあるさまざまなコンポーネント・エフェクト... 続きを読む

スクリプト無し、動画をページの背景いっぱいに表示する方法 | コリス

2014/05/29 141 users コリス jQuery ウェブページ スクリプト video要素

jQueryなどスクリプトは一切使わずに、HTML5+CSSで動画をウェブページの背景いっぱいに表示する方法を紹介します。 Basic Fullscreen Video Background レスポンシブにも対応しており、下記のフルサイズのデモページでお試しください。 フルサイズのデモ IE8などHTML5のvideo要素に対応していないブラウザでは、代替の背景画像が表示されます。 実装は、非常に... 続きを読む

今求められているHTML/CSSの実践テクニックが丁寧に解説された良書 -HTML+CSS デザインレシピ | コリス

2014/03/30 201 users コリス 良書 本書 中級 デバイス

HTML5+CSS3でデスクトップ、スマフォ、タブレットなど多様なデバイスに対応できるウェブサイトを制作するための今、そしてこれから必要とされる実践的なテクニックが丁寧にわかりやすく解説されたコーダー必携の良本を紹介します。 本書の対象は中級・上級者。実務でHTML/CSSをバリバリ書いている人です。初級者も入門的な内容は一切無いけど、意欲があれば大丈夫！ これからの「標準」を身につける HTML... 続きを読む

なぜ僕が本を書くことになったのか — Hiroki Tani

2013/12/11 461 users Hiroki Tani Writers Editors 経緯

Editors' & Writers' Advent Calendar 2013ということで、僕が2010年に初めての著書、HTML5＋CSS3で作る 魅せるiPhoneサイト（Kindle版）を出版するに至った経緯を書きます。 きっかけはブログ 当時在籍していた会社のブログで、iPhone向けサイト構築 基礎文法最速マスターという記事を書いたところ、まだ日本語のリソースも少なかったこともあってか... 続きを読む

にわかデザイン（3）：HTML5＋CSS3の「カンタン装飾設定」で今風デザイン (1/3) - ＠IT

2013/05/10 419 users デザイン

基本的にグラデーションや角丸はジェネレータからコピペして設定できるので、作業自体は簡単です。HTML5＋CSS3サンプルを使って表現してみましょう。 （1）装飾のキモは「グラデーション・線・角丸・影・テクスチャー」 前回HTML5＋CSS3の「レイアウトを自在に使いこなす」では、限られたいくつかのCSSプロパティを組み合わせて、さまざまなレイアウトができることをお見せしましたが、今回はそれに装飾を... 続きを読む

にわかデザイン（1）：HTML5＋CSS3は「メニューの作り方」を覚えるだけ！ (1/3) - ＠IT

2013/02/26 383 users メニュー デザイン Photoshop CSSフレームワーク

Photoshopなどの画像処理ソフトを使わず、CSSでできる表現の幅が広がっています。にわかデザイナーになれる、簡単Tipsをお伝えします。 Web製作の現場では、予算の都合上Webサイトのデザインをデザイナーに発注できず、エンジニア自身が担当しなければならないことがままあります。昨今は「Twitter Bootstrap」などのCSSフレームワークを使って、そんな状況に対応している方も多いと思... 続きを読む

スマートフォン向けのHTML5製フレームワーク・Lungo.js - かちびと.net

2012/07/16 309 users net jQuery mootools スマートフォン向け

今更ですけどLungo.jsを少し触って 見ました。Lungo.jsはHTML5+CSS3の スマートフォン向けフレームワーク です。jQueryやmootoolsなどを必要 としない非依存型のライブラリです ので覚えておいて損は無いかも。 スマフォ向けフレームワークです。GPLv3ライセンスでOSSとして公開されています。 Lungo.js スマフォ向けのフレームワークは相当出回っていますので珍... 続きを読む

WordPress3.4に最適化された、レスポンシブデザイン対応のWordPressのテーマファイル -The Boiler | コリス

2012/07/04 136 users カスタマイズ コリス レスポンシブデザイン テーマファイル

WordPress3.4に最適化され、デスクトップ・スマートフォンなどのレスポンシブデザインに対応した、カスタマイズに優れたHTML5+CSS3で作成されたWordPressのテーマファイルを紹介します。 続きを読む

IE7～8に対応したHTML5＋CSS3サイトを制作してみよう ～IE7～8のブラウザ対応をするための便利な方法をまとめました～ | HTML5でサイトをつくろう

2012/06/06 609 users IE7 ブラウザ対応 HTML5 ギミック 方法

HTML5でつくられたサイトというと、Flashのような大掛かりなギミックをHTML5で実現したサイトを連想するかもしれませんが、HTML5＋CSS3でサイト制作をすることは、スマートフォン対応だけでなく、ソースの最適化や軽量化、SEO、将来的なサイトのあり方を考えて、有効な手段となります。 また、CSS3を使用すればページ数の多い企業サイトやブログ、ユーザーの管理画面を必要とするようなサイトを制... 続きを読む

HTML5+CSS3で作った無料ブログ用テンプレート【SimpleBlack】

2012/05/29 317 users

自分の知識の確認の意味を込めて、去年の11月にHTML5用の簡単なテンプレートを作成しました(もともとはCSS自分の知識の確認の意味を込めて、去年の11月にHTML5用の簡単なテンプレートを作成しました(もともとはCSS Animationの確認のために作った物です)。 もし気に入っていただけたらダウンロードして使っていただけたら幸いです。特に変わった仕様も無く、シンプルで単純なものだったので、多... 続きを読む

Responsive Web Design用のHTML5+CSS3のテンプレート素材 | コリス

2011/09/13 132 users ヘッダ コリス ナビゲーション アニメーション テンプレート

iPhone, Androidのスマートフォンなどの小さいスクリーンから、デスクトップの大きいスクリーンまで、それぞれの表示サイズに合わせて最適なレイアウトを提供するHTML5+CSS3のテンプレートを紹介します。 サイズ変更時はレイアウトの一部がアニメーションで移動し、面白い仕掛けにも利用できそうです。 HTMLの構造 テンプレートはブログを想定して作成されています。 ヘッダ、ナビゲーション、特... 続きを読む

初心者の頃分からなかったWeb用語：フレームワーク … CSSからHTML5、WordPressまで

2011/08/08 1305 users フレームワーク CSSフレームワーク CSS HTML web

初心者の頃、フレームワークっていう言葉が難しくて、いまいち意味の分からないものでした。CSSフレームワークとか、HTML5+CSS3のフレームワークとか。ひょっとしたら私と同じようにフレームワークって何だろうって思っている人もいるかと思って、フレームワークについてブログにしてみました。Webを見ていると、フレームワークっていう言葉をよく目にします。初心者の頃は、このフレームワークっていうものがどん... 続きを読む

興味深いテクニックを多々取り入れているHTML5+CSS3のフレームワーク -Gridless | コリス

2011/06/26 253 users コリス フレームワーク チュートリアル クロスブラウザ対応

当サイトの記事でも取り上げている数々のテクニックを取り入れている、IE6/7にも対応したHTML5+CSS3ベースのフレームワークを紹介します。 Gridlessの主な特徴 CSSでユーザーのスクリーンサイズに最適なレイアウトを実現します。 参考：Media Queriesをしっかり身につけるチュートリアル クロスブラウザ対応（IE6/7も含む） CSS Resetには、Normalize CSS... 続きを読む

実用的なデザインがたくさん揃ってる、HTML5+CSS3ベースのフレームワーク -Perkins | コリス

2011/05/19 413 users パラグラフ ドロップシャドウ コリス エレメント グリッド

レイアウトのグリッドをはじめ、ナビゲーション、パラグラフ、リスト、フォーム、テーブルなどページでよく使用するエレメント、角丸、グラデーション、ドロップシャドウ、回転のエフェクトなど、ウェブページを構成するさまざまエレメントが用意されたHTML5+CSS3ベースのフレームワークを紹介します。 Perkinsはウェブデザイナー・開発者の大切な時間を節約するために開発されたもので、HTML5+CSS3で... 続きを読む

某開発者の独り言: スマートフォン向けアプリ開発フレームワークとか

2011/04/30 194 users 特性 悩ましいところ 独り言 Webアプリ アプリ

2011年4月30日土曜日 スマートフォン向けアプリ開発フレームワークとか スマートフォン向けのアプリ提供はほぼ必須になってきているこの状況。 何で作るのか? というのは、悩ましいところですよね。 ネイティブアプリで作るのか？ WEBアプリ(HTML5+CSS3)で作るのか？ ...は開発者が揃っている云々もあるかもしれませんが、それよりも、そのアプリの特性/対象者によって決定する感じなのでしょう... 続きを読む

jQuery Mobile が必須スキルになる！と思うのでこれから勉強する際に参考になる記事まとめ | バシャログ。

2011/04/13 1467 users バシャログ Java jQuery Mobile 必須スキル

Adobe の Creative Suite 5.5 が発表になりましたね。 Dreamweaver の進化っぷりが凄まじいです。マジで。 HTML5+CSS3への対応が目に付きますが、個人的にはjQuery MobileとPhoneGapフレームワークの導入に注目します。 アプリ開発はこれまで、Objective-Cやjavaが主流でしたがDreamweaverでアプリへの書き出しまで出来てしま... 続きを読む

HTML5+CSS3 入門 | yoppa org

2010/10/02 2253 users yoppa org 入門

TweetWebを記述する言語の標準の現状 昨年度であれば、HTMLを記述する授業では自信をもって以下の基準を推薦していました。 HTML (文書の構造を記述する言語) – XHTML 1.0 もしくは XHTML 1.1 CSS (文書の体裁・デザインを指定する言語) – CSS 2 しかしながら、ここ数年で、とくに去年あたりから状況は大きく変動しつつあります。現状の変化を理解するには、ここに至... 続きを読む

フリーで使える15のHTML5＋CSS3なテンプレートファイル:phpspot開発日誌

2010/06/09 242 users テンプレートファイル phpspot開発日誌 テクニック

15 Free HTML5-CSS3 Templates to Start the Future of Web Design | blogfreakz.com フリーで使える15のHTML5＋CSS3なテンプレートファイルが公開されています。 それぞれ地味なようでいて、HTML5やCSS3のテクニックをふんだんに使っています。 素材として使ってもよいですし、１つの学習用リソースとして活用してみるの... 続きを読む