デザインセンス不要でWeb制作が捗る！登録ナシですぐ使える「HTML5/CSS3」の無料テンプレート12選＋α - paiza times
どうも、まさとらん（@0310lan）です。 ネット上には、Webサイトを効率よく制作できるように多種多様な高品質テンプレートが存在します。 そのまま利用しても良いし、開発やデザインの参考にしてみたり…など、その活用範囲は広いのですが、検索すると「有料・無料」「低品質・高品質」などが混在していて見つけるのが大変だったりします。 そこで今回は、「無料・高品質」なテンプレートの中から使用用途別にカテゴリを分けて、さらに面倒な「登録」も不要なモノだけを厳選してご紹介しようと思うので参考にしてみてください！ ■「ブログサイト」に最適なテンプレート！ 【 Spore 】 「Spore」は、モダンブラウザに対応したレスポンシブなテンプレートになっており、「ブログ」向けとして最適です。 ページのトップに位置するフルスクリーンのテーマ画像が印象的で、縦幅の違うカード状に並べられた記事はシンプルながらも、ア
[JS]jQueryのプラグイン100選 -2011年総集編
2011年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年はCSS3の影響もあってかアニメーションのエフェクトが目立ちました。また、Resposive Web Design用の可変ものや動画・テキストを扱ったものも多かったですね。 [ad#ad-2] 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 タブ関連 ナビゲーション関連 レイアウト関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連
いまさら聞けない＞＜； 基礎から学ぶ「HTML5」超入門！
HTML5 旋風、吹き荒れてますね！(^0^)／ さて、ものすごく突然で恐縮ですが、この度「HTMLファイ部」、設立しました！ 株式会社カヤック（本社：神奈川県鎌倉市、 代表取締役CEO：柳澤大輔、http://www.kayac.com以下「カヤック」）は、HTML＋CSSコーディング、JavaScript プログラムを担当する職種が所属する「HTMLファイ部」を発足いたします。 これまでHTMLおよびCSS、JavaScriptの担当者は、プログラマが所属する技術部、デザイナが所属する意匠部ME課（MEはMarkup Engineerの略）に分かれて所属していましたが、昨今のHTML5の進化と普及を受けて、HTML、CSS、JavaScriptの担当者は「HTMLファイ部」にて活動をスタートします。 そんなHTMLファイ部員が今回お送りさせていただくのは、 HTML5 について基礎から
CSS3を使ったクリエイティブなテキストエフェクト集２３:phpspot開発日誌
23 Creative Uses of CSS3 Text Effects to Enhance Your Web Presence | Onextrapixel - Showcasing Web Treats Without A Hitch CSS3を使ったクリエイティブなテキストエフェクト集２３。 CSS3でいろんな事ができるのはご存知の通りですが、テキストだけでもかなり色々な使い方があって勉強になります。 ↓ 例えば、これが画像じゃないらしいです（笑） 他にも使えるテクニックが満載 早くすべてのブラウザでCSS3が使える時代が来てほしいですね。 もちろん、画像でやったほうが楽なところは画像でやっちゃいますが、楽出来る部分はかなり楽になりそう 関連エントリ CSS3だけで実現する幅広で使えそうなドロップダウン実装チュートリアル 味気ないサムネイルリストをCSS3で回転させてオシャレにす
好きなサイトのCSSを簡単にカスタマイズできる「Stylebot」 | ライフハッカー・ジャパン
Chrome：「Stylebot」を使えばボタンベースのコントロールパネル、またはスタイルシートのローテキストを編集することで、ほとんどどんなページのスタイルシートでも簡単に調整できます！ 多くの人はフォントを変更させたり、広告を非表示にしたりするためにこのアプリを使いますが、このパワフルなアドオンを活用すれば、サイトを完全にリスキンしたり、開発者フォーラムなどを通じて、カスタムCSSをシェアしたりすることも可能です。 Stylebot Socialサイトには、カスタマイズされたCSSが数多くあり、「CSSって放送局？」という方でも、比較的簡単に使えるようになっています（CSSは段階スタイルシート、カスケーディング・スタイル・シート、カスケード・スタイル・シートと呼ばれ、簡単に言うとウェブサイトの表示方法を調整するものです）。 Stylebotを使うと、例えば、Google DocsをMS
CSS3で作るあんなものやこんなものまとめ
さまざまな可能性を秘めたCSS3の登場から、いろんなエントリーが出てきましたので、一部をまとめてご紹介。 ちなみにこの画像はこちらのもので、CSS3だけで画像を使わずにキュウべえを書いたそうです。 CSS3でどんなことができちゃうの系 CSS3のみでいろいろなオブジェクトの作り方を掲載されている。 CSSについて知っておきたいことまとめ。 仕事で役立つ事もばっちり羅網。このまとめっぷりはすごいです。 CSS3の完全一夜漬けマニュアル。 とりあえずこの記事のところにサンプルがありますので触ってみてください。 すごく気持ちいい体験が待っていることでしょう。 CSS3のアニメーション効果を利用してちょっとダイナミックな404ページを表現しています。 すっごいかっちょいい。サンプルデモはこちら。 CSS3だけで3Dを表現。とりあえずこれがCSS3だというものを見せてくれる。ぱない。chromeでも
HTML5やcss3を使う際に見てるリファレンス的なサイトとか、使い勝手の良いツールとか - かちびと.net
あまりに情報量が多くて混乱してきたので 自分用にまとめ。リファレンスとか、ちゃんと 実践で使えるツールを自分なりに厳選して まとめておきます。どうも、あっちこっちで あれが便利とかこれが便利だとか言われる と訳が分からなくなるのでそろそろ絞らない とですね。 というわけでお遊びではなく実践に役立ってる基本的なリファレンスとか助けてくれるツールのメモなので目新しいものはありません。完全に自分用のまとめです。個人的には基礎用のサイトと、実践向けのツールやライブラリだけあればいいという感じです。 尚、css3/html5に関する情報だけを求めている&特に情報取得に急いでないならdotHTML5というサイト1つで事足りるかと思います。 ※W3Cは割愛でいいですよね チートシートとかリファレンスだけで基本的にはいい感じですかね・・ HTML5 タグリファレンス マークアップもままならないほど慣れてな
CSS3での背景指定方法のまとめ
CSSであれこれやっていたら、まず間違いなく使うであろう背景関連のプロパティ。 CSS3ではこれまでより多くの指定ができるようになります。 それらの新しいプロパティや値はいったいどういうものなのか、調べてみました。 主に参考にしたのは以下の2つです。 CSS Backgrounds and Borders Module Level 3現在の仕様です。CSS 背景 & ボーダー モジュール Level 32011年2月15日版の仕様の日本語訳です。プロパティと値の説明はこちらを参考にしました。背景のレイヤー背景は複数のレイヤーを持つことができ、レイヤーの数はbackground-imageに指定されたカンマ区切りの値の数によって決められます。noneの指定も一つのレイヤーを生成します。 背景レイヤーの重なり方ですが、初めに指定したものから手前に来ますので、注意してください。 例として、下のr
CSS3対応、スタイルシートの記述で気をつけるべき19のポイント
The CSS Lint Rules [ad#ad-2] 以下は、スタイルシートをオンラインでチェックできるツール「CSS Lint」で使用しているルールを意訳したものです。 スタイルシートの記述で気をつけたい19のポイント スタイルシートの記述ミスはしない これは一番大切なことです。 1文字でもタイプミスをしないようにしましょう。 隣接クラスは避ける 「.foo.bar」のような隣接クラスはIE6などでサポートしてないので、使用には注意してください。 空のルールを残しておかない 空のルールとはプロパティを指定していないものです。 .foo {} これは単にファイルの容量を肥大化させるだけなので、削除します。 display使用時のプロパティに注意 スタイルシートではプロパティのグループを一緒に定義することができますが、displayを使用する際には下記のものがそれぞれ無視されます。 di
「少しの手間で大きく変わる、細部にこだわったWebデザイン」を、CSSで。 | Ginpen.com
元ネタはこちら： 少しの手間で大きく変わる、細部にこだわったWebデザインを | Webクリエイターボックス 【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを | Webクリエイターボックス 細部にこだわったWebデザインって？ ひと手間加えるだけでぐっと良くなる、という事で以下を提案しておられます。 グラデーションを加える 1pxのラインを加える シャドウを加える ノイズを加える レタープレス効果 元の記事の実践編では、Photoshopを使った画像加工で「実践」をしているのですが、同じ（ような）事をCSS3でやってみました。 デモ 先に完成品です。WebkitとFirefoxのみ。（IEでは、新しいものでも背景がちゃんと出ません。） 「少しの手間で大きく変わる、細部にこだわったWebデザイン」を、CSSで。 – jsdo.it – share JavaScript,
CSS3で実装されたボタンの総まとめ
利用も簡単にでき、スタイルシートの勉強にもなる、CSS3で実装されたボタンを紹介します。 ほとんどのものがclassを追加するだけで、簡単に利用できます。
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot Seperti yang kita pahami waktu ini ada sangat banyak permainan slot online paling sederhana yang dapat dimainkan dalam sekejap hanya cukup masuk di sana saja ojekslot terunggul. Di sini dapat ada sangat banyak bermacam permainan luar biasa yang pastinya dapat anda temukan dengan ringan. Beraneka permainan terbaik di sini dapat and
興味深いテクニックを多々取り入れているHTML5+CSS3のフレームワーク -Gridless
当サイトの記事でも取り上げている数々のテクニックを取り入れている、IE6/7にも対応したHTML5+CSS3ベースのフレームワークを紹介します。 Gridless [ad#ad-2] Gridlessの主な特徴 CSSでユーザーのスクリーンサイズに最適なレイアウトを実現します。 参考：Media Queriesをしっかり身につけるチュートリアル クロスブラウザ対応（IE6/7も含む） CSS Resetには、Normalize CSSを使用。 参考：ブラウザのスタイルをリセットするスタイルシート -Normalize CSS 黄金比をベースにしたサイズと縦のリズムを使ったタイポグラフィ。 印刷時のスタイルをプリント時に最適化。 キャッシュの最適化。 HTML5+CSS3の採用。 安全なCSS Hack。 参考：IE9対応、IEの各バージョンごとに異なるスタイルシートを適用する方法のまとめ
画像の指定箇所からグラデーションを抽出し、スタイルシートを生成するオンラインツール -Gradient-Scanner
手元の画像やオンラインの画像から、このグラデーションいいな、という箇所を抽出し、CSS3 グラデーションのスタイルシートを生成するオンラインツールを紹介します。 Gradient-Scanner [ad#ad-2] Gradient-Scannerの使い方は簡単です。 まず、画像を「Browse」ボタンをクリックしてアップロードします。 ※画像は手元の画像だけでなく、URLでも指定できます。
[CSS]divなど余計なものを使用しないで、レイアウトをセンターに配置するテクニック | コリス
「<div id="wrapper">」などのラッパーを使用しないで、レイアウトをセンターに配置するスタイルシートを紹介します。 デモページ ※スタイルにCSS3を使用しているため、この版はIE6には対応していません。後ほど紹介するシンプル版はIE6に対応しています。 「<div id="wrapper">」を使用しないでレイアウトをセンターに配置するスタイルシート 元記事ではスタディが段階ごとに紹介されていますが、ここではその最終段階を紹介します。 CSS：シンプル版 <!DOCTYPE html> <style> html{overflow: hidden; height: 100%; background: #c72;} body{overflow: auto; height: 100%; width: 600px; margin: 0 auto; /* center */ padd
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Gradient Background Maker
アイコン付きの分かりやすいボタンをCSS3で実装するサンプル:phpspot開発日誌
Av-jyo.com
IDEA * IDEA
