重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

青い枠のみのHTML

解決済

  • 質問者：toufu-mental
  • 質問日時：
  • 回答数：4件

ログインとか、検索とか
フチなしの青い枠（窓）がありますが、
この枠（窓）のHTMLを教えてくれませんか？
言うまでもなく、ログイン等、テキス文字が
入っていても構いません。

質問者からの補足コメント

  • 皆様ありがとうございました。
    質問が分かりにくかった点は申し訳ありませんでした。

      補足日時：2024/01/30 00:04
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

こんな感じでしょうか。



<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
font-family:'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
}

.btn--orange,
a.btn--orange {
color: #fff;
background-color: #3498DB;
}


/* */
*,
*:before,
*:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}

html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 62.5%;/*rem算出をしやすくするために*/
}

.btn,
a.btn,
button.btn {
font-size: 1.6rem;
font-weight: 700;
line-height: 1.5;
position: relative;
display: inline-block;
padding: 1rem 4rem;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
text-align: center;
vertical-align: middle;
text-decoration: none;
letter-spacing: 0.1em;
color: #fff;
border-radius: 0.5rem;
}
</style>
</head>
<body>
<a href="" class="btn btn--orange">文章<br>改行可能</a>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。
イメージとしてはもっとも
いい感じです。

通報する
お礼日時：2024/01/30 00:02

参考程度に

No.3

  • 回答者： gura_
  • 回答日時：

toufu-mental さん


････フチなしの青い枠（窓）がありますが、
この枠（窓）のHTMLを教えてくれませんか？･･･････

例えば。↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0; height: 100vh; background-color: #fff;
display: flex; justify-content: center; align-items: center;
}
</style>
</head>
<body>
<div style="width:300px; height: 60px; border:solid 200px #3498DB; background: #fff;"></div>
</body>
</html>
「青い枠のみのHTML」の回答画像3
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご丁寧な回答ありがとうございます。
ちょっとイメージが違いました。

質問の説明不足で申し訳ありませんでした。

このお礼蘭の右下にあるピンク色の
「♡お礼を確認する」ボタンの
ようなものです。
テキスト文字が長ければそれに応じて
枠も長くなる？
ピンクでも青でも構いませんけど、
というつもりの質問でした。

通報する
お礼日時：2024/01/29 15:42

参考程度に

No.2

  • 回答者： fujillin
  • 回答日時：

こんばんは



＞フチなしの青い枠（窓）がありますが
「フチなし」と「青い枠」ってどちらがお求めのものなのでしょうね。
また、お使いの用語がよくわからないのですが、「窓」というのはINPUT要素のことでしょうか？

とりあえず、「青い枠のついた入力用のテキストボックス」と解釈しました。
お手軽にやるなら、こんな感じでしょうか。

　<input type=text" style="border:2px solid blue;">

※ フォーカスした際の挙動が、ブラウザによって異なる可能性がありますけれど。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。
質問の説明不足で申し訳ありませんでした。

回答いただいたコードは青い枠（罫線）のみでしたが、
例えばこの右下にピンク色の「♡お礼を確認する」
のようなもので、青色の場合のコードです。
（ちなみにピンクでも構いませんが）

通報する
お礼日時：2024/01/28 20:47

No.1

  • 回答者： rera1016
  • 回答日時：

HTMLだけでは実現できません。


スタイルシートを使い、テキストフィールドの境界部分(border)の設定を入れる必要があります。
    • good
    • 0
    • 件
通報する
この回答へのお礼

早々と回答ありがとうございます。
難しいことが分からないから質問している訳で、
要は、その枠のHTMLコードが知りたかっただけです。

通報する
お礼日時：2024/01/28 17:02

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

今、見られている記事はコレ!

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報