SQLの窓

2016年02月01日


A 要素と CSS だけでボタンを表現する 『BUTTONS』

ボタンそのものの下に浮いたような影が付いているのは、このブログ用の CSS で行っています
影の付かないノーマルの表示サンプルはこちらから


BUTTONS


ダウンロードして実装するのもいいですが、基本 CSS は、CDNJS でホスティングされています。

❶ https://cdnjs.cloudflare.com/ajax/libs/Buttons/2.0.0/css/buttons.min.css
( link 要素で参照するだけです )

※ ここでは SPAN 要素に対して設定しているのでリンクではありません( 強調として )
※ こんな感じです class="button button-primary"

BUTTON 要素と CSS だけでアイコンボタンを表現する 『BUTTONS』 では、アイコン用にフリーフォント用の CSS が必要でしたが、A 要素のみで使用する場は必要ありません。テキストとして使用できるものは全て利用可能です

❷ 基本は、class 属性の値として button を指定します
 ( ありがちな値なので競合に注意して下さい )

❸ 次にサイズ用の値
 ( button-tiny / button-small / button-large / button-jumbo / button-giant )
※ 省略すると標準の大きさ

❹ 次に色
 ( button-primary / button-action / button-highlight / button-caution / button-royal )
※ 省略すると灰色
button-inverse で黒を指定できます

になります。ここまででも通常状態で作成されますが、さらに形状を指定できます

❺ button-rounded / button-pill / button-3d / button-raised / button-longshadow-right / button-glow

button-rounded で角丸

button-pill で錠剤形状

button-3d で立体形状

button-longshadow-right で文字の影
( 色によっては、影が出なかったり見えにくかったりします )
button-longshadow-left( 左向きの影 )もあります

button-glow で全体が点滅

▼ class="button button-3d button-border"
さらに、button-border と組み合わせて白抜きの表現が可能になっています

button button-glow button-border

▼ 以下の二つの組み合わせは使えませんね
button button-raised button-border
( button button-raised button-border )

button button-longshadow-right button-border
( button button-longshadow-right button-border )

基本形状の組み合わせも可能です


サイズ : button-tiny

Go Go Go


サイズ : button-small / 色 : button-primary

Go Go Go

サイズ : 指定なし / 色 : button-action

Go Go Go

サイズ : button-large / 色 : button-highlight

Go Go Go

サイズ : button-jumbo / 色 : button-caution

Go Go Go

サイズ : button-giant / 色 : button-royal

Go Go Go

表現方法 : button-3d

日本語でもOKですが

button クラスの font-family を

上書きしないと

想定したフォントになりません

表現方法 : button-raised

ようこそ! Go こんにちは!

黒は button-inverse

表現方法 : button-longshadow-right

普通の文字でも 影は 使えます


表現方法 : button-glow

Go Go Go Go


表現方法 : button-3d と button-border

OK

br 要素で改行する場合は
heightとline-height指定が必要です


表現方法 : button-glow と button-border

OK

br 要素で改行する場合は
heightとline-height指定が必要です


<style>
.button {
	font-family: "Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande", "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "MS Pゴシック", sans-serif!important;
}
</style>

<link id="link" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Buttons/2.0.0/css/buttons.min.css">

<div id="buttons_a">
<br><br><b class="gttl">サイズ : button-tiny</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-tiny">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-rounded button-tiny">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-pill button-tiny">Go</a>

<br><br><b class="gttl">サイズ : button-small / 色 : button-primary</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-primary button-small">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-primary button-rounded button-small">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-primary button-pill button-small">Go</a>

<br><br><b class="gttl">サイズ : 指定なし / 色 : button-action</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-action">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-action button-rounded">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-action button-pill">Go</a>

<br><br><b class="gttl">サイズ : button-large / 色 : button-highlight</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-highlight button-large">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-highlight button-rounded button-large">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-highlight button-pill button-large">Go</a>

<br><br><b class="gttl">サイズ : button-jumbo / 色 : button-caution</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-caution button-jumbo">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-caution button-rounded button-jumbo">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-caution button-pill button-jumbo">Go</a>

