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

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

ただいまの
回答率

90.51%

  • HTML

    8974questions

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

  • Webサイト

    1078questions

    一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

ホームページ画像を中心に持ってきたい。

解決済

回答 4

投稿 編集

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

tomo39-.

score 12

ホームページの画像を中心に持っていきたいです。
プログラマの方に依頼して、ページを作成していただきました。
大変素早く作っていただき、感謝しております。

基本的なコードしか知らないので、こちらは作っていただいたのをいじるぐらいです。
画像を align centerに設定しても動きません。

FTPサーバー経由でなんどもチャレンジしたのですが・・・
失敗に終わっております。

参考までにご覧ください、レジュメの代行サービスページです。
hightouch1.tokyo 

一部コードを記載します。
よろしくお願いします。

<h1 class="center"> サンプル </h1> 
                                                <div class="textcenter"><img align="left" src="images/IMG_4708.JPG" alt="SAMPLE2" height="400px" width="300px" align="center"></div>    
                                                <div class="textcenter"><img  align="rigtht" src="images/IMG_4709.JPG" alt="SAMPLE1"  height="390px" width="300px" align="center"></div> <br clear="both">    
                                         <p class="p_no_margin"><i class="fa fa-hand-o-right" aria-hidden="true"></i>レジュメのページ数は原則1枚です。職務歴が長い場合、ページ数が2枚でも許されています。</p>
                                         <p class="p_no_margin"><i class="fa fa-hand-o-right" aria-hidden="true"></i>弊社はRSSフィードに登録をして、レジュメのアドバイスを採集しています。</p>
                                                                <div class="textcenter"><img align="left" src="images/1040900641.jpg" alt="toeic" height="100px" width="250px" align="center"></div>
                                                                <div class="textcenter"><img align="right"src="images/IMG_3294.PNG"  style="float:left" alt="toeic" height="250px" width="200px" align="center"></div> <br clear="both">
                                                                </ul>                    

こちらも同じく真ん中に表示させたいです。

FireFoxをお持ちのお方は、Firebugなどをみてお調べくださいませ。
お手数ですが、どうぞよろしくお願いします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 4

checkベストアンサー

+3

「motuo」さんの回答の様に<div class="textcenter">の部分にCSSが存在しない様に思います。実際は記載されていても、質問者さんがイジった際に、誤った記述により、適用されていない可能性が高いので、ご確認ください。

また、単純にそこだけ現状で適用したいのであれば、

<div class="textcenter">


<div style="text-align:center">


ではどうでしょうか?

-追記-
先程気付きましたが、「textcenter」と「text-center」は違うクラスです。ご確認ください。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/01/03 23:54

    「motuo」さんからいただいた内容で、確かに、textcenterというclassが上手く当たっていないようでした。しかし、yoshinaviさんからの回答で、<div style> で classなしにスタイルを当てれることが非常にわかりやすく、単純に「現状」だけを直したい場合にすごく活用できると思いましたので、ベストアンサーに選ばせていただきました。
    「motuo」さん、ラインの仕分け、divで要素を一つにまとめる方法をご教授いただき、ありがとうございました。

    キャンセル

  • 2018/01/04 05:56

    解決されて何よりです。
    「textcenter」と「text-center」のクラス名記述違い等は、私もイジる際によくある失敗例で、「何故CSSが効かないんだ?」と焦れば焦るほど見落として気が付かない場合が多々あります。
    仕様を見直す際に各コードがシンプルなほど見易くなりますので、大変でしょうが、頑張ってください。
    (^^)

    キャンセル

  • 2018/01/04 10:21

    ありがとうございました。大変助かりました。
    似たようなコードが重複してたり、時にはスペースがあるかないかでも、
    スタイルが効かないときがあるんですね。勉強になりました。

    英語でもIを使いすぎた論文は減点の対象になったりすることもあるほどに。
    言語の勉強とは奥行きが深いものですね・・・。

    次回、こちらで何かお手伝いできる機会であれば、何なりとお知らせください!

    キャンセル

+2

若干のエスパー回答+未検証になりますが、ご容赦ください。
拝見したホームページでは、textcenterというclassが上手く当たっていないです。
なので、CSSに下記を追加してみてください。

.textcenter{
    text-align:center;
}

あとは、

        <div class="textcenter">
            <img align="left" src="images/01.png" alt="SAMPLE2" style="height: 400px;width: 300px;">
        </div>
        <div class="textcenter">
            <img align="left" src="images/02.png" alt="SAMPLE2" style="height: 400px;width: 300px;">
        </div>


となっているのを、1つのdiv要素にまとめてみましょう。

        <div class="textcenter">
            <img align="left" src="images/01.png" alt="SAMPLE2" style="height: 400px;width: 300px;">
            <img align="left" src="images/02.png" alt="SAMPLE2" style="height: 400px;width: 300px;">
        </div>

追記

