JavaScript スタイルシートサンプル集
border のプロパティを使って三角形を生成し、 :before擬似要素 / :after擬似要素で 対象要素内の先頭 / 末尾に、これを追加します。そして 見出し本体の適切な位置に配置して、リボンを表現します。 CSS リボン風見出し サンプル 容量1GB、月額125円、高性能なサーバが日本最大級のバックボーンに直結。 さくらのレンタルサーバ。 サンプルソース <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>リボンのような見出しをCSSで表示</title> <style> /* リボン風見出し 本体 */ .ribbonBox0{ position: relative; /* 相対配置（相対位置）*/ width: 440px; line-height: 26px; /* 行の高さ */ ma
[CSS]2012年最も人気のあったCSSリセットとどれを使えばいいかの指針、と上手に使うポイント
ブラウザのスタイルを初期化するCSSリセットの2012年に人気のあったものと、どのCSSリセットを使えばいいのか判断するポイント、CSSリセットを上手に使うポイントを紹介します。 CSS Reset 下記は各ポイントを意訳したものです。 2012年人気のあったCSSリセット どのCSSリセットを使うべきか判断するポイント CSSリセットを上手に使うポイント 2012年人気のあったCSS Reset まずは、2012年に人気のあったCSSリセット ベスト5！ CSS Reset経由で最もダウンロードされたものです。 Eric Meyer's "Reset CSS" 2.0 コードとドキュメント HTML5 Doctor CSS Reset コードとドキュメント Yahoo! (YUI 3) Reset CSS コードとドキュメント Universal Selector '*' Reset コ
もうCSS設計で悩まない！「CSSコーディング ガイドライン」策定のための参考記事・スライド 7選 / SQUEEZE - Web Design Studio -
構造やクラス名、プロパティの記述方法などをルール付ける「CSSコーディング ガイドライン」策定のための参考記事を紹介します。 チームでの共有、コーディング効率やメンテナンス性などの改善のためにも、これを機会にガイドラインを導入してみてはいかがでしょうか。 コーディング規約を作ろう"制作チームの規模が大きくなればなるほど、コードの統一性は大切" ▶ コーディング規約を作ろう Webクリエイターボックス コーディング規約を見直すうえで抑えておくべきポイントを紹介。 チェックポイントコーディング規約に含むべき項目 ・ディレクトリやファイルの階層・名前 ・記述順やインデント、単位などのフォーマット ・ID,classなどの命名規則 ・対応ブラウザー CSSガイドラインを翻訳してみた"多くの開発者が関わる場合、メンテナンス可能、コード見通し良く、拡張可能にするために統一された方法を用いることが重要"
[css] @importを使うべきでない理由
実は以前に別の場所でも書いたのですが、今回Google Page Speedの方でも少しだけ触れられていたので、改めてまとめ。 自分でも経験があることなのですが、開発をやっているとどうしても、構造をモジュール化して複数のファイルに分割して管理したくなります。 StyleSheetにおいても同様で、プレゼンテーション層のコンポーネントにあわせてCSSを用意し、ページ構成にあわせて取り込むようなことをやりたくなるでしょう。 しかしその際、@import構文を使うのはパフォーマンスと挙動の両方に有害である可能性が高いと、「」の著者としても知られるSteve Souders氏が警鐘を鳴らしています。 使うべきでないポイント @importは、大きく分けて2つの観点で「使うべきでない」とされています。 ひとつは、パフォーマンスの問題。StyleSheetはほぼ全ての主要ブラウザでパラレルロードがサポ
CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ
Webデザインをするときに、必ず使うスタイルシート。思うようなレイアウトを作るために、チェックしておきたいブロックレベル要素や、インライン要素のクセみたいなのをまとめてみました。後半はスタイルが反映されない原因のひとつ、スタイルの優先順位についてです。 Attention 記事公開時からいろいろと勉強して、この記事内で紹介している事柄で、間違った解釈をしていたなーと気がつきました。 この記事の中でいくつか追記してありますが、詳しくは、新しく書いた 11月7日の記事：CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ を読んでみてくださいね！ New Post Webサイトをデザイン、レイアウトするのに欠かせないのが CSS（Cascading Style Sheets、スタイルシート）ですね！今では CSS3 が話題を集めていて、CS
「.htaccess」でiPhone、アンドロイド(Android)からのアクセスを判別し、スマートフォン用ページを表示する - WeBridge｜WeBridge
「.htaccess」でiPhone、アンドロイド(Android)からのアクセスを判別し、スマートフォン用ページを表示する こんにちは。最近では、iPhoneやAndroidでWEBを閲覧する人も急激にふえてますねー。そして多くのサイトは、それらのスマートフォンからのアクセスがあった場合はスマートフォン専用のサイトに誘導するケースが増えてきました。 スマートフォンからのアクセスは別ページへジャンプさせる方法や、スマートフォン用のCSSを読み込ませてデザインだけ変える方法が主流だと思います。 携帯サイトの場合は、CSSが不十分なので別サイトを作って対応することが多かったのですが、スマートフォン（現在はiPhoneとAndroidがほとんど）はほぼフルでCSSが使えますし、CSS3、html5にもほぼ対応しているので、CSSの読み込みを変えるだけでもかなり対応できると思います。 でも、、今回
background-position：CSSプロパティの使い方とサンプルコード集 - ウェブランサー
background-positionプロパティの説明 background-positionは、背景画像が表示される初期位置を指定します。この位置は、background-originで定義される基点からの相対距離となります。 背景に関するプロパティを一括で指定する場合は、ショートハンド・プロパティのbackgroundを使用して下さい。 background-positionに指定できる値 <position> CSSで使用できるデータ型の一種で、二次元座標の相対位置を指定します。キーワードやオフセットの数値やパーセンテージが使えます。 background-positionの使い方とサンプル background-positionプロパティの構文は以下の通りです。 /* キーワード値 */ background-position: top; background-position:
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
5509.me
Ultimate CSS Gradient Generator from ColorZilla