CSSで画像をちょっと下に表示したい

Question

CSSで画像をちょっと下に表示したい

解決済

回答 5

投稿 2016/04/22 16:27

評価
クリップ 1
VIEW 16K+

moitaro

score 151

お世話になっております。

文字列<画像>文字列
と表示している所で<画像>が左右の文字列より上部に表示されているので
少し下に表示したいと思っております。

css

.nyuuryoku{
position:relative;
top:10px;
}

html

文字列<img src="eventdata/img/entry.jpg">文字列

としているのに画像がウンともスンとも動きません……

画像をちょっとしたにずらす
cssの表記方法をお教え頂けないでしょうか？

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

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

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

クリップを取り消します
良い質問の評価を上げる

以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します

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

評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します

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

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

評価を下げる理由を選択してください
プログラミングに関係のない質問やってほしいことだけを記載した丸投げの質問問題・課題が含まれていない質問意図的に内容が抹消された質問過去に投稿した質問と同じ内容の質問広告と受け取られるような投稿
詳細な説明はこちら

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

この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
- メールアドレスの認証
  メールアドレスの認証
- 質問評価に関するヘルプページの閲覧
  質問評価に関するヘルプページの閲覧

回答 5 件

評価が高い順
新着順
古い順

+1

positionを使用して突き進む場合)

.hoge
{
    position:relative;
}
.nyuuryoku
{
    position:absolute;
    top:10px;
}

<p class="hoge">
    <span>文字列</span>
    <span class="nyuuryoku"><img src="hoge.jpg"></span>
    <span>文字列</span> ←こちらもabsoluteのleft等で横位置を調整・・
</p>

もし全体的に縦を中央寄せしたい場合)

.hoge
{
    display:inline-block;
    vertical-align:middle;
}

<p>
    <div class="hoge">文字列</div>
    <div class="hoge"><img src="hoge.jpg"></div>
    <div class="hoge">文字列</div>
</p>

とかとか。

投稿 2016/04/22 17:02

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

画像のスタイルに

vertical-align:middle;

