W3C CSS 検証サービスValidate by URI Enter the URI of a document (HTML with CSS or CSS only) you would like validated: Address: More Options
Understanding the CSS Specifications
You don't need to be a programmer or a CS major to understand the CSS specifications. You don't need to be over 18 or have a Bachelor's degree. You just need to be very pedantic, very persistent, and very thorough. A specification is not a manual. There is no excuse for badly written prose and please complain if you find some. But specs do target a specific audience. Starting from Zero J. David Ei
CSSリセットの新しい考え方、リセットと有用なコンポーネントだけのスタイルシート -Shoelace.css
レイアウトにfloatを使用していた頃はグリッドを構築するために、複雑なHTMLやテクニックが必要になることがありました。しかし、flexboxやCSS Gridの登場で、レスポンシブ対応の柔軟なグリッドを簡単に利用できるようになりました。 そんな時代に合わせて、グリッドは無し、有用なコンポーネントが簡単に利用できるリセット用のスタイルシートを紹介します。 Shoelace.css Shoelace.css -GitHub Shoelace.cssの特徴 Shoelace.cssの使い方 Shoelace.cssのデモ Shoelace.cssの特徴 グリッドはflexboxやCSS Grid、またBootstrapなどを利用し、プロジェクトにあったデザインでコンポーネントを作成することができます。 Shoelace.cssはフレームワークではなく、有用なコンポーネントが含まれたCSSリセ
水平型リストで画像を並べた時の隙間を消す6つの方法｜web bibo
display:inline;を指定して水平に並べた場合、要素と要素の間に隙間が生じます。 これは空白類文字といって、ソースコード内の改行は半角スペースくらいの空白に変換するそうです。 XHTML&CSSを記述 li { display: inline; } <ul> <li><img src="/images/tips/h_list_space_01.png" alt="HTML" /></li> <li><img src="/images/tips/h_list_space_02.png" alt="CSS" /></li> <li><img src="/images/tips/h_list_space_03.png" alt="JavaScript" /></li> <li><img src="/images/tips/h_list_space_04.png" alt="PHP" /
コーディング規約を作ろう
コーディング規約を作ろうコーディング規約やスタイルガイドは、HTMLやCSSのマークアップや、各種プログラミング言語の書き方をまとめたものです。コーディングスタンダードやコーディングガイドラインとも呼ばれますね。コーディング規約を決めていなかったり、あいまいにしたまま進めていくと、書式が統一されていないため、コードを追加すればするほどゴチャゴチャしたコードになりがちです。チームでコーディングしていくならなおさら。今回チーム用のコーディング規約を見直すことになったので、その時感じた抑えておくべきポイントをまとめてみます。 コーディング規約に含むべき項目ディレクトリー階層ファイルを保存するフォルダーの階層や、そのフォルダーの名前を決めておきます。画像を格納しているフォルダーを例にあげても、「image」「images」「img」などの名前が考えられます。人によってつけるフォルダーの名前が変わっ
ひとりでWeb制作できた！「知識０から学ぶ」すごいスライドやサイト２７
作成：2013/07/22 更新：2014/11/01 Web制作 > 先日、お客さんのところへ提案にいったところ、「サイトを自分でも作りたいので定期的に講習会を開いて欲しい。Wordしか分からない。」と言われました。とはいっても、自分である程度、継続して勉強しておかないと、受講する人は2回目以降の受講内容を理解出来ないし、教える人も基本知識をしっかり身につけておかないと、質問に答えることもできません。 今回はWeb製作をするなら必ず抑えるべきこと、知識「０」から学ぶ、基本的な知識を習得できるスライド・サービス・サイトをまとめました。ディレクションにもOK。メジャーなもの中心です。とはいえ量が膨大になったので、必要な部分だけピックアップして学びましょう。※スライドがないものに関しては、お役立ちリンクをつけてます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ
ul・ol・li要素の備忘録 - NxWorld
かなり今さら感はありますけど、ul・ol・li要素関連の備忘録です。 対応ブラウザ（特に一部のIEで未対応）とかそもそも使う場面がそんなにないとかの理由で使用頻度がかなり低いと思うのもありますが、低いからこそ使おうと思ったときにパッと思い浮かばなそうなので書き残しておきます。 list-style-type リストマーカーの種類を指定するプロパティlist-style-typeのメモです。 使用頻度が高いと思うのはulやolにデフォルトで設定されているdiscやdecimal辺りかと思いますが、他にもいろいろあるのと一部のブラウザでは未対応などあるので、パッと確認したいときのために一覧にしました。 画像はWin7 Chromeでの表示をキャプチャしたもの。 ChromeやFirefoxといったブラウザでは上記のように問題なく表示されますが、IEでは一部のマーカーが対応していない場合がありま
外部CSSをインラインCSSに変換 | EC店舗の売上UP！運営情報満載の会員登録無料、ECポータルサイト！ECプロ
今回は、外部CSSをインラインCSSに変換するツールについて紹介します。 以前「CSSとは？」で紹介したように、CSSの定義場所としては、 １．外部ファイルによるスタイル設定 ２．head要素内のstyle要素で指定 ３．インラインstyle属性で指定 の３つの方法がありました。 基本的には、「１．外部ファイルによるスタイル設定」を使用されているページがほとんどですが、HTMLメルマガや、Yahooショッピング店舗ページ作成などには、どうしても「３．インラインstyle属性で指定」の方法を使用しないといけない場合があります。 すでに「１．外部ファイルによるスタイル設定」「２．head要素内のstyle要素で指定」の方法で作成されたページをHTMLメルマガやYahooショッピング店舗ページに使用する場合、これらのCSSをインラインCSSとして設定しなおすのはかなり大変な作業となりま
[CSS]パーセントで指定された正確なサイズが不明な要素を天地左右の中央に配置するスタイルシートのテクニック
天地左右の中央に配置したい要素のサイズが幅も高さもピクセルで指定されていれば、marginやpaddingで簡単に配置できますが、サイズ指定にパーセントを使用した要素だと表示サイズに依存されてサイズが分かりません。 そんなパーセントで指定されたピクセルでの正確なサイズが不明な要素を天地左右の中央に配置するスタイルシートのテクニックを紹介します。 デモページ：幅780pxで表示 HTML HTMLはシンプルで、中央に配置するdiv要素だけです。 <body> <div>Percentage sized and still centered.</div> </body> CSS ぱっと思いつく方法としてはパーセントをネガティブマージンで使えばいいのでは、となるところですが、ネガティブマージンを使用すると左右の中央はできますが、天地の中央がうまくいきません。 ここではネガティブマージンではなく、
floatを解除する手法のclearfix と 次世代のレイアウトの話
floatを解除する手法のclearfix と 次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくな
[JS]納品前の確認に最適、使用されていないCSSのセレクタを見つけ出すスクリプト -Helium
ウェブサイトの多数のページ全体に渡り、スタイルシートで定義されたセレクタが使用されているかどうかチェックし、使われていないセレクタのレポートを生成するスクリプトを紹介します。 納品する際に、不要なセレクタを除去するのに役立ちますよ。 Helium -GitHub Heliumの準備 Heliumの使用方法 Heliumの準備 HeliumはjQueryなど他のスクリプトを必要せず動作し、URLのリストから全てのページをロードし、解析して、スタイルシートで見つけたセレクタが全ページで使用されているかどうかチェックし、レポートを作成します。 スクリプトは、開発環境で実行してください。 公開中のサイトで実行すると、ユーザーにもHeliumの動作が見えてしまいます。 Step 1: 外部ファイル テストするページの全てに、当スクリプトを外部ファイルとして記述します。 場所は、head内でも</bo
使えるとレスポンシブWebデザインに便利なCSS
デフォルトのボックスモデルではwidth、heightの値にはpaddingとborderの値を含みませんが、box-sizingプロパティの値にborder-boxを指定すると、widthとheightの値はpaddingとborderの幅を含むようになります。 #box-sizing{ -moz-box-sizing: border-box; box-sizing: border-box; } 特にコンテンツの幅を指定するときや、Fluid Grid Systemを作成するときに計算が簡単になります。 例えば以下の図のような4カラムのGrid Systemで2カラム分の相対幅を求めるとします。 デフォルトの場合2カラム分の幅は60px×2+20px=140px、全体の幅は320pxとなるので、140÷320×100=43.75%となります。これにmarginやpaddingでガターの幅
[CSS]コピペで簡単に使える、パネルの表と裏をくるっと水平・垂直にひっくり返すスタイルシート -CSS Flip Boards
パネルをホバーすると、表と裏がくるっとアニメーションで変わるスタイルシートを紹介します。 くるっとなるのは水平だけでなく、垂直にも対応しています。 上：垂直くるっ、下：水平くるっ CSS Flip Boardsの実装 くるっとなるのはスタイルシートのエフェクトで、スクリプトは使用されていません。 Step 1: HTML 表・裏のパネル2枚をそれぞれdiv要素にし、それらを2つのdivで内包します。 垂直にはtop、水平にはleftを指定します。 垂直にくるっ <div class="flip-boards"> <div class="board top"> <div class="front"><h2>パネル：表</h2></div> <div class="flipped"><h2>パネル：裏</h2></div> </div> </div> 水平にくるっ <div class="fl
[CSS]ページが長くても、ページ全体を角丸のボーダーで囲むスタイルシートのテクニック | コリス
ページ全体を角丸のボーダーで囲み、そのページがスクロールするくらい長くても全体を囲むスタイルシートのテクニックを紹介します。 Body Border, Rounded Inside Step 1: ページ全体を角丸で囲む（スクロール非対応） Step 2: ページ全体を角丸で囲む（スクロール対応） Step 3: ページ全体を角丸で囲む（スクロールバーを変更） Step 1: ページ全体を角丸で囲む（スクロール非対応） まずはシンプルなスタイルシートで、ページ全体を角丸のボーダーで囲んでみましょう。 基本的な考え方は、body要素にborder-imageを使い、4つの角を角丸にします。使用するのは下記の画像です。 角丸用の画像 コードを見てみましょう。 HTML HTMLは、bodyだけで構いません。 <body> <h1>Rounded inside body border</h1>
CSSプロパティの継承：inherit - MOL
最近のスマホサイトとかコーディングしてると上記のようなリストビューのコンポーネントをよくマークアップする。リストのひとつの項目全体がタップエリアで遷移したりアクションしたりする。 これをコーディングするとなると、ul > li > aでaをBlock要素にすると思う。そのとき、上記の普通のテキスト文もリンクテキストになってしまって、いわゆる青色の下線テキストリンクのようなスタイルになってしまう。
CSSだけで作る動きのあるドロップダウンメニュー
では、HTMLから解説していきます。 HTML <ul id="dropmenu"> <li><a href="#">メニュー</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">メニュー</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">メ
【CSS】画像を上下中央に表示する（IE7以下にも対応させる） | バシャログ。
娘が小学二年生になり、みまもりケータイ2を買い与えました ishida です。 娘がケータイのボタンを押すたびに、位置情報が送られてきて便利なのですが、 電話をかけたときにも、位置情報がメールで送られてきてちょっと通知頻度高すぎなんじゃね？ さてさて、今回はとある案件で画像を上下中央に表示する機会がありまして、 忘れないように自分的メモです。 CSS3が使えるようになってからは、display: table-cell; で簡単に対応できるようになりましたよね。 例としては、こんな感じ。 HTML/CSSコードサンプル <div class="box"> <p class="image"><img src="image.png" alt="" width="200" heigh="200"><p> </div> .box { display: table; } .box .image { d
[CSS]画像のロールオーバーにフェード効果を与える方法の理想と現実
CSSスプライトを使用した画像のロールオーバーにアニメーションでフェード効果を与える際の、妥当な実装方法、理想の実装方法、現実の実装方法を紹介します。 Fade Image Into Another (within a Sprite) デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 最初の方法：妥当 二番目の方法：理想 三番目の方法：現実 デモでは、上から順番に実装されています。 最初の方法：妥当 HTML 元のエレメント内にspanを一つ配置します。確かにこれは余分のマークアップと感じるかもしれませんが、spanを使用せずに疑似要素を使用すると対応ブラウザが限られてしまうのが現状です。 <a href="#" class="arrow">Arrow<span></span></a> 矢印画像はテキストを画像に置換して配置します。 .arrow { display:
jQuery/CSS3で雲をゆらゆらさせる
jQuery/CSS3で雲をゆらゆらさせる 雲の画像を背景に設定してゆらゆらさせてみました。 jQueryバージョンとCSS3バージョンでお送りいたします。 投稿日2013年03月29日 更新日2013年03月29日 はじめに雲の画像を用意します。 パララックス的にした方がクールだと思ったので大きい画像と小さい画像を作成しました。 わかりやすいように背景がブルーになっていますが、実際は透過pngです。 ちなみに雲の素材はこちらの素材サイト様からお借りいたしました。 商用フリーで使える影絵素材サイト シルエットデザイン jQueryバージョン 最初はjQueryバージョンです。 画像が2つあるのでdivを2つ作成して適当なidを割り当てます。 html <div id="main-img"><div id="bg"></div></div> CSSはそれぞれのdivに作成した画像を「back
quusookagaku.com - quusookagaku リソースおよび情報
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.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
