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]テキストにグラデーション効果をつけるスタイルシート | コリス

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

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

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

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

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

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

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

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

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

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

昨年くらいから流行っているらしいゴーストボタンというもののサンプルをいくつか作ってみました。皆さん色々作られていて、今さら感もありますがぜひご覧ください。 今回、以下のルールに沿って16個サンプルを作りました。 HTMLは全て同じ マウスを乗せる前は同じ状態 擬似要素は使っても1つだけ 擬似要素を2つ使ったり、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]h1一つだけでこんなにかわいいレトロ風リボンが実装できるスタイルシート | コリス

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

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

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

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

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

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

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

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

[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.... 続きを読む

[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... 続きを読む

[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... 続きを読む

Font Awesomeで回転したいときfa-spinが便利 - Qiita

2015/04/20 97 users Qiita Font Awesome span class

<p><span class="fa-spin">く <span class="fa-spin">る <span class="fa-spin">く <span class="fa-spin">る <span class="fa-spin">く <span class="fa-spin">る <span class="fa-spin">く <span class="fa-spin">る <span... 続きを読む

[CSS]画像のロールオーバーにフェード効果を与える方法の理想と現実 | コリス

2011/03/03 93 users コリス CSSスプライト CSS アニメーション 順番

CSSスプライトを使用した画像のロールオーバーにアニメーションでフェード効果を与える際の、妥当な実装方法、理想の実装方法、現実の実装方法を紹介します。下記は各ポイントを意訳したものです。最初の方法：妥当二番目の方法：理想三番目の方法：現実デモでは、上から順番に実装されています。最初の方法：妥当HTML元のエレメント内にspanを一つ配置します。確かにこれは余分のマークアップと感じるかもしれませんが... 続きを読む

[CSS]スクリプト無し、CSSで実装されたパタッと開くアニメーションがかわいいスタイルシートのテクニック | コリス

2014/10/02 89 users パタッ コリス article CSS アニメーション

スクリプト無し、CSSで実装されたパタッと開くアニメーションがかわいいスタイルシートのテクニックを紹介します。 パタッは2種類、↓の一つ目から二つ目を想像してみてください。 Reading Is Fundamental 見事に再現されていますね。 HTML 一つ目に紹介したデモ、半分からパタッとなるHTMLから。 開く時のテキストの区切れはspanで実装します。 <article> <a clas... 続きを読む

[CSS]ショートカットの表記をApple Keyboard風に美しく実装するスタイルシート | コリス

2013/05/09 81 users コリス class CSS span class 実装

ブログなどでショートカットを単にテキストで記述するのではなく、ちょっと洒落た感じに、Apple Keyboard風に実装するスタイルシートを紹介します。 デモページ：拡大 実装はシンプルで、HTMLはclass（mac-key）を付与するだけ、CSSも10行ちょいです。 HTML <p>New Tab <span class="mac-key">⌘</span> + <span class="ma... 続きを読む

Bootstrapで矢印を描くのなら「Bootstrap Arrows」:phpspot開発日誌

2012/12/17 77 users Bootstrap class 諸君 Photoshop 矢印

Bootstrap Arrows Bootstrapで矢印を描くのなら「Bootstrap Arrows」 全国の矢印好きの諸君。こんにちは。もうPhotoshopで矢印を描いて画像を作ってアップロードなんていうことは必要ない。 <span> に簡単なclassをつけるだけで、向きも、長さも、色だって、自由自在。 しかも、次のような美しい矢印が描画できる。センス云々の話ではなく、class="ar... 続きを読む

[CSS]アイデアが面白い！画像無しで、かわいいデザインのラベルをスタイルシートで実装するテクニック | コリス

2015/02/23 72 users product コリス ぺろ CSS div class

ペロっとかぶさっているようなかわいいデザインのラベルを画像無し、CSSで実装したテクニックを紹介します。 カード状のコンテンツにも画像に使っても面白そうです。 Label Overlay 実装は、こんな感じ。 HTML ラベルは画像無し、spanを2つ使用して実装しています。 <div class="product"> <div class="product-image"> <span class... 続きを読む

空のdiv要素について - uhyo/blog

2021/09/06 71 users uhyo 妥当 span要素 div要素 観点

昨日はこちらの記事に端を発する形で、空のdiv要素やspan要素は妥当なのかといった話題が見られました。 中身のない空の div 要素や空の span 要素は HTML 仕様として妥当なのか？ - dskdこの記事は空のdiv要素やspan要素が妥当かどうかという疑問にHTML仕様の観点から考察を加える大変面白い記事です。記事の結論として... 続きを読む

HTML5 追加された data 要素について

2011/10/31 63 users HTML5 time 低スペックマシン 要素 仕様書

HTML5 では 2011-10-29 の Editor’s Draft から time 要素が削除され、data 要素が追加されたようです。この要素が span 要素でダメな理由も、time 要素のときと同様に私にはさっぱり理解できないですが、一応仕様書くらい読んでおくことにします。ED にリンクしておきますが、低スペックマシンで開くと酷い目にあうので注意が必要。 4.6.10 The data... 続きを読む

[WordPress]アイキャッチのURLを取得してCSSで背景画像に設定する方法*prasm

2014/01/16 48 users prasm background アイキャッチ div CSS

こんな感じ、別にspanでなくてもdivでもなんでも、インラインで指定します。 アイキャッチをbackgroundで指定できるとどういいのか？ こればっかりは好みとしか言いようがありません。別にバックグラウンドで指定しなくても、普通に呼んでpositionで好きに配置することも出来ますしね。 prasmでの使い方 主にモバイルテーマで使っています。 ヘッダー部分のアイキャッチだけが固定でブログタイ... 続きを読む

[CSS]ちょっと面白いMedia Queriesの使い方 -表示サイズで異なるメッセージを表示するテクニック | コリス

2012/03/18 39 users コリス Row CSS div テクニック

実装 「BE なんとか」のメッセージは、「BE」だけ固定で、「なんとか」はMedia Queriesと擬似要素を使用して配置しています。 HTML h2要素をdiv要素で内包したシンプルな実装です。 <div class="row"> <h2>Be <span></span></h2> </div> 空のspan要素はCSSでコンテンツをレンダリングするために使用します。 CSS Media Qu... 続きを読む

[M] WordPressを使っていると入りやすい中身のないタグ要素をjsで抹殺する方法 | mbdb (モバデビ)

2014/01/27 34 users mbdb 憶え モバデビ HTML 文法上

WordPressを使っていると入りやすい中身のないタグ要素をjsで抹殺する方法 Hacks WordPress 201401 28 WordPressを使っている人には憶えがあると思うのですが、記事を書いて更新して、その後記事のソースを見てみると、入れたはずのない<p></p>や<span></span>が入っていることがあります。 なんだか気持ち悪いし、HTMLの文法上よろしくないんですよね。... 続きを読む

CSS3でアニメーションする読込バー実装サンプル:phpspot開発日誌

2012/04/05 34 users phpspot開発日誌 CSS3 SPA div bar

CSS3 Animated Loading Bar, by Lee Munroe CSS3でアニメーションする読込バー実装サンプル CSS 定義しておけばdivとspanでサクっとアニメーションする読み込みバーが作れるというものです HTMLマークアップは以下のように超シンプル。 <!-- Start of loading bar --> <div class="bar"> <span></spa... 続きを読む