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

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

ただいまの
回答率

88.80%

イメージ画像内の文字装飾

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 369

ocha9

score 23

イメージ説明### 前提・実現したいこと
2カラムレイアウトで、
①画像の左にメニューを立てる。メニューの字(黒色)、背景色は白色で分かりやすくしたい。

②ノートパソコン13インチ程度でクロームとIEで最大化してずれない程度に見せたい。

③画像の中のメニューは

リストメニューを長方形(左)でずれた大きさで
手前に画像(右)を後ろにしたい。

以上よろしくお願いします。

ここに質問の内容を詳しく書いてください。

HTML,CSSでポートフォリオ作成中です。
トップ画面に、空の写真をバーンと貼り
その中に、1はじめに2どこの空?3空の街の一口メモ
みたいな感じで左側に文字(リストメニュー)を入れています。

こちらに、☆1.画像の中の文字の色と、背景色を変える方法
☆2.写真内に左揃えでリストの文字を入れる方法
☆3.写真で一つボックスイメージで、リストメニューを長方形でずれた大きさで
リストメニューを手前に画像を後ろにする方法
☆4.スマホサイズは今はいいですが、13インチパソコン画面で最大化でみた際
IE,クロームであまりずれない程度のデザインする方法
を聞きたいです。

発生している問題・エラーメッセージ

フォントの色が変更出来ていないです。
あと背景色も白にしたいができていません。

あと、行間隔もあかないです。

エラーメッセージ

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
 <style>
#wrap{
width:1000px;
margin:0 auto;
}
.menu{
float:left
}
.menu a{
color: black;
font:bold 20px /3em; 
display: block;
 }
.photo{
float:right;
opacity: 0.3;
}
li{
list-style-type:none;
}
 </style>
<body>
    <div id="wrap">
        <div class="menu">
    <ul>
        <li><a href="#">はじめに</a></li>
                <li><a href="#">どこの海?</a></li>
        <li><a href="#">海辺の街の一口メモ</a></li>
    </ul>
        </div>
    <img src="photo/sky.jpg" class="photo">
    </div>
</body>
</html>
html,css言語使用しています。
ソースコード

試したこと

補足情報(FW/ツールのバージョンなど)

```

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yoshinavi

    2019/06/02 15:42

    >フォントの色が変更出来ていないです。
    → CSSに変更する設定がありません。

    >背景色も白にしたいができていません。
    → 同じくCSSに変更する設定がありません。

    セレクタ名称を確認してみてください。

    キャンセル

  • ocha9

    2019/06/03 08:49

    ありがとうございます。
    してみます。

    キャンセル

  • dit.

    2019/06/03 10:55

    質問のコードブロック化がうまくいってません。
    下記のような形に編集してください。

    ```html
    ここにコード
    ```

    キャンセル

回答 3

checkベストアンサー

+1

こんな感じでしょうか?
※提示のコードを一部変えています。

<div id="wrap">
  <ul class="menu">
    <li><a href="#">はじめに</a></li>
    <li><a href="#">どこの海?</a></li>
    <li><a href="#">海辺の街の一口メモ</a></li>
  </ul>
  <img src="https://placehold.jp/1000x750.png" class="photo">
</div>
#wrap {
  width: 1000px;
  margin: 0 auto;
  position: relative;
}

.menu {
  position: absolute;
  top: 100px;
  left: -100px;
  border:1px solid #3300FF;
  padding-right: 5px;
}

.menu a {
  display: block;
  color: #000;
  text-decoration: none;
  font: bold 22px/3 sans-serif;
}

.menu li {
  list-style-type: none;
}

.photo {
  width: 100%;
  opacity: 0.3;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/04 07:12

    ご回答ありがとうございます。ただ、大変恐縮なんですが、position relativeとabsoluteは使わず、z-indexと配置で重ね合わせは可能でしょうか。
    a 要素をブロック化して、色付けるは、参考になりました。ブロック化は、最初にするんですね。
    ありがとうございます。

    キャンセル

  • 2019/06/04 17:53

    >position relativeとabsoluteは使わず、z-indexと配置で重ね合わせは可能でしょうか。

    → 残念ながら出来ません。
    「z-index」を有効にするには対象となる各要素に「position:static;」以外が設定されなければなりません。

    つまり、必然的に「position:relative;」「position:absolute;」「position:fixed;」「position: sticky;」のどれかが設定されている必要があります。

    キャンセル

+1

いまいち理想の形がわからないので完成イメージを質問に提示してもらえると回答が得られやすいかと思います。(手書きでもいいので)

とりあえず気になった部分があるので指摘します。

  • <style>~</style><head>内に入れた方がいいのでは。
  • .mainbackface-repeat: no-repeat;background-repeat: no-repeat;
  • <ul class="nav">ならスタイルシートは.nav{~}で、<ul id="nav">ならスタイルシートは#nav{~}となります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

.menu li{
        list-style-type:none;
        font-weight: bold;
        font-size:22px;
        line-height: 3em;
        }
        .menu{
            border:1px solid #3300FF;
            padding-right:5px;
          }
        .menu a{
        color:#000000;
        text-decoration: none;
        }


一部解決しました。後重ねて、メニューを前に出すのを試しています。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 88.80%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る