質問編集履歴

5 a

退会済みユーザー

退会済みユーザー

2019/03/07 17:42  投稿

ブロック要素の前にテキストを挿入したい
### ブロック要素の前にテキストを挿入したい
### ブロック要素の前にテキストを挿入したい### ブロック要素の前にテキストを挿入したい### ブロック要素の前にテキストを挿入したい### ブロック要素の前にテキストを挿入したい### ブロック要素の前にテキストを挿入したい### ブロック要素の前にテキストを挿入したい### ブロック要素の前にテキストを挿入したい### ブロック要素の前にテキストを挿入したい### ブロック要素の前にテキストを挿入したい### ブロック要素の前にテキストを挿入したい### ブロック要素の前にテキストを挿入したい
### 前提・実現したいこと
ブロック要素の前にテキストを挿入したい。
### 発生している問題・エラーメッセージ
```
エラーメッセージ
```
### 該当のソースコード
```ここに言語名を入力
ソースコード
```
### 試したこと
ここに問題に対して試したことを記載してください。
### 補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
  • HTML

    24408 questions

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

  • CSS

    17439 questions

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

4 k

退会済みユーザー

退会済みユーザー

2019/03/07 17:41  投稿

ブロック要素の前にテキストを挿入したい
### ブロック要素の前にテキストを挿入したい
ブロック要素の前に順位を5位まで表示させたいです。  
HTML初心者で挑戦しましたが、うまくいかなかったので、  
分かる方いましたら教えてください。  
### 該当のソースコード
```html
<div class="ranking">
   <div id="ranking_search">
   ランキングから探す:
   </div>
</div>
<br>
<div class="ran_q">
   <div class="ran_acran"><p>第1位:<label for="ran_qafour01">質問テキスト</label>
   </div></p>
   <div class="ran_acran"><p>第2位:<label for="ran_qafour02">質問テキスト</label>
   </div></p>
   <div class="ran_acran"><p>第3位:
       <label for="ran_qafour03">質問テキスト</label>
   </div></p>
   <div class="ran_acran"><p>第4位:
       <label for="ran_qafour04">質問テキスト</label>
   </div></p>
   <div class="ran_acran"><p>第5位:
       <label for="ran_qafour05">質問テキスト</label>
   </div></p>   
</div>
```
```css
/*ランキングの順位*/
.ran_q *, .ran_q *:after, .ran_q *:before {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
}
.ran_q .ran_acran {
   position: relative;
   overflow: hidden;
   width: 100%;
   margin: 0 0 1em 0;
   color: #1b2538;
}
.ran_q .ran_acran input {
   position: absolute;
   opacity: 0;
}
/* 質問 */
.ran_q .ran_acran label {
   font-weight: bold;
   font-size: 14px;
   line-height: 1.6em;
   position: relative;
   display: block;
   margin: 0 0 0 0;
   padding: 1em 2em 1em 2.5em;
   cursor: pointer;
   text-indent: 1em;
   border-radius: 0.5em;
   background: rgba(27,37,56,0.1);
}
.ran_q .ran_acran label::before {
   font-family: serif;
   font-size: 1.5em;
   margin-left: -2em;
   padding-right: 0.5em;
   content: "Q";
   
}
.ran_q .ran_acran label:hover {
   transition: all 0.3s;
   color: #00838f;
}
```
### ブロック要素の前にテキストを挿入したい### ブロック要素の前にテキストを挿入したい### ブロック要素の前にテキストを挿入したい### ブロック要素の前にテキストを挿入したい### ブロック要素の前にテキストを挿入したい### ブロック要素の前にテキストを挿入したい### ブロック要素の前にテキストを挿入したい### ブロック要素の前にテキストを挿入したい### ブロック要素の前にテキストを挿入したい### ブロック要素の前にテキストを挿入したい### ブロック要素の前にテキストを挿入したい
  • HTML

    24408 questions

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

  • CSS

    17439 questions

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

3 コードを変更するため、新しく、質問させていただきます。

退会済みユーザー

退会済みユーザー

2019/03/04 17:21  投稿

ブロック要素の前にテキストを挿入したい
### ブロック要素の前にテキストを挿入したい
ブロック要素の前に順位を5位まで表示させたいです。
HTML初心者で挑戦しましたが、うまくいかなかったので、
分かる方いましたら教えてください。
### 該当のソースコード
```html
<div class="ranking">
   <div id="ranking_search">
   ランキングから探す:
   </div>
</div>
<br>
<div class="ran_q">
   <div class="ran_acran"><p>第1位:<label for="ran_qafour01">質問テキスト</label>
   </div></p>
   <div class="ran_acran"><p>第2位:<label for="ran_qafour02">質問テキスト</label>
   </div></p>
   <div class="ran_acran"><p>第3位:
       <label for="ran_qafour03">質問テキスト</label>
   </div></p>
   <div class="ran_acran"><p>第4位:
       <label for="ran_qafour04">質問テキスト</label>
   </div></p>
   <div class="ran_acran"><p>第5位:
       <label for="ran_qafour05">質問テキスト</label>
   </div></p>   
</div>
```
```css
/*ランキングの順位*/
.ran_q *, .ran_q *:after, .ran_q *:before {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
}
.ran_q .ran_acran {
   position: relative;
   overflow: hidden;
   width: 100%;
   margin: 0 0 1em 0;
   color: #1b2538;
}
.ran_q .ran_acran input {
   position: absolute;
   opacity: 0;
}
/* 質問 */
.ran_q .ran_acran label {
   font-weight: bold;
   font-size: 14px;
   line-height: 1.6em;
   position: relative;
   display: block;
   margin: 0 0 0 0;
   padding: 1em 2em 1em 2.5em;
   cursor: pointer;
   text-indent: 1em;
   border-radius: 0.5em;
   background: rgba(27,37,56,0.1);
}
.ran_q .ran_acran label::before {
   font-family: serif;
   font-size: 1.5em;
   margin-left: -2em;
   padding-right: 0.5em;
   content: "Q";
   
}
.ran_q .ran_acran label:hover {
   transition: all 0.3s;
   color: #00838f;
}
```
### したいイメージ画像
![イメージ説明](f853040aab57db27f7d6798aa8f6e0be.png)
  • HTML

    24408 questions

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

  • CSS

    17439 questions

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