を追加すると良いと思います。(他のパラメータも試してみるのをオススメします）
微調整はline-heightでやると良いと思います。

例えば

.nyuuryoku{
    line-height:1.3;
}
.nyuuryoku img{
    vertical-align:middle;
}

あと、卑怯臭い方法ですが、

.nyuuryoku img{
    display:inline-block;
    margin-bottom:-5px; /* ここの値を変えると文字の位置が変わる */
}

投稿 2016/04/22 16:40

編集 2016/04/22 18:01

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2016/04/22 16:44

その
＞画像のスタイルに
の指定方法が分からないのです……

申し訳ないのですがご助力頂けますようよろしくお願い申し上げます。

その＞画像のスタイルにの指定方法が分からないのです…… 申し訳ないのですがご助力頂けますようよろしくお願い申し上げます。

キャンセル
2016/04/22 17:14

指定方法とはこのようなことでしょうか？

htmlのhead内に<link rel="stylesheet" type="text/css" href="パス名.css">と記述するとcssが適用されます。

指定方法とはこのようなことでしょうか？ htmlのhead内に<link rel="stylesheet" type="text/css" href="パス名.css">と記述するとcssが適用されます。

キャンセル

0

OV222さんのを拝借しますが、、、

.nyuuryoku img{
  vertical-align:bottom;
}

とすると、このクラスのimg要素がだけが変更されます。
もしくは、

.nyuuryoku img{
  margin-top:20px;
}

等良いのではないでしょうか？

こまかいデザインは、html側で<div class=""></div>で記述してあげて、css側で設定してもよいかと思います

投稿 2016/04/22 17:11

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2016/04/22 17:29

ご回答ありがとうございます。

html
--------

お申込みは<a href="regist.php"><img src="img/entry.jpg"></a>入力して下さい。

--------

css
--------
.nyuuryoku img{
margin-top:20px;
}

--------
とやっても文字ごと上下してしまうのです……

画像だけ上下に設定したいのですが
私の質問の仕方が不味かったのでしょうか？

ご回答ありがとうございます。 html -------- お申込みは<a href="regist.php"><img src="img/entry.jpg"></a>入力して下さい。 -------- css -------- .nyuuryoku img{ margin-top:20px; } -------- とやっても文字ごと上下してしまうのです…… 画像だけ上下に設定したいのですが私の質問の仕方が不味かったのでしょうか？

キャンセル
2016/04/22 18:16

spanをdivに変えて、ちなみにa要素もインライン要素だった気がしますので、cssでa要素をdisplay:block;と記述してもらえれば、画像全体にリンクが貼れると思います。

spanをdivに変えて、ちなみにa要素もインライン要素だった気がしますので、cssでa要素をdisplay:block;と記述してもらえれば、画像全体にリンクが貼れると思います。

キャンセル

0

spanがインライン要素だからではないですか？

でなければspanにrelativeでimgにabsoluteで解決です。

投稿 2016/04/22 18:00

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2016/04/22 19:17

spanをdisplayでblock化した後にimgにスタイル指定。

span.nyuuryoku{
display:block;
position:relative;
}
span.nyuuryoku img{
position:absolute;
bottom: 任意 px;
}

spanをdisplayでblock化した後にimgにスタイル指定。 span.nyuuryoku{ display:block; position:relative; } span.nyuuryoku img{ position:absolute; bottom: 任意 px; }

キャンセル
2016/04/22 19:22

幅の指定もお忘れなく！

inline-blockで出来れば幅の指定要りませんが、指定できるならした方が安心です。

幅の指定もお忘れなく！ inline-blockで出来れば幅の指定要りませんが、指定できるならした方が安心です。

キャンセル

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

CSS

score 3 · Accepted Answer · 2016-04-22T22:30

画像を10px下げたいだけならこのようにするだけで良いです。
なお、.nyuuryokuのpositionプロパティの値をabsoluteにすると、その要素が通常の文書の流れから外れてレイアウトが乱れるので注意してください。

注意点としては、画像を下に10px下げることでp要素の内容からはみ出してしまうので、p要素のmarginプロパティやpaddingプロパティに十分な値を設定して他の要素と重ならないようにしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
.hoge {
  /*
   * 子要素の位置をpositionプロパティで調整する場合、その基点とする親要素にも適切なpositionプロパティの値を指定しておく
   * 今回は通常の文書の流れにある要素と見られるので relative を指定
   * (実際には子要素がrelativeであれば親要素の指定は必要ない事が多いが、一応指定しておく)
   */
  position: relative;
  margin: 0; /* 重なるとはどういう状態か確認できるようにここでは0を指定しています */
  padding: 0; /* 画像を下げた分、それを下回らない適切なmarginまたはpaddingを設定してください */
  background-color: #ddd;
}

.nyuuryoku {
  display: inline-block;/* 文章の流れの中に置いている画像なので inline でも良いが今回は inline-block が適当 */
  position: relative; /* 通常の文章の流れにある要素なので relative が適切 */
  top: 10px; /* 下に 10px 下げる */
}

.content {
  background-color: #000;
  color: #fff;
}
</style>
</head>
<body>
<p class="hoge">お申込みは<span class="nyuuryoku"><a href="regist.php"><img src="img/entry.jpg" alt="代替テキスト"></a></span>入力して下さい。</p>
<div class="content">.hogeのmarginやpaddingに十分な値が与えられていないと下にある要素と重なるので注意してください。</div>
</div>
</body>
</html>

追記
この内容は質問で試されているものと同じです。
このコードのみで表示させると画像の位置は10px下にあることが確認できると思います。

moitaroさんの環境で画像が動かないということは、何か別のスタイルで上書きされている可能性があります。
ブラウザのデベロッパーツールなどで該当箇所に適用されているスタイルを確認してみることをおすすめします。

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

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

CSSで画像をちょっと下に表示したい

css

html

関連した質問

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

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

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

CSSで画像をちょっと下に表示したい

css

html

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

関連した質問

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

SNSアカウントでログイン

teratailアカウントでログイン