<br><br><b class="gttl">サイズ : button-giant / 色 : button-royal</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-royal button-giant">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-royal button-rounded button-giant">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-royal button-pill button-giant">Go</a>

<br><br><b class="gttl">表現方法 : button-3d</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-3d button-primary button-rounded">日本語でもOKですが</a>
<br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-3d button-action button-pill">button クラスの font-family を</a>
<br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-3d button-caution">上書きしないと</a>
<br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-3d button-royal">想定したフォントになりません</a>

<br><br><b class="gttl">表現方法 : button-raised</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-raised button-primary button-pill">ようこそ!</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-raised button-caution">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-raised button-royal">こんにちは!</a>
<br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-raised button-pill button-inverse">黒は button-inverse</a>
  
<br><br><b class="gttl">表現方法 : button-longshadow-right</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-raised button-primary button-pill button-longshadow-right">普通の文字でも</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-raised button-caution button-longshadow-right">影は</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-raised button-royal button-longshadow-right">使えます</a>
<br>
<a href="http://matome.naver.jp/odai/2131896140848768101" class="button button-raised button-pill button-inverse button-longshadow-right"><span style="font-size:30px;">&#9822;</span></a>

<br><br><b class="gttl">表現方法 : button-glow</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-glow button-rounded button-raised button-primary">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-glow button-rounded button-highlight">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-glow button-rounded button-caution">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-glow button-rounded button-royal">Go</a>
  
<br><br><b class="gttl">表現方法 : button-3d と button-border</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-border button-3d button-primary button-rounded button-jumbo">OK</a>
<br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-border button-3d button-caution button-rounded" style="height:80px;line-height:40px">br 要素で改行する場合は<br>heightとline-height指定が必要です</a>

<br><br><b class="gttl">表現方法 : button-glow と button-border</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-border button-glow button-primary button-rounded button-jumbo">OK</a>
<br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-border button-glow button-caution button-rounded" style="height:84px;line-height:40px">br 要素で改行する場合は<br>heightとline-height指定が必要です</a>



</div>



タグ:CSS
posted by lightbox at 2016-02-01 14:34 | HTML / CSS | このブログの読者になる | 更新情報をチェックする

2015年12月24日


BUTTON 要素と CSS だけでアイコンボタンを表現する 『BUTTONS』

BUTTONS


実際は、A 要素もボタンになるのですが、ここではアイコンボタンのみ考えます。ダウンロードして実装するのもいいですが、基本 CSS は、CDNJS でホスティングされています。

アイコンに関しては、Font Awesome よりダウンロードできますが、これも //netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css を使うことができます ( ライセンスページ )

アイコンの種類と名前に関しては、こちらを参照して下さい

画像として簡単に手にいれたい場合は、こちら(フリーフォントで簡単ロゴ作成)でダウンロードできます( フォントのライセンスは SIL Open Font License 1.1 です )

  
  


サイズ : button-tiny



サイズ : button-small / 色 : button-primary



サイズ : 指定なし / 色 : button-action



サイズ : button-large / 色 : button-highlight



サイズ : button-jumbo / 色 : button-caution



サイズ : button-giant / 色 : button-royal



表現方法 : button-3d



表現方法 : button-raised



表現方法 : button-longshadow-right



表現方法 : button-glow



表現方法 : button-3d と button-border



表現方法 : button-glow と button-border


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Buttons/2.0.0/css/buttons.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css">

<button class="button button-square button-tiny"><span class="fa fa-glass"></span></button>
<button class="button button-box button-tiny"><i class="fa fa-music"></i></button>
<button class="button button-circle button-tiny"><i class="fa fa-search"></i></button>

<button class="button button-primary button-square button-small"><i class="fa fa-envelope-o"></i></button>
<button class="button button-primary button-box button-small"><i class="fa fa-heart"></i></button>
<button class="button button-primary button-circle button-small"><i class="fa fa-star"></i></button>

<button class="button button-action button-square"><i class="fa fa-star-o"></i></button>
<button class="button button-action button-box"><i class="fa fa-user"></i></button>
<button class="button button-action button-circle"><i class="fa fa-film"></i></button>

