Bootflat
BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.3.0 CSS framework. And, for the designers, we offer a free PSD Download. It provides a faster, easier and less repetitive way for web developers or designers to create elegant web apps. Compatible Browsers: IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome. Download (Version 2.0.4) MIT Licensed - Version 2.0.4 Learn more Designed for e
Bootstrap テンプレートは使うべきではないと思う - ボクココ
最近のはてぶITカテゴリーにしょっちゅう出てくるデザイナー向けBootstrap テンプレート。ペラ１のサイトのコードとDEMOが付随しているので文言を変えるだけで簡単にクールなwebサイトを作ることができる。例えばこんなまとめサイト。 商用も無料！Bootstrapをベースに最近のトレンドを取り入れた新作テンプレートのまとめ | コリス 読んだ人はきっと、「今後作るときはこういうのですぐ作れればいっか！」みたいな感じではてぶ登録するんだろうけど、実際にやってみた身としては逆に効率が悪くなった。なのでこういうのは使うべきではないと思っている。 その唯一の理由。 ちょっと変えるのが大変 最も大きな理由はこれ。自分でCSSを組み立ててないのでどんなCSS設計になっているかを理解するのに時間がかかり、逆に時間が取られるというオチ。 数ページ分くらいなら自分で一から組み立てていったほうが早かったと
HTML5/CSS3で作るスマートフォンサイトの基本 (1/5)
スマートフォンサイトのサイト設計、画面設計に続き、今回はデザインとHTML/CSSの制作です。前回作成したワイヤーフレームをもとにデザインカンプを作成し、HTML/CSSをコーディングしていきます。 Photoshopでデザインカンプを作成する 最初に、グラフィックソフトを利用してデザインカンプを作成します。今回はPhotoshop CS5を使いましたが、FireworksやIllustratorなど使い慣れたツールで構いません。 デザインにあたっては、スマートフォンのブラウザーの画面領域を定義したテンプレートを用意してからデザインパーツを作成、配置していきます。画面領域はサイズを測ってガイドを引いてもよいですが、本連載の第5回で紹介したデザインテンプレートを利用するのが手軽です。
iPadやiPhoneなど、デバイスごとに最適化したCSSを読み込む Media Queries
iPhoneとかiPadとか、デバイスに応じて最適化する @tee_suzuki さんに、Media Queries なる実装が存在すると聞いて、早速トライしてみました。Media Queries自体はCSS3の実装の一環のようです。media属性の中に、デバイスの種類や解像度、向きなどの条件文を記述することで、適用するCSSを分岐させる仕組み。 こんな感じのものをheader要素へ width: 〜480pxの端末のときには iphone.css width: 481〜1024の端末が縦（portrait）のときには ipad-portrait.css width: 481〜1024の端末が横（landscape）のときには ipad-landscape.css width: 1025〜の端末のときにはpc.css Media Queries デモ ためしに、Media Queriesを
CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ
Webデザインをするときに、必ず使うスタイルシート。思うようなレイアウトを作るために、チェックしておきたいブロックレベル要素や、インライン要素のクセみたいなのをまとめてみました。後半はスタイルが反映されない原因のひとつ、スタイルの優先順位についてです。 Attention 記事公開時からいろいろと勉強して、この記事内で紹介している事柄で、間違った解釈をしていたなーと気がつきました。 この記事の中でいくつか追記してありますが、詳しくは、新しく書いた 11月7日の記事：CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ を読んでみてくださいね！ New Post Webサイトをデザイン、レイアウトするのに欠かせないのが CSS（Cascading Style Sheets、スタイルシート）ですね！今では CSS3 が話題を集めていて、CS
必見！携帯サイトをお手軽にiPhoneやスマートフォンに対応させる方法 - 適当な日々
フリーランスでwebの仕事をしながらwebサービスとかを作ったり作らなかったり、成長と挫折の記録・・・かもしれないiPhoneの登場でスマートフォンで閲覧しやすいサイトの需要が高まってきたようです。 でもわざわざiPhoneやスマートフォン向けにサイトを作るのは大変・・・。 そんな方に、今までに制作したモバイルサイトをスマートフォン対応させる方法があります。 しかも5分でお手軽にできます！ htmlとCSSで解決する方法なのですが、実はこの方法を使うだけで開発もしやすくなる優れものです。 論より証拠ということで、まずはこちらをご覧ください。 （PCからでもオッケーです。htmlはこちらの記事で作成したものを使ってます。） まず、こちらが普通に作成したモバイルサイト→before そしてこれがその方法を使ったもの→after やっていることは閲覧しているブラウザに応じて、3つの
『FirefoxやChrome、Safariのみに適用させるCSSハックの方法』
本を買わずに解決するWeb制作の小技 ホームページ作成でちょっとしたことを参考書を買わずに解決する方法をPHP CSS Webデザイン jQuery Flashを中心に便利な技をまとめていきます！現在、長野県長野市の制作会社でWeb作成中！ コリスさんのブログにCSSのハック集が紹介されていたのでメモ 主要ブラウザの特定ブラウザのみに有効なCSSハック集 元ネタのサイトです。英語になってます。 Documenting the Hacks: CSS Browser Targeting 特定のブラウザのみに有効にする方法はけっこう知らなかったので 今後使わせてもらいます 特にクロームやFirefox2、Firefox3のみに使いたいときとか便利ですね。 自分用に一部引用です。 Safari 3.1 and Google Chromeのみ有効body:nth-of-type(1) #select
IE6/IE7/IE8/IE9のCSSハック
IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハックです。IE9はまだベータ版なので有効にならなくなるかもしれませんがとりあえず。 →IE9も正式版で確認済みです。 １．IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハック 以下の順番でプロパティおよびセレクタを記述してください。 body { color: red; /* all browsers, of course */ color: green¥9; /* IE8 and below */ *color: yellow; /* IE7 and below */ _color: orange; /* IE6 */ } body:not(:target) { color: black¥9; /* IE9 */ } IE6：プロパティの先頭にアンダースコア「_」を付与 IE7：プロパティの先頭にアスタリスク
なんとなくCSSを使っている人が，CSS中級者になるために （「崩れないレイアウト」のセオリー） - 主に言語とシステム開発に関して
CSSを「なんとなく」知っていて，「なんとなく」使っている， というケースがある。 そういう場合，思わぬところでレイアウトが崩れ， 要素の正確なポジショニングができず， 「なんとなく」ずっと悩み続けることになる。 その原因は，CSSの中級のノウハウが足りない，という点にある。 一発で正確なレイアウトができるようになろう。 そうなれば，CSS中級者だ。 以下は，CSS中級者になるためのノウハウ。 （１） 要素の分類 （１−１） インライン要素とブロック要素 （１−２） 置換インライン要素と非置換インライン要素 （２） 正確なポジショニング （２−１） positionのrelative/absoluteの使い方 （２−２） DOCTYPEスイッチによるボックスモデルの解釈方法の違い （２−３） 要素内の高さ位置と，要素の高さ （２−４） floatの崩れない使い方 （３） 正確なテーブルレイ
Zen Codingの基本的な使い方 | Zen Coding 3-1 | HTML+CSSコーディングが10倍速くなるZen Coding
Zen Codingを使ってHTML/CSSコーディングするには、Zen Codingを導入した環境でそれぞれのHTML/CSSタグの「省略形」（Abberiviation）といわれる略語を入力し、「展開」を実行（［Expand Abberiviation］メニューを選択、あるいは ＋キーを押す※）します。入力した省略形を「展開」（Expand）すると、統合開発環境のスニペット（統合開発環境から短いプログラムコードを呼び出す機能）のように、一連のコードが生成されるしくみになっています。 省略形を覚えるのはたいへんだと思うかもしれませんが、1章で述べたとおり、すべてを覚える必要はありません。自分がよく使うタグの省略形だけを覚えればじゅうぶんです。 また、Zen Codingの省略形は、HTMLの場合はHTMLタグの名前の、CSSの場合はスタイル指定のためのプロパティ名の頭文字などになっていま
cssのdisplay:block
まず、HTMLの基本知識として要素の分類があります。 まっとうなマニュアルなら、イの一番に書かれています。 文書は要素(element)の集合体です。 文書を形成する要素にはブロック要素、行内要素があります。 CSSでは、テーブル要素、段落要素などさらに細かく種類があります。 マークアップするときは常に考えておくべきです。 要素はタグで囲んで示します。 <p>文章で<strong>ここは重要</strong></p> HTMLでは終わりのタグを省略できるものがあります。たとえば段落を示す<p>は内部に行内要素を持ちませんから、次にブロック要素などが出てくると</p>があるものとみなします。 それぞれの要素には何を含めることができて、なにを含められないかが決まっています。(常識範囲内ですが) <ul>には<li>以外含まれない <p>には、ブロック要素はもてない 仕様書にすべて書いてあります
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
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.
IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎
IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎 2011-06-04 Twitterなどを見てると、 「IE6がー！」とか 「IE6,7,8,9、Firefox、webkit系、Operaで同じレイアウトにするの大変」などのツイートをたまに見るので、クロスブラウザでも差が出にくく、効率の良くなるコーディングの基礎を紹介します。 気をつけるHTMLの記述方法 HTMLの記述方法を間違えていると、ブラウザCSSの解釈が変わってきます。 以下のようなことは基本的なことですが大切な事です。 DOCTYPEを書く。 HTMLの先頭にDOCTYPEを入れるようにして下さい。 DOCTYPEがないと、ブラウザ間での誤差が起こりやすい状態になります。 DOCTYPE スイッチについてのまとめと一覧表 (HTML 5 や IE 8 Beta 2 のモードスイッチなどの情報も含
ソースコード「唐辛子」
【使い方】 ソースコードを上のエディタに貼り付けて、画面下部のプログラミング言語を指定して、[変換]ボタンを押します。 すると、変換処理が行われ、プレビュー画面と、タグ付けされたHTMLが表示されます。 【対応言語】 JavaScript, XML/HTML, CSS, Adobe Flex(MXML), ActionScript2/3, BASIC(Visual Basic, VB.NET, VBA), PHP, Ruby 【ブログに貼り付けるとき】 ソースコードには、pre.code というスタイルが設定されます。 CSSタブにある、CSSファイル、あるいは、こちらにあるCSSをブログのサイトにアップして、ヘッダに次のような一行を追加します。 <link rel="stylesheet" type="text/css" href="source.css" /> 或いは、HTMLのSPA
FreeCSSTemplates.org is now FCT.co
FreeCSSTemplates.org has been rebranded to FCT. Therefore, our new domain will be FCT.co while our previous domain FreeCSSTemplates.org will always be kept redirected here. What happened to FreeCSSTemplates.org? As the domain FreeCSSTemplates.org was dedicated to just “Free CSS Templates“, we decided to expand our brand name by keeping the domain name short but with more topics to cover. That mean
トップページ | 短期間でCSSなどのウェブスキルを学ぶなら、allWebクリエイター塾
世界のフロンエンド技術を学ぶ UX、UI、レスポンシブWebデザインまで、最新のフロントエンド技術をトータルに学んでいただきます 世界のUX企業である「ノーマンニールセン」の資格を持つ講師から、UXの基本、UI設計、HTML5の基本からFlexboxなどの最新のレイアウトプロパティを利用したサイト制作技術を学ぶことができます。 制作効率を上げるツールやノウハウを提供 効率よく運用&構築するためのツール、チーム開発のためのコミュニケーションツールの利用方法も学べます 制作効率を上げるためのツール、バージョン管理ツール、現場の仕事がスムーズにできるコミュニティツールなど各種ツールを知ることができます。 インデックスされやすい、流入の多いサイト制作を学ぶ ユーザーニーズにリードできるサイト構築が学べます ユーザーリードを獲得しやすいリッチスニペットの導入、パフォーマンスの良いサイト制作など、Go
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Redirecting to Animate.css
Loading...
forked: Meteor Rain - jsdo.it - Share JavaScript, HTML5 and CSS
CSS Drive Gallery- Two columns