float段組の基本
簡単なfloatの段組練習です。慣れて来たら、いろいろ応用してみて下さい。 注）floatを指定する場合はwidth指定で幅を指定するように心掛けましょう！ ボックスを並べる boxAとboxBを左右に並べます。形式上boxの幅と高さを指定しています。（本来の段組では、高さを指定する事はあまりありません。） パターン１ float:left;を指定してboxBを回り込ませます。 #boxA { width:200px;height:100px;float:left; } #boxB { width:200px;height:100px;float:left; } パターン２ boxAにfloat:left;を指定、boxBにfloat:right;を指定。 #boxA { width:200px;height:100px;float:left; } #boxB { width:200px;
Bootstrap 3正式版がリリース。モバイルファースト、レスポンシブ、フラットデザインなどを採用
複雑なCSSを自分で書かなくてもHTMLのマークアップで簡単に美しい比率のグリッドレイアウトを構成でき、分かりやすいボタン、パンくずリスト、メニューなどのWebページを記述できるCSSフレームワーク、「Bootstrap」の最新版「Bootstrap 3」が公開されました。 Bootstrap 3ではモバイルファーストを意識したデザインとなり、ボタンやメニューなどはフラットデザインを採用。 公開されのは現地時間8月19日で、Bootstrapの2周年にあたる日でした。 Bootstrap 3のテンプレート例 下記はBootstrap 3ではさまざまなテンプレートがの用意されていますが、下記もそのテンプレートの1つ。
これは衝撃的！CSS開発を爆速化する「Emmet LiveStyle」:phpspot開発日誌
Emmet LiveStyle ? live bi-directional CSS edit of new generation CSS開発を爆速化する「Emmet LiveStyle」。 ブラウザのDOMインスペクタの方でCSSを修正するとSublimeTextに反映され、またSublimeTextを編集するとブラウザに即反映されるというプラグインです。 ブラウザで編集しちゃえば簡単にカスタマイズはできるけど、テキストエディタにコピーが必要で、逆にテキストエディタで書くのもブラウザのリロードが必要といった具合に手間がかかりますが、その手間がなくなります 更に、複数のブラウザウィンドウに即座に反映されるため、横幅を小さくしたブラウザ、通常のブラウザを開けば、レスポンシブデザインのプレビューが同時に終わります。 片方のブラウザのDOMインスペクタでCSSをカスタマイズしてももう一方のブラウザ
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
レスポンシブ・ウェブデザインでの CSS コードの書き方 | Yomotsu net
いわゆるレスポンシブ・ウェブデザイン、つまりメディアクエリーを採用した Web サイトを構築する際の一番管理しやすいと感じるコードの書き方をまとめました。ただし、あくまでも個人的な、経験から感じた意見ですので絶対ではありません。 CSS のコードの配置広く知られている方法はいくつかあります。 CSS ファイル自体を分ける方法 @media 規則で 1ファイル内にメディア特性単位に書く方法 @media 規則で 1ファイル内にパーツ単位で書く方法 それぞれをコードで表すなら以下の書き方が該当します。 方法1 : CSS ファイル自体を分ける方法この方法は管理が大変でおすすめできません。これでファイルごとコード分割されてしまったらコード検索しづらいわけです。 <link rel="stylesheet" href="desktop.css" media="(min-width:769px)">
Google HTML/CSS Style Guide
Revision 2.1 This style guide contains many details that are initially hidden from view. They are marked by the triangle icon, which you see here on your left. Click it now. You should see “Hooray” appear below. Hooray! Now you know you can expand points to get more details. Alternatively, there’s a “toggle all” at the top of this document. This document defines formatting and style rules for HTML
無駄なdiv要素やclassだらけのマークアップから卒業する方法
グリッドベースのレイアウトを作成すると、ついついdiv要素を多用してしまいがちですが、意味のあるデータにはそれに適した要素を使用し、無駄なdiv要素やclassだらけのマークアップから卒業する方法をWebdesigner Depotから紹介します。 Fight Div-itis and Class-itis With the 960 Grid System 下記は各ポイントを意訳したものです。 はじめに CSSのフレームワーク：960.gsの場合 classの乱用を避ける リスト要素の使用 画像とキャプションの使用 複数の見出しとパラグラフの使用 子要素のclassは親要素に はじめに 数年前までウェブページの設計はテーブルがスタンダードでした。そしてCSSはそれを大きく変え、今日ではCSSのフレームワークがウェブページの設計を容易にしてくれています。 しかしながら、このCSSのフレームワ
[CSS]ネガティブマージンの理解を深め、活用するテクニック集
スタイルシートのmarginで使用する「ネガティブマージン（マイナスマージン）」について理解しておくべきこと、ネガティブマージンを使用したテクニックなどをSmashing Magazineから紹介します。 The Definitive Guide to Using Negative Margins 1. ネガティブマージンの理解 2. ネガティブマージンの使い方 3. ネガティブマージンのテクニック集 4. ネガティブマージンのバグフィックス 5. 終わりに 1. ネガティブマージンの理解 スタイルシートを使用する際、必ずといっていいほどマージンを使用するでしょう。しかし、ネガティブマージンになると意見は分かれ、それは悪魔の仕事であると考える人たちもいます。 ネガティブマージンをは、例えばこういうのです。
ウノウラボ Unoh Labs: デザインセンスの無い人がwebサイトを作成する際に参考にしているサイト
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
ブログテンプレート作成ツールで簡単ブログデザイン！ - CSSEZ
Cssez : ผลบอล บอลวันนี้ วิเคราะห์บอล ข่าวฟุตบอล เราคือผู้นำของเว็บดูผลบอลสดออนไลน์ ผลบอลสดภาษาไทย 7m ข่าวฟุตบอล สรุปผลบอล ไฮไลท์ ที่สามารถเช็คผลบอลทั่วโลก มีทั้งภาษาไทย Livescore 7m 888 ผลบอลมีเสียงวันนี้ล่าสุด พรุ่งนี้ หรือเมื่อคืน รวบรวมเว็บผลบอลต่างๆมากมายมารวมไว้ที่เดียวเช่น livescore.com 7m.cn 888scoreonline.com thscore.cc และ spbo.com รวมทั้งมีวิเคราะห์บอล ตารางบอล คะแนนบอล และดูบอลสดออนไลน์
Webシステム開発者に送る便利なテンプレート·Web App Theme MOONGIFT
正直、Webデザインは苦手だ。システムは構築できても、その後のデザインで行き詰まって頓挫したサービスは数知れない。最近ではWebデザインテンプレートを使うようになったが、汎用性の低いものが多くカスタマイズも困難な場合が多い。 Basecampにも似たWebアプリケーションテンプレート 例えばWebシステムの管理画面を考えた場合、ユーザ向けの画面は気合いが入っているのに管理画面は酷いものが多い。そこで使ってみたいのがWeb App Themeだ。 今回紹介するオープンソース・ソフトウェアはWeb App Theme、テーマにも対応した汎用的テンプレートだ。 Web App ThemeはLighthouse、Basecamp、RadiantCMSにインスパイアされたWebアプリケーション向けテンプレートだ。右上のユーザ情報、タブを使った機能の振り分け、個別のタブの中にさらにセカンダリーのタブを
もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記： この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
AptanaでWebページ作成はここまでできる！（1/3） ― ＠IT
AptanaでWebページ作成はここまでできる！：どこまでできる？ 無料ツールでWebサイト作成（1）（1/3 ページ） 以前、無償版のWebオーサリング（サイト作成）ツールを特集でカタログ的に紹介したが、皆さまの興味は「業務レベルでどの程度使えるのか」という部分にあるのではないだろうか？ そこで、本連載では各ツールを使用したサイト開発を掘り下げていこう。 まずは第1弾として、2回にわたり「Aptana」の紹介を進めていく。第1回では静的なサイト構築を想定した開発、第2回ではプラグインの追加により可能となるAdobe AIRなどの動的コンテンツ開発を中心に紹介していこう。 無料Webサイト作成ツールの最有力候補「Aptana」 EclipseベースのIDE（統合開発環境）であるAptanaは、コード補完機能やリファレンス機能など、充実度の高さが売りのオーサリングツールである。 オープンソー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レスポンシブ対応のサイト構造作成用の軽量CSSフレームワーク「Layers CSS」:phpspot開発日誌
//// COLOURlovers :: loving colours since 1981
[CSS]CSS3で何ができるの？ という時にみておきたいサイト集
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。