[CSS]順序付きリスト、ol要素を丸数字で実装するスタイルシートのテクニック -spanや①は無し | コリス

2016/12/06 111 users コリス CSS ol要素 HTML テクニック

Webで調べると、ol要素を丸数字で実装する時はspanとか①②③とかを使うしかないように思えますが、クリーンなHTMLで数値文字参照を使わずに、丸数字を実装するスタイルシートのテクニックを紹介します。 対応ブラウザはす ...記事の続きを読む 続きを読む

コピペ+αではてなブログにSNSフォローボタンを設置するカスタマイズ - Yukihy Life

2015/06/26 111 users コピペ Yukihy Life カスタマイズ disp ブログ

2015-06-26 コピペ+αではてなブログにSNSフォローボタンを設置するカスタマイズ ブログ ブログ-カスタマイズ text-small">◯◯</span>」の部分を消去してください。 その後下のコードをコピペです。 .follow-btn{ width: 100%; text-align: left; margin-bottom: 10px; } .follow-btn a { disp... 続きを読む

ゴーストボタンにマウスを乗せたときの動きいろいろ16個｜Webpark

2015/05/20 312 users Webpark 擬似要素 HTML マウス サンプル

昨年くらいから流行っているらしいゴーストボタンというもののサンプルをいくつか作ってみました。皆さん色々作られていて、今さら感もありますがぜひご覧ください。 今回、以下のルールに沿って16個サンプルを作りました。 HTMLは全て同じ マウスを乗せる前は同じ状態 擬似要素は使っても1つだけ 擬似要素を2つ使ったり、spanなんかをはさんでやるともっと色々できると思いますが、今回はシンプルにマウスを乗せ... 続きを読む

[CSS]テキストの左右に水平ラインをすぅーーーっと引くスタイルシートのテクニック | コリス

2014/04/21 341 users コリス CSS 左右 テクニック テキスト

hn, pなどの要素を使ったテキストの左右に、水平ラインを天地中央に配置するスタイルシートのテクニックを紹介します。 HTMLは非常にシンプル、カラーやサイズの調整も簡単、背景画像も問題ありません。 実装のポイントは5つ。 画像は使用しない。 spanなど、余分なHTMLは使用しない。 フォントのサイズを大きくしても自動で調整される。 可変。 背景が画像でも水平ラインが綺麗に描かれる。 実際の動作... 続きを読む

横に水平線のあるテキスト · terkel.jp

2014/01/08 141 users terkel Demo CSS 見出し 水平線

おもに見出しなどで見かける、テキストの左右 (またはそのどちらか) に水平線を配置したスタイル。これを CSS で実現する方法について考えてみました。 Demo: 横に水平線のあるテキスト 重ねて隠すパターン まず最初は、1 本の水平線を幅いっぱいに配置した上で、テキストに重なる部分を隠す、という方法です。 <h2><span>Latest Posts</span></h2> マークアップはこのよ... 続きを読む

[CSS]h1一つだけでこんなにかわいいレトロ風リボンが実装できるスタイルシート | コリス

2013/01/23 184 users コリス div要素 見出し CSS バリエーション

このレトロ風の凝ったデザインのリボン、HTMLはh1要素だけで実装されています。 余分なspan, div要素もなく、もちろん画像は一切使用されていません。 Single Element Pure CSS3 Double Fold Ribbon CSSはそれなりのボリュームになりますが、スタイルシートだけでデザインする見出しのバリエーションとしてストックしておきたいですね。 HTML HTMLは非... 続きを読む

[CSS]CSS3を使って美しい検索フォームを実装するチュートリアル | コリス

2012/02/15 109 users コリス searc Lighter Form text

CSS3の角丸やグラデーションを少しだけ使って、美しい3種類（ライトグレー・ダークグレー・グレー）の検索フォームを実装するチュートリアルを紹介します。 デモページ 実装 HTML デモ3種類のHTMLは基本的に全て同じで、親のdiv要素のclassが異なるだけです。 <div class="lighter"> <form> <span><input type="text" class="searc... 続きを読む

[JS]文字を楽しく見せる、カーブ状に簡単に配置できるスクリプト -Arctext.js | コリス

2012/01/25 120 users コリス animate Lettering.js スクリプト

Demo 4: Set/animate 「Animate me」でアニメーション。 Arctext.jsの使い方 Arctext.jsは「Lettering.js」をベースに文字をパスに沿わせて正しく回転させ配置します。 Lettering.jsについては、下記を参考ください。 HTMLファイルを汚さずに細かい設定でspanを挿入できるスクリプト -Lettering.JS では、Arctext.... 続きを読む

小さくで可愛いグラフが描けるjQueryプラグイン「Piety1」:phpspot開発日誌

2011/04/27 364 users jQueryプラグイン phpspot開発日誌 グラフ 描画

Peity ? progressive pie charts 小さくで可愛いグラフが描けるjQueryプラグイン「Piety」 アイコン感覚で気軽に設置できて使い方次第では情報をわかり易く示すことができそうです クライアントサイドで描画するのでサーバに負担がない点もいいですね データの定義はspanで定義して、 １行で描画。 出力結果。 むちゃくちゃ使いやすいじゃないですか。 関連エントリ ミニグ... 続きを読む

CSSだけでスタイリッシュな角丸ボタンが作れる『Sexy Buttons』が便利そう - IDEA*IDEA ～ 百式管理人のライフハックブログ

2010/02/24 414 users IDEA submit CSS ライフハックブログ 角丸ボタン

ちょっと素敵なCSSファイルのご紹介。 このCSSを読み込んで、簡単なマークアップをするだけで簡単にスタイリッシュな角丸ボタンが作れますよ。 ↑ こんなのが一発で作れます。 マークアップは以下のとおり。spanが二つあるのがまぁ、あれですが。 <button class="sexybutton"><span><span><span class="ok">Submit</span></span></... 続きを読む

小粋空間: CSS で table に斜線を引く方法

2009/10/25 287 users table 斜線 CSS relative position

CSS で table に斜線を引いてみました。下の表の左上の斜線に CSS を使ってます。 サンプル（クリックすればサンプルページに移動します） Windows XP + IE6 / IE7 / Firefox3 / Safri3 / Google Chrome で確認しています。 ポイントは以下です。 th 要素に position: relative; 斜線を引く要素（ここでは span）に... 続きを読む

[CSS]テキストにグラデーション効果をつけるスタイルシート | コリス

2008/01/17 387 users コリス グラデーション CSS 見出し要素 テキスト

Web Designer Wallにエントリーされている、テキストにグラデーション効果をつけるスタイルシートの紹介です。 CSS Gradient Text Effect 仕組みは、見出し要素(h1)に空のspanを記述し、グラデーションの背景画像を表示しています。 デモページでは、下記のようなさまざまなグラデーションをつけたテキストがあります。 CSS Gradient Text Effectの... 続きを読む

Windchase - Javascript で幅に合わせて文字列を切りつめる

2007/05/25 176 users visibility ruler absolute 文字列

デスクトップアプリを開発してると、ListView のカラム幅が足りなくなったときに「My Docume...」のように自動的に末尾を「...」で埋めて切りつめてくれる機能がある。ウェブでも同じことをやりたかったので、作ってみた。まず、文字列の幅を測定するには、 span id="ruler" style="visibility:hidden;position:absolute;"> span> ... 続きを読む