[B! CSS] i_hikaruのブックマーク

【CSS3】マウスオーバーした際に画像を拡大させるCSSテクニック。

当サイトでも随所で多用使っている、マウスオーバーした際に画像を拡大させるCSSテクニックを紹介します。まずはこちら。CSSの設定です。 img.grow { -webkit-transition:0.2s ease-in-out; -moz-transition:0.2s ease-in-out; -ms-transition:0.2s ease-in-out; -o-transition:0.2s ease-in-out; transition:0.2s ease-in-out; } img.grow:hover { -webkit-transf orm:scale(1.2,1.2); -moz-transf orm:scale(1.2,1.2); -ms-transf orm:scale(1.2,1.2); -o-transf orm:scale(1.2,1.2); transf orm:sc

i_hikaru 2014/10/17

リンク

jquery.tablefix.js

»Download jquery.tablefix.js は、Excel のウィンドウ枠固定のように、テーブルのヘッダや左側を固定して、残りの部分をスクロールさせるための、jQuery プラグインです。 JavaScript 無効時はただのテーブルとして普通にそのまま表示される点と、他の類似品と違ってソート変更などの高度な機能がない代わりに、すでにデザイン済みの任意のテーブルにそのまま適用出来る点が特徴です。読み込むのはプラグインだけで、追加の css や画像ファイルは必要ありません。使い方普通にテーブルをデザインする jQuery とプラグインを読み込む jQuery のセレクタでテーブルを選択して、プラグインを呼び出すこれだけで、あとはプラグインがよかれにやってくれます。プラグインの呼び出し方 $('tableSelector').tablefix({width: 600,

i_hikaru 2014/01/30

リンク

キャプション付き画像を横向きに並べて配置する方法 [ホームページ作成] All About

写真をたくさん掲載したい場合、単に写真だけを並べるのではなく、何か一言タイトル(キャプション)やコメントを書いておきたいと思うことがあります。画像だけを横方向に並べるのはとても簡単ですが、「画像とキャプション」を1セットにして、複数のセットを横方向に配置するにはどうすれば良いでしょうか？表組み(テーブル)を使う方法もありますが、横方向に並ぶ個数(＝列数)が固定されてしまうデメリットがあります。ここはやはり、閲覧者のウインドウ幅に合わせて、横方向に並ぶ個数が自動的に変化する「リキッドレイアウト」が望ましいでしょう。例えば、下図のように。スタイルシートを使ってレイアウトを作れば、こんなことも簡単に実現可能です。今回は、「キャプション付き画像」を、横方向にリキッドレイアウトで並べる方法をご紹介いたします。【本記事の目次】 1. 画像とキャプションをセットにしたボックスを作る (p.

i_hikaru 2013/11/14

css
img

リンク

テキストだけで将棋盤を表示する - merom686's blog

△森内987654321▲深浦　歩　　　　　飛　桂香一香玉金　　　　　　二　銀桂金銀　角歩　三歩　歩　歩　歩　　四　歩　歩　歩　歩歩五歩　歩歩歩　歩　　六　歩　金　歩　　　七香銀金角飛　　　　八玉桂銀　　　　桂香九はてなダイアリーで表示させる都合上、td要素毎に同じスタイルシートを書いてあるが、実際に使う場合はクラスの指定などをすればスマートに書けるはず。 IE8とFirefox3.6.9とChrome6で確認。Safariでもいけると思う。Operaはダメだった。 /*各ブラウザで文字を逆さに表示させるCSS*/ /*Internet Explorer*/ filter:progid:DXImageTransf orm.Microsoft.Matrix(M11=-1, M22=-1, sizingMethod='auto expand'); /*Safari, Google Chrome

i_hikaru 2013/08/25

css

リンク

CSSのセレクタ部分にハイフン(-)を使うべきか

えんじに🐈にゃーん🍓🫐🍅🌽🍈🍇🦝 @uupaa (ε・◇・)з だらだら書いたよー http://t.co/fK9KaHRq 「CSSのセレクタ部分(IDやCLASS)にハイフンとか使われるの好きじゃないなー。ボクはあまり好きじゃないなー」

i_hikaru 2013/01/02

リンク

ソースコードの装飾表示方法　SyntaxHighlighter

HTML,CSS,JS,Perl,PHPなどの各ソースコードをWebサイト上に綺麗に再現。 NetyaSun ソースコード表示　ホームページ　作成、運営、管理ガイド行番号や各行背景色で見やすいソースコードビューライブラリ　SyntaxHighlighter エディタのようにWebサイト上に綺麗にソースコードを表示する方法。ソースを書くプロ達や未来の開発者のための学びの場である HTML,CSS,JS,Perl,PHPなどのマニュアル・解説サイトなどで、 PREソースコードを行頭番号付きでカッコよく表示するソースビューア SyntaxHighlighter　　SyntaxHighlighter:Download ソース上にオンマウスでの操作タブがソースの右上に表示されるようになった。ソースを別窓ビュー表示したりクリップボードに保存や印刷も可能な優れものです。 <?xml ve