2 文字の修正

退会済みユーザー

退会済みユーザー

2019/03/04 11:53  投稿

ブロック要素の前にテキストを挿入したい
### ブロック要素の前にテキストを挿入したい
ブロック要素の前に順位を5位まで表示させたいです。
HTML初心者で色々挑戦しましたが、うまくいかなかったので、
HTML初心者で挑戦しましたが、うまくいかなかったので、
分かる方いましたら教えてください。
### 該当のソースコード
```html
<div class="ranking">
   <div id="ranking_search">
   ランキングから探す:
   </div>
</div>
<br>
<div class="ran_q">
   <div class="ran_acran"><p>第1位:<label for="ran_qafour01">質問テキスト</label>
   </div></p>
   <div class="ran_acran"><p>第2位:<label for="ran_qafour02">質問テキスト</label>
   </div></p>
   <div class="ran_acran"><p>第3位:
       <label for="ran_qafour03">質問テキスト</label>
   </div></p>
   <div class="ran_acran"><p>第4位:
       <label for="ran_qafour04">質問テキスト</label>
   </div></p>
   <div class="ran_acran"><p>第5位:
       <label for="ran_qafour05">質問テキスト</label>
   </div></p>   
</div>
```
```css
/*ランキングの順位*/
.ran_q *, .ran_q *:after, .ran_q *:before {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
}
.ran_q .ran_acran {
   position: relative;
   overflow: hidden;
   width: 100%;
   margin: 0 0 1em 0;
   color: #1b2538;
}
.ran_q .ran_acran input {
   position: absolute;
   opacity: 0;
}
/* 質問 */
.ran_q .ran_acran label {
   font-weight: bold;
   font-size: 14px;
   line-height: 1.6em;
   position: relative;
   display: block;
   margin: 0 0 0 0;
   padding: 1em 2em 1em 2.5em;
   cursor: pointer;
   text-indent: 1em;
   border-radius: 0.5em;
   background: rgba(27,37,56,0.1);
}
.ran_q .ran_acran label::before {
   font-family: serif;
   font-size: 1.5em;
   margin-left: -2em;
   padding-right: 0.5em;
   content: "Q";
   
}
.ran_q .ran_acran label:hover {
   transition: all 0.3s;
   color: #00838f;
}
```
### したいイメージ画像
![イメージ説明](f853040aab57db27f7d6798aa8f6e0be.png)
  • HTML

    24408 questions

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

  • CSS

    17439 questions

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

1 htmlへ順位部分のコードを追記いたしました。

退会済みユーザー

退会済みユーザー

2019/03/04 11:46  投稿

ブロック要素の前にテキストを挿入したい
### ブロック要素の前にテキストを挿入したい
ブロック要素の前に順位を5位まで表示させたいです。
HTML初心者で色々挑戦しましたが、うまくいかなかったので、
分かる方いましたら教えてください。
### 該当のソースコード
```html
<div class="ranking">
   <div id="ranking_search">
   ランキングから探す:
   </div>
</div>
<br>
<div class="ran_q">
   <div class="ran_acran"><label for="ran_qafour01">質問テキスト</label>
   </div>
   <div class="ran_acran"><label for="ran_qafour02">質問テキスト</label>
   </div>
   <div class="ran_acran">
   <div class="ran_acran"><p>第1位:<label for="ran_qafour01">質問テキスト</label>
   </div></p>
   <div class="ran_acran"><p>第2位:<label for="ran_qafour02">質問テキスト</label>
   </div></p>
   <div class="ran_acran"><p>第3位:
       <label for="ran_qafour03">質問テキスト</label>
   </div>
   <div class="ran_acran">
   </div></p>
   <div class="ran_acran"><p>第4位:
       <label for="ran_qafour04">質問テキスト</label>
   </div>
   <div class="ran_acran">
   </div></p>
   <div class="ran_acran"><p>第5位:
       <label for="ran_qafour05">質問テキスト</label>
   </div>
   
   </div></p>   
</div>
```
```css
/*ランキングの順位*/
.ran_q *, .ran_q *:after, .ran_q *:before {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
}
.ran_q .ran_acran {
   position: relative;
   overflow: hidden;
   width: 100%;
   margin: 0 0 1em 0;
   color: #1b2538;
}
.ran_q .ran_acran input {
   position: absolute;
   opacity: 0;
}
/* 質問 */
.ran_q .ran_acran label {
   font-weight: bold;
   font-size: 14px;
   line-height: 1.6em;
   position: relative;
   display: block;
   margin: 0 0 0 0;
   padding: 1em 2em 1em 2.5em;
   cursor: pointer;
   text-indent: 1em;
   border-radius: 0.5em;
   background: rgba(27,37,56,0.1);
}
.ran_q .ran_acran label::before {
   font-family: serif;
   font-size: 1.5em;
   margin-left: -2em;
   padding-right: 0.5em;
   content: "Q";
   
}
.ran_q .ran_acran label:hover {
   transition: all 0.3s;
   color: #00838f;
}
```
### したいイメージ画像
![イメージ説明](f853040aab57db27f7d6798aa8f6e0be.png)
  • HTML

    24408 questions

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

  • CSS

    17439 questions

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

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