<button class="button button-highlight button-square button-large"><i class="fa fa-th-large"></i></button>
<button class="button button-highlight button-box button-large"><i class="fa fa-th"></i></button>
<button class="button button-highlight button-circle button-large"><i class="fa fa-th-list"></i></button>

<button class="button button-caution button-square button-jumbo"><i class="fa fa-check"></i></button>
<button class="button button-caution button-box button-jumbo"><i class="fa fa-remove"></i></button>
<button class="button button-caution button-circle button-jumbo"><i class="fa fa-search-plus"></i></button>

<button class="button button-royal button-square button-giant"><i class="fa fa-search-minus"></i></button>
<button class="button button-royal button-box button-giant"><i class="fa fa-power-off"></i></button>
<button class="button button-royal button-circle button-giant"><i class="fa fa-signal"></i></button>

<button class="button button-3d button-box button-giant"><i class="fa fa-gear"></i></button>
<button class="button button-3d button-primary button-circle button-giant"><i class="fa fa-trash-o"></i></button>

<button class="button button-raised button-action button-box button-giant"><i class="fa fa-home"></i></button>
<button class="button button-raised button-highlight button-circle button-giant"><i class="fa fa-file-o"></i></button>

<button class="button button-longshadow-right button-caution button-box button-giant"><i class="fa fa-clock-o"></i></button>
<button class="button button-longshadow-right button-royal button-circle button-giant"><i class="fa fa-road"></i></button>

<button class="button button-glow button-box button-giant"><i class="fa fa-download"></i></button>
<button class="button button-glow button-primary button-circle button-giant"><i class="fa fa-arrow-circle-o-down"></i></button>

<button class="button button-border button-3d button-box button-giant"><i class="fa fa-gear"></i></button>
<button class="button button-border button-3d button-primary button-circle button-giant"><i class="fa fa-trash-o"></i></button>

<button class="button button-border button-glow button-box button-giant"><i class="fa fa-arrow-circle-o-up"></i></button>
<button class="button button-border button-glow button-primary button-circle button-giant"><i class="fa fa-inbox"></i></button>


関連する記事

A 要素と CSS だけでボタンを表現する 『BUTTONS』



posted by lightbox at 2015-12-24 15:21 | HTML / CSS | このブログの読者になる | 更新情報をチェックする

2014年11月28日


CENTER 要素内での position:absolute で、位置指定されていない場合の振る舞い

CENTER 要素は、HTML 4 (及び XHTML)で非推奨要素に指定され、HTML5 で完全に廃止されていますが、間違って使われてしまった場合、Google Chrome( と Firefox は同じ ) と IE11 では全く表示が異なる場合があります。

DIV 要素を position:relative でラッパーにして、内部に position:absolute を指定しますが、DIV 要素は CENTER 要素によって中央に表示されるのですが、中の要素の位置が、Google Chrome と Firefox では、中央の軸が左端になって表示されます。これに関しては、IE11 の、DIV の左端に表示されるのが正しいと思うのですが、そもそも CENTER 要素を使う事が間違っているのでなんとも言えません。( 本来は、ラッパーに対して margin:auto を指定して、ラッパーの親要素の幅に対して中央位置に配置する )

Google Chrome と Firefox



IE11


<center>
<div style='position:relative;width:400px;height:350px;border:solid 1px #ccc;'>
<img src="https://lh3.googleusercontent.com/-CWeNDTCMQRI/VF4sSgumWgI/AAAAAAAAXdQ/Ug4sBf9sB_I/s300/_img.png" style="position:absolute;border: solid 1px #000000">
</div>
</center>
▼ CENTER で表示
<div style='position:relative;width:400px;height:350px;border:solid 1px #ccc;margin:auto'>
<img src="https://lh3.googleusercontent.com/-CWeNDTCMQRI/VF4sSgumWgI/AAAAAAAAXdQ/Ug4sBf9sB_I/s300/_img.png" style="position:absolute;border: solid 1px #000000">
</div>

▼ margin:auto で表示
※ IE11 ではどちらも同じ表示になります



posted by lightbox at 2014-11-28 03:39 | HTML / CSS | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり