コーディングをさっと済ませるためのCSSテンプレート集 | CREAMU
コーディングはさっと済ませたい。 そんなあなたにおすすめなのが、『Blank Themes, Frameworks and Templates: Resources to Speed Up Your Development Time』。コーディングをさっと済ませるためのCSSテンプレート集だ。 以下にいくつかご紹介。 ↑のキャプチャはDynamic Drive。2カラムや3カラム、固定幅、リキッドレイアウトなど、たくさんのCSSレイアウトを配布 » Code Sucks 90のフリーCSSレイアウト » Layout Gala 40のCSSレイアウト » CSS Creator 幅や背景色などを指定してXHTMLソースが生成できる » Whiteboard フリーのワードプレステーマフレームワーク » Yet Another Multi-Column Layout モダンで拡張性のあるレイ
XHTMLの書き方と留意点
class="abstract" itemprop="http://purl.org/dc/terms/abstract"ひろく普及したHTMLの資産を生かしつつ、より強力で応用範囲の広いXMLの技術をWebに取り込むために、HTML 4.01と互換性を持つ新しいマークアップ言語XHTML 1.0が勧告されました。次の世代に備えるための、いくつかのポイントをご紹介します。 XHTMLとは XHTMLの基本形 HTMLとの互換性について 従来のHTMLをXHTMLに変換するための若干のヒント XHTMLとは 2000年1月26日にW3Cの勧告となったXHTML（Extensible HyperText Markup Language）[XHTML10]は、素朴な文書構造記述言語として発展してきた（あるいは混乱してきた）HTMLに、XML[XML1]の持つ柔軟性、拡張性を取り入れたものです。H
ブロックレベル要素とインライン要素
HTMLでは多くの要素タイプが定義されていますが、そのうちbody要素の中で使われるものは、大きく「ブロックレベル要素」と「インライン要素」に分けることができます。 ブロックレベル要素 ブロックレベル要素は見出し、段落など文書を構成する基本要素となるものです。ブロックレベル要素の内容モデルには、別のブロック要素やインライン要素を含むことができますが、逆にインライン要素の中にブロックレベル要素を置くことはできません。 ＊ブロックレベルに属する要素タイプでも、p要素タイプのように内容モデルにはインライン要素しか持てないもの、pre要素タイプのようにさらに内容が限定されるもの、hr要素タイプのように内容を持たないものもあります。 ブロックレベル要素は、ブラウザでの表示に際してもひとつの「ブロック（通常改行を伴う表示上のまとまり）」として扱われます。ブロックの間に空行を置くかどうかは、仕様書には定
CSSハック一覧
2013年3月23日 CSS 異なるブラウザーで見たらレイアウトが崩れる。。CSSハックはそんな時のお役立ち裏技（？）です。私がブックマークしているCSSハックに関するWebサイトがたくさんあったので（Safariがのってない・IE8しかのってない。。等の理由で）、自分用メモ。「こんなやり方もある！」というのがあればコメントして教えてください！ ↑私が10年以上利用している会計ソフト！ Internet Explorer IE6以下 #help_me { _color: blue; } * html #help_me { color: red; } IE7 *:first-child+html #help_me { color: red; } *+html #help_me { color: red; } IE6, IE7 #help_me { /color: blue; } IE8 #h
XHTML入門 - とほほのWWW入門
今更、HTML から XHTML に移行するのは無理がありすぎたのか、XHTML は廃止の方向となりました。詳細は HTML Living Standard の歴史を参照してください。(2018.1.7) XHTML（eXtensible HyperText Markup Language）は、HTML を XML（eXtensible Markup Language）の仕様に準拠するように再定義したものです。HTML と XML は共に SGML（Standard Generalsed Markup Language）をベースとしていますが、XML が SGML の正統なサブセットであるのに対し、HTML は SGML の亜流とも言えます。そこで、亜流の HTML を正統派の XML に従った形式に再定義したものが XHTML です。 以下に、XHTML 1.0 の記述例を示します。 <
CSS3の角丸+グラデーションを簡単に作成できるジェネレータ「CSS Corners」*二十歳街道まっしぐら（FC2ブログ時代）
「CSS Corners」は角丸ボタンを作成できるジェネレータです。 CSS3でコードをはいてくれますよ。 角丸の大きさやグラデーション、ボタン全体の大きさが設定できます。 簡単に角丸ボタンが作成でき、さらにCSS3でコードを出してくれるところが便利ですね。 以下に使ってみた様子を載せておきます。 まず「CSS Corners」にアクセスします。 サイト全体はこんな感じ。 真ん中にボタンのプレビューがあります。設定を変更する度に更新されます。 下の灰色部分にCSS3のコードがはきだされますよ。 角丸ボタンを作ってみました。 こんな感じ。 プレビューがとっても便利で、細かい調整などにもってこいです。 CSS3で角丸が表現できるようになって、画像を作成しなくてもよくなりましたね～。 今後いろんな場面で使えそうなのでチェックしておきたいです。 （本記事で紹介したサイト：CSS Corners）
代表的な12のCSSレイアウトテンプレートを配布する「Nice and Free CSS Templates」
ものすごくシンプルで無駄を削ぎ落としたCSSレイアウトテンプレートサイト「Nice and Free CSS Templates」を紹介したいと思います。ゴチャゴチャしたメニューは一切無く、サイトにアクセスすると12の代表的なCSSのレイアウトサムネイルが並んでいます。 テンプレートは1カラムから3カラム、4カラムと標準的なものはもちろん。中央表示なんかもありました。 詳しくは以下 サムネイルをクリックすると上記のようにそのレイアウトでCSSが表示されるようになっていて各パーツの所にCSSが表示されるようになっていますので、直感的にどのCSSがどんな役割を果たしているのかがわかりやすくなっています。スタンダードなものが多いだけにコードもシンプルでカスタマイズもしやすいかと思います。新しいサイトを作る時にはかなり役立ちそうです。 スタンダードのページを作ろうと思っている方は是非チェックしてみ
WEBデザイナーのためのフレームワーク30「30 Useful Frameworks for Designers」
TOP > WebDesign > WEBデザイナーのためのフレームワーク30「30 Useful Frameworks for Designers」 一から全てデザイン、制作することは精度も上がりますし、クリエイターとしては当たり前のことなのかもしれませんが、案件ベースで見て、予算や時間的な問題で、デザイン、設計などを全てオリジナルでこなそうと思うと無理がある案件もあるかと思います。そんな時に役立つのが今回紹介するWEBデザイナーのためのフレームワーク30「30 Useful Frameworks for Designers」です。 Simpl よく見るグリッドシステムから、シンプルなCSSのデザイン処理を集めたもの、wordpressのテンプレートを作るためのものなどなど、制作の負荷を軽減してくれる、様々なフレームワークがまとめられています。今日はその中から幾つか気になったもの
font-size指定 | d-spica
font-size指定 2007-03-10 0 0 XHTML/CSS CSS, font-size 数で合理的にデザインする - サイズ編 で少し書いたfont-sizeについての補足です。 どのくらいの文字サイズで見られているかは，ブラウザとその設定によってまちまちです。でも，せめてデフォルトの状態では意図したレイアウト，フォントサイズで見てもらいたい，という願いもないわけではありません。font-sizeの指定をどうするか，ちょっと考えてみました。 font-sizeは%で font-sizeをpx，pt，inなどで絶対指定すると，Win IEで文字サイズの変更が出来なくなるのをご存じの方も多いでしょう。文字サイズを固定してしまうのはアクセシビリティ上少々問題があります。font-sizeはem，ex，%で相対指定（基準になるものとの比率で指定）するのがよいとされています。 Win
[JS]Flashでもない、HTML5でもない、タイムラインベースの複雑なアニメーションを作成できるスクリプト -Mashi | コリス
ぱっと見た瞬間「Flashだな」と思ってしまったくらいの、Flashで実装したような複雑なアニメーションやムービーを作成できるスクリプトを紹介します。 使用するのはHTML, CSS, JavaScriptで、こういったものにありがちなHTML5, Canvas, CSS3には頼っていません。jQueryなど他のスクリプトにも依存していません。 ※CSS3のエフェクトなどオプションとして利用が可能です。 Mashiの主な特徴 スタンダードなHTML, CSS, JavaScriptでFlashのようなムービー、アニメーションを作成できます。(X)HTMLコンテンツに設置が簡単にできます。 41KB/13KB(CDN+GZip)と非常に軽量で、オブジェクト指向、モジュール式です。 基本的な利用では、追加のプラグインは必要ありません。 IE6をはじめ、すべての主要なブラウザをサポートしています
CSS Libraries, Code Snippets & Tutorials
Where HTML elements give a web page structure, CSS (Cascading Style Sheets) controls how those HTML elements are presented on that web page. A style sheet can be applied to any web page and makes it much easier to edit and manage the appearance and layout of a multi-page website. Here you will find collections of articles, tutorials, snippets, covering almost all areas of CSS, including flexbox, g
CSS+HTMLのみで実装出来る、クロスブラウザ対応のWebデザインテクニック集
cssやプログラミングcss × クロスブラウザ cssとHTMLタグのマークアップ のみで実装出来るテクニック集 です。クロスブラウザ対応のみ をcss-playから探したので、 ついでにご紹介します。 cssとHTMLタグのマークアップ のみで実装出来るテクニック集 です。クロスブラウザ対応のみ をcss-playから探したので、 ついでにご紹介します。 jsが使えない環境でデザインする機会があったのでメモがてらエントリー。css-playを中心に、あとはググったりSBMで探したり。マークアップはリンク先をご確認下さい。css-playはソースを。 シンプルなドロップダウンメニュー シンプルなドロップダウンメニューです。マルチレベルのメニューも可能。 demo 縦並びのフライアウトメニュー 横に出るフライアウトタイプ。画像を使用しています。 demo クロスブラウザ対応のグラデーション
ごちゃごちゃしたCSSを見やすく自動整形してくれるサイト「ProCSSor」*二十歳街道まっしぐら（FC2ブログ時代）
「ProCSSor」はごちゃごちゃしたCSSを自動整形してくれるサイトです。 自分の書いたCSSをみて、「あーごちゃごちゃしてて見にくいなぁ」て感じてる方には朗報！ CSSを貼りつけて、変換すると綺麗に整形されたCSSをはきだしてくれます。 無駄な改行やらも省いてくれるという気が利くサイトです。 以下に使ってみた様子を載せておきます。 まず「ProCSSor」にアクセスしましょう。 「ENTER OR COPY-PASTE YOUR CSS HERE」に整形したいCSSを貼りつけます。 「options」より、整形のルールを決めることができます。 「process」をクリックして、変換開始！ するとこのように整形されたCSSがはきだされます。 「download」からダウンロードできますよ。 この色付け、けっこう見やすいので、CSSを整形＋色付けしたいときにも使えそう。 やっぱり綺麗にコー
ウノウラボ Unoh Labs: IE6 CSS 『border-leftとpadding-bottom』の謎
こんばんは、sashaです。 次のような形のスタイルを実装しようとしていて、 実例 posted by (C)フォト蔵 IE5.5や6でこんな状況に出会ったことはありませんか？ （赤と青のボーダーは、elementの境目がわかりやすいように入れてあります） 実例バグ posted by (C)フォト蔵 どこがおかしいかお分かりになりますでしょうか。2項目目の赤と青で囲まれたテキストが、左に飛び出ていますね。その下にあるテキストまで、左にずれてます。 これは、多くのデザイナーの悩みの種である、「IE」の代表的なバグのひとつです。 このバグを再現させるのに必要なことはたったこれだけ。 「divの中にdiv」など、ブロック要素を2重にする 外側のブロック要素に、border-leftとpadding-bottomを定義する 以上。これだけでIEさんの地雷を踏めます。 以下のH
MdN Design｜総合情報サイト
第16回（最終回） 最新のデザイン表現を適用する ここまで紹介してきたCSSのレイアウトや装飾テクニックは、現在利用者の多いInternet Explorer 7や8、Safari、FirefoxなどのWebブラウザでほぼ問題なく動作するものでした。本連載の最終回は、未来に向けた準備として現在策定中の「CSS 3」の中からモダンブラウザで既に適用可能なスタイルをいくつか紹介します。 （公開日：2010年4月16日 解説：こもりまさあき） 現在策定中のCSS 3について CSSで指定したスタイル指示は、WebブラウザのCSSサポートの度合いによって適用できるかどうかが異なります。例えば、今現在の主流であるブラウザの多くではCSSレベル2（CSS 2）をサポートしているものがほとんどです（特定のプロパティだけ未サポートも含め）。その一方、現在CSSの次のバージョンにあたるCSSレベル3（CSS
CSSでフォームデザインをする際のチュートリアル:phpspot開発日誌
Stylize Forms With CSS - Webmonkey CSSでフォームデザインをする際のチュートリアル。 フォームデザインは、form, fieldset, legend, label なんかのタグが混じってきて複雑で、個人的にあまり得意ではありません。 今回紹介するページでは、マークアップとCSSが紹介されていて、フォームを記述、デザインする際の参考になります。 マークアップは以下。 <form action="#" class="myform"> <fieldset> <legend>Leave a Comment</legend> <ul> <li> <label for="name">Name:</label> <input id="name" /> </li> <li> <label for="email">Email:</label> <input id="em
SOYAGIMI NOTE 事業者のための情報発信メディア
Information to help businesses事業者に役立つ情報を総合的にお届けします こんにちは、SOYAGIMI Note を運営する株式会社SOYAGIMI 松永です。 このサイトは弊社顧客様のための情報提供、また様々な地域で活躍される事業者様のお役に立てる情報を発信するためのメディアです。 私たちも小規模な事業者ですので、比較的使える情報や経験をご紹介できると思います。 比較サイトなんか見ても、昨今事業者は軽く扱われがちですからね。 色んな情報やテクニックを持って、けっこう大変な時代を乗り越えていけたらいいなぁって。 Convenient tool use 便利なツールの使い方をご紹介 小規模で活動されていると、やはり人出が足りなくなるのが現状です。 しかしながら最近は無料で使えて、業務を効率化できるアプリも多数存在します。 そういったアプリの使い方などをまとめて、経
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
mi - Mac OS X 用テキストエディタ
IE6でのXML宣言の問題と回避方法 « BirDesign
http://e0166nt.com/blog-entry-594.html
