[CSS]たった二行で、さまざまなカラムを設定するグリッドのフレームワーク
たった二行のシンプルなスタイルシートで、さまざまなサイズのカラムを設定するグリッドのフレームワークをを紹介します。 .row { display:table; width:960px; margin:0 auto } .cell { display:table-cell; vertical-align:top; padding-left:10px } HTMLもシンプルでdiv要素を使うだけです。 HTML 3カラムの例です。カラムの数にあわせて、div要素を配置します。 <div class="row"> <div class="cell" style="background-color:#aaa;">1</div> <div class="cell" style="background-color:#bbb;">2</div> <div class="cell" style="back
[CSS]パンくずの実装はどのようにするのがよいかの考察
パンくずは何要素で実装していますか？ ul要素？ ol要素？ p要素？ パンくずをどのように実装するのがよいかの考察を紹介します。 Exploring Markup for Breadcrumbs [ad#ad-2] 先日紹介したCSS-Tricksの「画像を使用しないでApple風のパンくずを作成するチュートリアル」に寄せられたコメントから考察されたもので、各ポイントを意訳したものです。 パンくずのマークアップの考察のきっかけ -ul要素で同列配置 パンくずのマークアップの考察 -ul要素で親子 パンくずのマークアップの考察 -ol要素で順序づけ パンくずのマークアップの考察 -セパレーターの使用 パンくずのマークアップの考察 -Googleを参考に パンくずのマークアップの考察 -HTML5の使用 パンくずのマークアップの考察 -おわりに パンくずのマークアップの考察のきっかけ -ul
アルファチャンネルとopacityの違い：FirefoxとSafariのCSS対応 - builder by ZDNet Japan
前回はアルファチャンネルを使った透明度の設定について紹介したが、透明度はopacityプロパティでも指定することができる。opacityプロパティはFirefoxやSafariでもバージョン3以前から対応しているので、今回はアルファチャンネルとopacityプロパティの違いについて見ていきたいと思う。また、Firefox 3が新しく対応したCSS 3のtransparentの処理についても紹介する。 なお、透明度に関する規格については、CSS 3の勧告候補CSS3 Color Moduleを参考にしている。 また、今回からは先週リリースされたFirefox 3のBeta 3を利用する。Beta 3では、第3回「CSSで罫線を角丸で表示する（1）」で紹介した「背景画像の角丸表示」に対応したので、確認してほしい。
[CSS]画像を使用しないでApple風のパンくずを作成するチュートリアル
階層を区切る三角のデザインが特徴的なApple風のパンくずを同一の色相でカラーリングしたものを実装するチュートリアルを紹介します。 三角の箇所は画像を使用しないで、CSSで実装されています。 Breadcrumb Navigation with CSS Triangles デモページ [ad#ad-2] HTML -マークアップ パンくずはリスト要素で実装します。 シンプルでクリーンに実装するために、各アイテムにはclassを使用しません。 HTML <ul class="breadcrumb"> <li><a href="#">トップページ</a></li> <li><a href="#">第二階層</a></li> <li><a href="#">第三階層</a></li> <li><a href="#">第四階層</a></li> <li><a href="#">現在位置</a></
ブラウザごとの面倒で分かり辛いCSSハックとはサヨナラできそうな「PHP CSS Browser Selector」:phpspot開発日誌
ブラウザごとの面倒で分かり辛いCSSハックとはサヨナラできそうな「PHP CSS Browser Selector」 2009年09月14日- ブラウザごとの面倒で分かり辛いCSSハックとはサヨナラできそうな「PHP CSS Browser Selector」。 CSS の記述の単純化 PHPでUserAgentを解析し、<html> に class を振ってしまうことで、CSSの指定が次のように楽になります。 /* IEのみに適用 */ .ie body { background-color: yellow } /* IE7のみに適用 */ .ie7 body { background-color: orange } /* geckoベースのブラウザのみに適用 */ .gecko body { background-color: gray } 使い方 (1) 必要なPHPファイルをインク
レイアウト作りを簡単にしてくれるCSSグリッドシステム
CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね！ Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。 1. CSSグリッドシステムとは？ CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にし
ウェブデザイナーのための実用的なデザインとコーディングテクニック集
Five Useful Design Techniques and Coding Solutions For Web Designers [ad#ad-2] 下記は各ポイントを意訳したものです。 PHPはWordPressでのものとなっています。 1. 複数の項目がある棒グラフのエフェクト 2. ホバー時に追加情報を表示 3. カテゴリごとに異なるカラーを適用 4. ちょっと面白い画像のキャプション 5. ウェブのための印刷風デザイン おわりに -developersではなく、designers 1. 複数の項目がある棒グラフのエフェクト 下記のサイトで使用している棒グラフでは、上：タグの種類と数、下：コメントのついた記事と数、をそれぞれ素晴らしいエフェクトで実装しています。 こういった数値化されたデータは、ユーザーに対して有用なコンテンツの手がかりを提供し、ユーザビリティを改善することに
Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える
2014年8月20日 CSS Webサイトを装飾していく時に無視できない要素、見出し・リスト・引用文。特にWordPressでオリジナルのテーマを作る時は、ブログ用にこれら基本の要素すべての装飾もすると思います。そんな時に使うコードのバリエーションをメモしていたので記事にしました。少し変えるだけで応用できると思うので、ぜひ使ってみてください！ ↑私が10年以上利用している会計ソフト！ 色、フォント、サイズなどを変えるだけで、どんなサイトでも使える見出し・リスト・引用文用のHTMLとCSSコードを紹介します。そのままコピペして使っちゃってください。少しはコーディングの手間が省ける…かもしれません。ちょいちょい使っている画像も保存して使ってもらってもOKです :) サンプル画面内の「HTML」「CSS」タブをクリックでコードが表示されます。IE6, 7, 8, FF, Chrome, Safa
HTML5+CSS3 入門
Webを記述する言語の標準の現状 昨年度であれば、HTMLを記述する授業では自信をもって以下の基準を推薦していました。 HTML (文書の構造を記述する言語) – XHTML 1.0 もしくは XHTML 1.1 CSS (文書の体裁・デザインを指定する言語) – CSS 2 しかしながら、ここ数年で、とくに去年あたりから状況は大きく変動しつつあります。現状の変化を理解するには、ここに至るまでの歴史的な経緯について簡単に理解する必要があります。ここまでの経緯を整理した上で、将来の展望を探りたいと思います。その上で、この授業ではどのような基準にのっとって「正しい」ということを定義するのか決めていきたいと考えます。 HTML (Webサイトの記述言語) の標準化巡る闘争の歴史 AppleInsider: なぜ Apple は HTML 5 に賭けているのか： ウェブの歴史 [Page 2] よ
デザイナは要注目！ 明日から語れるHTML5＆CSS3（1/4）- ＠IT
デザイナは要注目！ 明日から語れるHTML5＆CSS3：一撃デザインの種明かし（13）（1/4 ページ） ※本稿では特に断りがない場合、Firefox、Google Chrome、Opera、Safariは2010年7月時点の最新バージョン、IEはInternet Explorer 6/7/8の総称です。 いま世界で一番熱い「HTML5」「CSS3」とは？ 最近、「HTML5」「CSS3」といった言葉をよく耳にしませんか？ これらはWebの表現をもっと豊かにするために策定中の言語です。いままでのHTML 4.01やXHTMLでは実現できなかったことができるようになったり、CSS3はCSS 2.1よりさらにグラフィカルな部分まで表現できるようになりました。 FirefoxやOpera、Safari、ChromeといったHTML5＋CSS3に対応するWebブラウザが増えてきたことで、HTML5
今日からCSS3アニメーションを使えるようになるチュートリアル
CSS3のアニメーションってスゴい！ 先日のぽんたくんの記事でも紹介されたように、CSS3ではアニメーションも制御できるようになりました。 ということで、ぼくもCSS3のアニメーションを使ってdemoをいくつか作ってみました。 SafariやChromeなどwebkitブラウザで表示してみてください。 コピペで使えるCSS3アニメーション - jsdo.it ※PLAYボタンをクリックすると表示されますよ 見れない人のために動画も撮ってみました。 どうですか？CSSだけで、まるでFlashを使ってるような表現ができちゃうんです。 今回はこのCSSのアニメーションのチュートリアルをご紹介します。 「NEW!」というアイコンが、1文字ごとにぴょこんぴょこん跳ねるアニメーションを作ってみましょう。 上記のdemoでいうと二つ目の動きです。 HTML <p class="animetionNew
CSS3だけでつくるWebボタン！押さずにはいられないボタン簡単3ステップ
インターンシップにきています。 こんにちわ。(・`д・ノ)ノ 面白法人カヤックでインターンシップ中のどうもぽんたです。 先週、鎌倉本社から自由が丘支社に移りました。 自由が丘に来たのは初めてなので、「丘ないなぁ。」って思いました。 そしてこちらはインターン研修で、書いているエントリーです。 どうか柔らかいまなざしで見守って下さいませ！ 今回は画像を使わず、CSS3だけでWebボタンをつくる方法を紹介したいと思います。 といっても僕自身つくったことがないので、一緒に挑戦しましょう！！ つづきからどうぞ！ すごいよ！CSS3 ≫ CSS3のみでつくっているボタンを紹介している凄いサイトがあります。 ラムネのようなテイストのボタンですな。 これを画像なしでつくってるっていうからスゴイ！ ここまでレベルの高いボタンはつくれないので、 基本重視のシンプルなCSSボタンをつくろうと思います。 まずはC
スマートフォン対応してみた。
当ブログをスマートフォン対応したいなーと思ってはいたけど、iPhone持ってないしXperiaの需要はどうなんだろうとか考えたり言い訳しつつずっと放置してましたが、今回 iPod Touch （先代の）を借りたので、勉強がてらiPhone対応と言うかスマートフォン対応してみました。 何かを実験するには自分のサイトが一番手っ取り早くて良いですね。 サイト持ってない方は、ホント何でもいいので、何かしら作ったほうがいいかなーと思います。 ドメイン取得して、サーバレンタルして、構成練って、デザイン・コーディングして、FTPクライアントでファイルアップしてみたり、MTやWPインストールしていじったり、CSS3の実験したり色々使えて便利ですし、カッチリ作れば実績にもなりますしね。 と、それは良いとして、スマートフォン対応したんです。えぇ。 CSS HappyLife for iPhone URLのオシ
https://footballpanthershops.com/
Liebe Besucher von FootballPantherShops.com, Wir möchten Sie darüber informieren, dass die Webseite FootballPantherShops.com nicht mehr weitergeführt wird. Diese Entscheidung wurde getroffen, um Ihnen eine noch bessere Nutzererfahrung zu bieten und Sie auf neue, spannende Inhalte aufmerksam zu machen. Während die Seite nicht mehr aktiv ist, empfehlen wir Ihnen zwei hervorragende Alternativen, die
IE6 position:fixed の諸問題を解決する jQuery.exFixed.js - Cyokodog :: Diary
最近の更新履歴 2011-12-07 Ver 1.3.2 リリース jQuery 1.7.1に対応しました。 2010-12-27 Ver 1.3.1 リリース fixed 要素がブラウザ表示エリアから隠れ１度非表示状態になると、ウィンドウをリサイズし表示エリア内におさめても非表示状態が続いてしまう不具合を修正しました。 2010-11-14 Ver 1.3.0 リリースしました。exAPI ベースの実装に変更しました。サイズに auto を指定できるように変更しました。 2009-12-08 Ver 1.2.2 リリースしました。IE6 にて fixed 対象要素を非表示にしても表示されてしまう不具合を修正しました。Ver 1.2.1 でサイズを明示せずプラグインを実行すると fixed されない不具合を修正しました。 more jQuery exFixed を使用すると、IE6 で p
IEでのCSSのバグを回避するhasLayout | コリス
IE7で拡大・縮小時にレイアウトが重なってしまったり、IEでフロートした要素がはみ出てしまったりとIE独自のCSSのバグがいくつかあります。 これは、IEのhasLayoutが原因のひとつとなっているので、それを回避する方法を考察します。 hasLayoutとは IEでのCSSのバグを回避するhasLayoutの値 CSSのバグに効果のあるhasLayoutの指定方法 hasLayoutの参考ページ hasLayoutとは hasLayoutとは、オブジェクトがレイアウトを持っているかどうかを示すものです。 hasLayoutの値はread-onlyのため読み込みのみ可能で、falseとtrueがあります。 hasLayoutの値（read-only） false デフォルト値。 オブジェクトがレイアウトを持っていない。 true オブジェクトがレイアウトを持っている。 IEでのCSSのバ
[CSS]IEのhasLayout関連のバグと解決方法をまとめたサイト -hasLayout.net
IE6/7/8のhasLayoutが原因でおきるスタイルシートのバグとその解決方法をまとめたサイトを紹介します。 hasLayoutについては、以前のエントリで紹介しているので参照ください。 IEでのCSSのバグを回避するhasLayout hasLayout.net バグは現在、IE6(44個)、IE7(28個)、IE8(19個)登録されており、各ページにバグの解説、バグが生じるデモページ、バグの解決方法とそのデモページなどが掲載されています。 IEのCSS Bugs一覧表の一部 また、CSSのチュートリアルでは、IEの便利なトリックも掲載されています。 CSS Tutorial 例えば、下記のようにIEでクリックした際に生じる点線は、他の箇所をクリックしないと消えないため、クリック後しばらくして消したり、元から表示させない方法などが紹介されています。 クリック時に生じる点線の処理方法
HTML5+CSS3用のブラウザのスタイルをリセットするテンプレートファイル -HTML5 Reset
HTML5+CSS3の環境で汎用的に利用できるHTML・スタイルシート・スクリプトなどのファイルを一式にまとめたテンプレートを紹介します。 ファイル構成：コメント無し版 各ファイルの説明 index.html HTML5の要素を配置した汎用的に利用できるHTMLファイル。各スタイルシートファイルも埋め込まれています。 css/main.css @import用のスタイルシートです。 css/reset.css Eric Meyerの「Reset CSS」です。 css/core.css ベースとなるスタイルが定義されています。 css/_patches 各ブラウザ用のスタイルシートです。 css/_print プリント用のスタイルシートです。 js Modernizrがセットされています。
GoogleがWebフォントサービスを開始 - フォントブログ
Webフォントが一般に広まった全盛期には国内外含め様々なWebフォント配信サービスが登場しましたが、まさに戦国時代そのもので、数年後には多くのサービスが終了となってしまいました。 2023年現在、利用されているWebフォントサービスをまとめてみました。 Google Fonts 完全無料で誰でも利用可能ということもあり、現在一番利用されているGoogle Fonts。定番のNoto Sans以外にも、ZEN 角ゴシックやBIZ UDゴシックなど、プロ仕様の日本語フォントも使えます。デスクトップ用のフォントもダウンロード可。 Adobe Fonts Adobe Creative Cloud契約者なら誰でも使えるAdobeのフォントサービス。かつてはTypekitの名でサービス展開されていました。完全に日本語化され昔に比べるととても使いやすくなりました。デスクトップ用のフォントもダウンロード可
[CSS]サイズがばらばらで無指定の画像を一定サイズで表示するスタイルシート
画像を大量に配置するECサイトなどに便利そうな、スタイルシートのテクニックをCSSplayから紹介します。 CSS play - F.a.S.T - Fit and Shrink Technique デモ サイズはばらばらで、しかもサイズの指定をおこなっていない画像を一定の幅と高さのボックスにアスペクト比を維持したまま真ん中に表示します。 上記のキャプチャはスケールを変えているので、ぜひ元サイトのデモをご確認ください。 対応ブラウザはIE7/8, Fx, Op, Safari(PC), Chromeなど主要なブラウザのほとんどで動作します。 IE6では画像の元サイズで表示されてしまい、しかもボックスの真ん中には表示されない、とのことです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
