質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

4470閲覧

大きさの違うフォントを横並びにしたい

Chihiro1219

総合スコア49

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/01/06 08:53

イメージ説明
上記の画像を以下の画像のように文字を大きさの違うものを並べてボタンを作成したいです。
ご教授よろしくお願いします!(グラデーションの色合いなどは除く)

イメージ説明

html

<div class="list_like_button"><span>&#9829;</span>お気に入り</div>

CSS

.list_like_button { position:absolute; bottom:-27px; right:3px; font-size: 12px; color: #4e4e4e; height:27px; padding:0 5px; line-height:27px; vertical-align:middle; width:90px; /*IE6 IE7 */ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#ffffff, endcolorstr=#b5b5b5)); /* IE8 IE9 */ -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#ffffff, endcolorstr=#b5b5b5))"; zoom: 1; background: -moz-linear-gradient( top, #ffffff 0%, #ebebeb 50%, #b5b5b5); background: -webkit-gradient( linear, left top, left bottom, from(#ffffff), color-stop(0.50, #ebebeb), to(#b5b5b5)); -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; border: 1px solid #949494; -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0), inset 0px 0px 2px rgba(255,255,255,0.8); -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0), inset 0px 0px 2px rgba(255,255,255,0.8); box-shadow: 0px 1px 3px rgba(000,000,000,0), inset 0px 0px 2px rgba(255,255,255,0.8); z-index:999 !important; } .list_like_button span{ color:#999; font-size:24px; vertical-align:middle; margin-right:3px; line-height:20px; }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

なんとか解決しました!
全て<span></span>で文字要素を囲みその外に<div></div>で囲みvertical-aling-middleでなんとか解決しました。

投稿2016/01/12 01:37

Chihiro1219

総合スコア49

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

僕の環境だとこういう感じに見えてしまいます。。。
イメージ説明

投稿2016/01/06 09:50

MasakazuFukami

総合スコア1869

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問