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

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

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

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

CSS

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

Q&A

解決済

2回答

5142閲覧

見出しに下線を加え文字部分だけ可変で線色を変える

soma

総合スコア53

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

CSS

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

0グッド

1クリップ

投稿2017/10/24 07:56

こんにちは。
ご覧いただきありがとうございます。

見出しのデザインに関してですが、よくある文字の下に下線を引き一部の色を変更するデザインがあるかと思います。

そのデザインを応用で、文字部分のみ色を可変で変えることは可能でしょうか?
イメージ説明

html + cssで実装できれば幸いですが、jqueryなどで実装することも視野にあります。

・文字下にアンダーライン
・文字部分は紺色、文字以外はグレー
・全体としての横幅は固定幅

このような仕様は実現可能でしょうか?

よろしくお願いいたします。

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

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

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

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

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

guest

回答2

0

こんな感じでどうでしょうか。

HTML

1<h2> 2 <span>お知らせ</span> 3</h2>

CSS

1h2 { 2 border-bottom: 3px solid #ccc; 3} 4 5h2 span { 6 border-bottom: 3px solid #191970; 7}

動作サンプル
https://jsfiddle.net/vt2h9221/


【追記】

CSS

1h2 { 2 border-bottom: 3px solid #ccc; 3} 4 5h2 span { 6 border-bottom: 3px solid #191970; 7 display: inline-block; 8 position: relative; 9 bottom: -3px; 10}

動作サンプル2
https://jsfiddle.net/vt2h9221/1/

投稿2017/10/24 08:02

編集2017/10/24 09:56
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

soma

2017/10/24 09:40

コメントありがとうございます。 こちらですが、なんとか2本の線を重ねることはできませんでしょうか? よろしくお願いいたします。
退会済みユーザー

退会済みユーザー

2017/10/24 09:43

FireFox, Chromeでしか確認してませんが、私の環境では重なって見えますね。どのようにズレていますか?
退会済みユーザー

退会済みユーザー

2017/10/24 09:57

うーん、環境に依存するようなら、この方法はあまりよろしくないかもしれませんね。 修正版を追記してみましたが、どうでしょうか?
退会済みユーザー

退会済みユーザー

2017/10/24 10:05

フォントサイズが揃っていないのも原因かもしれないです。 うまく行かなければ、h2, span要素に同じフォントサイズ(font-size: 16px; 等)を適用してみてください。
soma

2017/10/25 01:27

コメントありがとうございます。 回答いただいたところ、すみません。 karamarimoさんの回答で解決しましたのでベストアンサーにさせていただきました。 お力をお貸しいただきありがとうございました!
guest

0

ベストアンサー

flexboxを使って横に2つボックスを並べてもできます。

Demo

投稿2017/10/24 11:13

karamarimo

総合スコア2551

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

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

soma

2017/10/25 01:26

ありがとうございます!解決しました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問