[CSS]半透明のパネルを使って、画像にキャプションをかっこよく表示する12種類のスタイルシート -InContent
InContentの使い方 実装はとても簡単です。 Step 1: 外部ファイル 当スタイルシートをhead内に配置します。 <head> ... <link rel="stylesheet" href="css/incontent.css" type="text/css" /> </head> Step 2: HTML 画像のimg要素とキャプションのspan要素をdivで包みます。 <div class="pic"> <img src="img/01.jpg" class="pic-image" alt="Pic"/> <span class="pic-caption bottom-to-top"> <h1 class="pic-title">Pic Title</h1> <p>Some description or text.</p> </span> </div> 用意されているcl
使いこなせばもしや爆速！？ここ最近助けられたチートシート色々を厳選してご紹介！ | バンクーバーのうぇぶ屋
さて、以前このブログではチートシートに関する記事を書かせて頂きました。もう1年以上前の記事になるんですねー。本当時間が経つのは早い物です…。 無くても良いけど、あったら意外と便利なチートシート。得に初心者の間はチートシートと睨めっこしながら色々な技術なりアプリなりと向かい合う事も僕は少なくありません。 しかし、当然チートシート関連もアップデートし続けた方が良い物。いつまでも古いチートシートばかり見ていたら、折角の新機能や便利ツールの存在に気づかず、ぬあーーーー！って成る事もあるやもしれません。 というわけで、今日はここ最近見たチートシート紹介第二弾！チートシートとして手元に置いておけば、いざというとき便利かもしれない物を、比較的新しそうな物から共有させて頂こうかなと思います！ それで行ってみましょー！ OverAPI.com | Collecting all the cheat sheet
[CSS]IE6, IE7, IE8, IE9の各バージョンの分岐をvalidで処理する方法
CSS Specific for Internet Explorer デモページ（※IE7で表示） [ad#ad-2] デモ紹介 1. 条件付きコメントの利用 2. CSS Hackの利用 3. 条件付きのHTML class デモ紹介 デモページは、下記のように設定されています。 スタンダードブラウザ（IE9, Firefox, Chrome, Safari, Operaなど） 背景色がグレー IE8 背景色がピンク IE7 or IE8互換モード 背景色がグリーン IE6 背景色がブルー 下記はデモページをIETesterで表示したものです。 IETesterの詳しい説明は、「IE5.5, IE6, IE7, IE8の確認が同時にできる -IETester」を参照ください。 デモページ（※IE8で表示） IE9もWin7+IE9で確認したところ、背景はグレーに表示されていました。 [a
CSSで要素を横並びにする方法まとめ | HALAWATA.NET
CSSで要素を横並びにする方法をまとめてみました。 それぞれの違いがわかるように基本となるコードを用意します。 div要素3つとそれを囲むdiv要素1つです。3つのボックスには高さと横幅を80px、マージン、パディングともに10pxを指定します。 <div class="boxContainer"> <div class="box">BOX1</div> <div class="box">BOX2</div> <div class="box">BOX3</div> </div> float – 方法1 .box { float: left; } .boxContainer { overflow: hidden; } /* clearfix */ .boxContainer:before, .boxContainer:after { content: ""; display: table;
おりゃーうりゃー!CSSだけで忍者に手裏剣を投げさせてみた
いやーもうそろそろ夏っすね。女子の浴衣にドキッとくる季節ですね。 彼女居ませんが。 さて、タイトル通りなんですが、CSSだけで忍者くんに手裏剣を投げさせてみました。意外に楽しかったので公開してみたいと思います。 この子に投げさせてみたよ 可愛いでしょ?(自分で言うな)夜な夜なレイヤーを重ね合わせこの子は生まれました。 まぁ、僕なんですが。 この記事を書く為に忍者セットを作成したんですが、意外にも手裏剣を作るのが大変でした。3レイヤーで出来てます。 レスポンシブ化しようとしましたがめんどくさくなって固定にしました。固定良いよ固定。 目次に戻る 実装方法 参考にしたサイト CSS アニメーション - CSS | MDN さて、実装方法ですがCSS3のアニメーションを利用して動かしています。 ロジック的には キーフレーム という CSS3アニメーション の機能を使い、左手やら手裏剣やらを個別にア
フロートボックスが並んだ時の右端のがカラム落ちしない方法みたいなのとIEのコメントバグ
タイトルが長い… サイトやブログの価値を調べる10の指標とツール｜前向きストラテジー 10番目のでこのブログを調べると泣きたくなるくらい安いけど、ボクは頑張ろうと思った今日この頃、皆様暑さにバテていないでしょうか？ボクはしっかりバテてダレてます。あんまり仕事してま…（加藤さまに給与減らされるので自重しました） さて、そんな訳で本題ですが、下記みたいなレイアウトの時のお話です。 一番書きたかったフロートボッ（略）みたいなの サンプルとダウンロード サンプルページ ダウンロード 今回の本題は「ほげほげ」って書いてあるところのボックスに関してだけ書くつもりが遊んでいるウチに気になった事があったのでそちらも書こうと思っております。 何はともあれ、この「ほげほげボックス」ですが、main areaは10pxのpaddingが指定されてて、その中にこんな感じでぴったりなボックスがぽこぽこ並ぶときって、
dl要素を美しくデザインするスタイルシートのまとめ | コリス
実用的なものからちょっとトリッキーなものまで、dl要素を使った美しいデザインのスタイルシートを紹介します。 In Defence of the Definition List HTML <dl class="wrapper1"> <dt>News Item 1</dt> <dd><div class="div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum orci eu purus viverra imperdiet. Cras scelerisque commodo dictum. Mauris sed libero non justo adipiscing tempor tincidunt eget eros. Praesent eu cursus enim. Donec d
リストにフィルタを掛けてソート出来る、わずか2KBの軽量jQueryプラグイン・MobilySelect
以前にも同じようなものがありましたが、 こちらのほうが良かったのでメモ。リスト （デモでは画像を使っています）にフィルタ リングしてソート出来るjQueryプラグイン。 わずか2KBと軽量で、クロスブラウザ対応 です。便利そうなのでどこかで使いたい ですね。 以前ご紹介したFilter Image Viewも良かったのですが、IE6で表示が微妙でしたが、MobilySelectは問題なく、しかも軽量です。 機能はFilter Image Viewと同様で、ボタンを押すと、そのボタン以外のリストを非表示にする、というフィルタリング。 上記は「名刺」のみの表示にした状態。 完璧に同じ挙動、とは行きませんが、IE6でもちゃんとフィルタリングしてくれます。上記はIETesterでのキャプチャ。 マークアップ<div class="selecter selecter1"> <div class="s
idの命名に迷ったら | d-spica
idの命名に迷ったら 2007-10-19 0 0 XHTML/CSS Role, XHTML 以前こんなエントリーを書きました。 id="header"で問題ないのでは id，class名をどうふるとよいか，しばしば悩みます。いくつかのパターンがあって，そのどれかを使うのですが，明確な基準というものはありませんでした。 XHTML Role 属性モジュール 先日W3Cから，「XHTML Role 属性モジュール」の最終草案が出されました。 XHTML Role 属性モジュール（日本語訳） 部分的に引用してみます。 概要 この仕様で定義される XHTML Role 属性は、作成者が要素に役割を与えるための属性です。機械で抽出可能な意味情報を要素に与えることで、XML を用いた言語に注釈を与えることができるようになります。ユースケースとして、アクセシビリティやデバイスアダプテーション、サー
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
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.
CSSでボックスの内容物を上下中央揃えにする方法3種。｜web bibo
↑CSSだけでこんな感じに上下中央揃えを実現させるテクニックです。下記の3つの方法を紹介します。 ・1行のみのテキストを中央揃えにする場合 ・2行以上のテキストまたは画像を中央揃えにする場合 ・高さが決まっていない要素を中央揃えにする場合 1行のみのテキストを中央揃えにする場合 <!-- HTML --> <div> <p>1行のみのテキストに有用</p> </div> /* CSS */ div{ width: 200px; height: 100px; background: #DDDDFF; text-align: center; } p{ line-height: 100px; } →1行のみのテキストを中央揃えにするサンプル line-heightは行間のスペースを制御するプロパティです。なので、2行以上の文などには利用できません。1行だけの場合には簡単に実装できる有用な方法です
PHP classの教室
PHPで関数は使えるけれどオブジェクト指向はよくわからないという人向けの勉強会の資料です。 Ustream録画 (1/5) http://www.ustream.tv/recorded/21256905 67分 (2/5) http://www.ustream.tv/recorded/21253084 80分 (3/5) http://www.ustream.tv/recorded/21254139 60分 (4/5) http://www.ustream.tv/recorded/21254817 24分 (5/5) http://www.ustream.tv/recorded/21255084 6分 Read less
PHPでのページング処理のサンプル。 » とりあえず9JP
手軽にページング処理するサンプル～。 リンク生成の部分とかは思いっきりハードコーディングしているし、ページ数が多い場合の省略処理とかもしていないけれど。 class TekitouPager { private $base_uri = null; //ベースとなるURL private $page = null; //現在のページ番号 private $per_page = null; //1ページに表示する件数 private $max_row = null; //全データ件数 private $max_page = null; //最大ページ数 private $offset = null; //オフセット /* * 引数（全て必須） * $base_uri ベースとなるURL * $page ページ番号(数値) * $max_row 全データ件数(数値) * $per_page 1ペ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Border