質問者さんのご要望に沿うかどうかは分かりませんが、こんな感じで真ん中にそろえる事が出来ます。

イメージ説明

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/12/29 11:49

    今から試してみます。ありがとうございます。

    キャンセル

  • 2017/12/29 12:00

    CSSスタイルシートには、

    .text-center {
    text-align: center
    } 

    は記載されているようでした。

    キャンセル

  • 2017/12/29 12:04 編集

    imgを読み込む時のファイル名が、こちらの画像と紐付けされておらず表示できませんでした。いただいたコードのコピペではできません。。。

    キャンセル

  • 2017/12/29 12:20

    試しましたが、無理でした。やはりpaddingとmarginで中心に揃えたくありません。
    もうしこし、imgコードの内のインラインCSSスタイル、について調べたいと思います。

    キャンセル

+2

左右センターと読み取りました。

<div class="textcenter">
  <img  src="images/1040900641.jpg" alt="toeic" height="100px" width="250px" >
</div>
<div class="textcenter">
  <img src="images/IMG_3294.PNG"  style="float:left" alt="toeic" height="250px" width="200px" >
</div>


掲示されたコードにはimgタグの中にalign="left"とalign="center"が混在していました。
親のdivのtextcenterクラスにtext-align:centerが効いているのであれば、align属性を削除するだけでセンターになるはずです。
そもそも、imgのalign属性はhtml5で廃止されているので、使わないようにしましょう。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/12/29 12:56 編集

    align属性を削除しても、centerになりませんでした。
    CSSのスタイルシートでは、textcenterなっているため、左右センターです。

    コードです。

    <ul>
    <div class="textcenter"><img src="images/1040900641.jpg" alt="toeic" height="100px" width="250px" ></div>

    <div class="textcenter"><img src="images/IMG_3294.PNG" style="float:left" alt="toeic" height="250px" width="200px" >

    </div> <br clear="both"> </ul>

    キャンセル

+1

試しにimgの親のdivに幅を持たせてはどうですか?
提示されている部分が少ないのでこれができるかどうかですが…

.textcenter{
    width:500px;
}


それか左右のmarginをautoにします

.textcenter{
    margin-left:auto;
    margin-right:auto;
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/12/29 11:29

    ご返信いただきありがとうございました、
    CSSの編集はあまりすすんでしたくないのですが、、
    ほかのパーツも同じく真ん中に来てしまいたくないので。

    できればインラインでHTMLファイル(この場合PHPなのですが)より、
    画像部分のパーツのみを編集したいです。

    キャンセル

  • 2017/12/29 14:24

    他の方もおっしゃっていますがtextcenterクラスに対してがcssが当たっているように見えません。

    キャンセル

  • 2017/12/29 14:49

    わかりました。CSSを当ててみたいと思います。

    キャンセル

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

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

関連した質問

  • 解決済

    ページ上部にスクロール設定について

    ページの右下に、クリックするとページ上部に行く設定をしたのですが、スクロール位置を1000以下にすると非表示に設定をhead内に記述したのですが実行できません。 ご教授頂けますと嬉

  • 解決済

    flexboxのalign-items(center)がchrome(PC)にしか反映されない

    前提・実現したいこと HTML5とCSS3(およびsass compass skeleton)を用いてWebサイトを作成しており、flexboxとsass(compass?)の@m

  • 受付中

    レスポンシブルデザインについて

    ページ上部のメニューをクリックしたらスマホのサイトのようなメニューバーを表示させたいのですがどうすればよろしいでしょうか。 ちなみにこちらのサイトを参考にしました https://

  • 解決済

    レスポンシブデザインについて

    この画像の上部の油そば池袋とありますが幅を小さくしていくと 赤枠の箇所に油そば池袋と入れたいのですがどうすればよろしいでしょうか <!DOCTYPE html> <html

  • 解決済

    HTMLで作成している検索ボックスの入力欄の高さを広げたいです。

    前提・実現したいこと HTMLで作成している検索ボックスの入力欄の高さを広げたいですが 広げることができません。 cssで設定しているのですが上手くいかないのでご教授いただけた

  • 解決済

    divで囲んだ部分が縦に並ばない

    前提・実現したいこと divのitemsクラスで囲んだ部分が縦に並ばない。 col-xs-8とcol-xs-4を使い画面を8:4に分けてその4の部分に画像を縦に並べたい。 発生

  • 解決済

    footerとdivで囲んだ間の要素に隙間を空けたい

    前提・実現したいこと footerと3番目の<div class="advertisement">で囲んだ間の要素に隙間を空けたいが、今ぴったりくっついている。 発生している問

  • 解決済

    画像の下にテーブルが来てしまう

    前提・実現したいこと 画像の下にテーブルが来てしまう。 画像とテーブルの間に30px隙間を空けて配置したい。 発生している問題・エラーメッセージ エラーは特に発生していない。

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

  • HTML

    8974questions

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

  • Webサイト

    1078questions

    一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。