質問編集履歴

2 修正しました

coconut

coconut score 2

2018/06/29 17:36  投稿

画像の表示のようにするccsとhtmlを教えてください。
下記の画像のようにcssを指定したいのですが、
色々試行錯誤しているうちにおかしくなってしまいました。
枠の中の文字が上下左右中央になり、スペシャル判から下3行の文字を小さくするにはどうすればよいでしょうか?
お力を貸してください。
![イメージ説明](d3b4a3f009f182fadbcca19a0447930c.gif)
```html
<div class="recommend-entry">
<div class="recommend_title">撮影料</div>
\8,000
</div>
<div style="text-align:center;font-size:xx-large;float:left;padding-top: 70px;">+</div>
<div class="recommend-entry">
<div class="recommend_title">プリント料</div>
スペシャル判<br>デラックス判</div>
スペシャル判 \5,000<br>デラックス判 \6,000<br>ロイヤル判 \7,000</div>
```
```css
/*recommen-entry*/
.recommend-entry {
   position: relative;
   border: 1px solid #666;
   margin:30px;
font-size: 30px;
padding: 3px;
   width: 300px;
   height: 150px;
text-align: center;
float:left;
}
.recommend_title {
   position: absolute;
   top: -10px;
   left: 10px;
   font-weight: normal;
   font-size: 120%;
   background: #fff;
   padding: 0 .5em;
font-size: 20px;
line-height: 20px
}
```
上記のcssで今こうなっています↓
![イ![イメージ説明](43fbca2e6d940f6b988feacaf0fb8a7f.jpeg)
![イメージ説明](962bce349bfb26f223abae1af473c1ef.jpeg)
  • HTML

    11530 questions

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

  • CSS

    7566 questions

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

1 現在の画像追加

coconut

coconut score 2

2018/06/29 17:00  投稿

画像の表示のようにするccsとhtmlを教えてください。
下記の画像のようにcssを指定したいのですが、
色々試行錯誤しているうちにおかしくなってしまいました。
枠の中の文字が上下左右中央になり、スペシャル判から下3行の文字を小さくするにはどうすればよいでしょうか?
お力を貸してください。
![イメージ説明](d3b4a3f009f182fadbcca19a0447930c.gif)
```html
<div class="recommend-entry">
<div class="recommend_title">撮影料</div>
\8,000
</div>
<div style="text-align:center;font-size:xx-large;float:left;padding-top: 70px;">+</div>
<div class="recommend-entry">
<div class="recommend_title">プリント料</div>
スペシャル判<br>デラックス判</div>
```
```css
/*recommen-entry*/
.recommend-entry {
   position: relative;
   border: 1px solid #666;
   margin:30px;
font-size: 30px;
padding: 3px;
   width: 300px;
   height: 150px;
text-align: center;
float:left;
}
.recommend_title {
   position: absolute;
   top: -10px;
   left: 10px;
   font-weight: normal;
   font-size: 120%;
   background: #fff;
   padding: 0 .5em;
font-size: 20px;
line-height: 20px
}
```
```
上記のcssで今こうなっています↓
![イ![イメージ説明](43fbca2e6d940f6b988feacaf0fb8a7f.jpeg)
  • HTML

    11530 questions

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

  • CSS

    7566 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る