青い枠のみのHTML

解決済

質問者：toufu-mental
質問日時：2024/01/28 15:45
回答数：4件

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

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

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

通報する

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

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者：優里さん
回答日時：2024/01/29 21:26

こんな感じでしょうか。

<!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>

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2024/01/30 00:02

参考程度に

No.3

回答者： gura_
回答日時：2024/01/28 21:12

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>

- 0
- 件

通報する

この回答へのお礼

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

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

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

通報する

お礼日時：2024/01/29 15:42

参考程度に

No.2

回答者： fujillin
回答日時：2024/01/28 17:58

こんばんは

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

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

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

※ フォーカスした際の挙動が、ブラウザによって異なる可能性がありますけれど。