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

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

ただいまの
回答率

90.50%

  • HTML

    8991questions

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

htmlで画像を貼る場所を指定する方法

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 446

NamaKori

score 65

いずれhtmlでwebページを作成していこうと考えている全くの初心者です。

htmlで、webページに画像を貼りたいとなった時に、どのように自分がおもった場所に指定するのだろうかと、ふと思ったので投稿しました。

私が今、勉強しているswift言語は、xcodeという統合開発環境を用いて、画面の〜にlabel又は画像をドラック&ドロップすることで、思い通りに配置することができるのですが、

htmlは、コードを記述して、更新、確認 という流れだと思います。
となると、画像やlabelを配置するのに、コードを使わなければいけないと思います。
swiftを勉強している私からすると、面倒くさいと思ってしまうのですが、実際のところはどうなんでしょうか?

便利なソフトなどありましたら、教えてください。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

回答 2

+5

HTMLとは

HTMLは、ウェブサイトを作るためのマークアップ言語という言語です。 HTMLは「ここの文章にはこのような意味が持たせたい」というように、その部分がどういう役割を持つかを表すための言語です。つまり、HTMLでできることはウェブサイトの構造を作ることです。なので、質問者さんが実現したいような「画像を自分の思った場所に表示させる」ということはHTMLだけではできません。自分の思った場所に画像を配置するには、CSSというウェブサイトの見た目を装飾するための言語を扱う必要があります。しかし、ウェブサイトを作るとき、HTMLの知識は必須かつもっとも重要なので、最初に取り組むべきです。また、HTMLを学習するときは、HTML5というHTMLの5番目にあたるバージョンを学習していくことをお勧めします。HTMLのことをもっと詳しく知りたい場合はHTML5入門とGoogleで検索すればたくさんのウェブサイトが出てきますし、書籍もたくさん出ているので、購入して読んでみると良いかもしれません。

CSSとは

CSSとは、上で説明したように、ウェブサイトの見た目を装飾するための言語です。HTMLで作成されているウェブサイトにデザインを行う場合はCSSが一般的に用いられます。CSSとHTMLを使うことによって質問者さんの「画像を自分の思った場所に表示させる」ということはほとんど実現できると思います。
以前のHTMLのバージョンでは、ウェブページの装飾を行うための機能が備わっていましたが、現在それらの機能は非推奨もしくは廃止されています。すべての見た目に関することはCSSで行うべきで、たとえ文字の大きさであったとしてもHTMLで制御すべきではありません。この主な理由は、HTMLは構造を作るためだけのものであって、HTMLの装飾を行うための機能でも実際の表示までは保障されていないので、ブラウザ間で表示が大きく異なる場合があるためです。

HTML, CSSは面倒くさい

ある程度のことであれば、Webオーサリングツールというウェブサイトを簡単に作成できるツールを利用すれば手間もかからずにウェブページを作成できると思いますが、複雑なデザインになるとやはりある程度HTML, CSSについての知識が必要になってきます。私が思いつくWebオーサリングツールは以下のようなものがあります。

  • Google Web Designer
    あのGoogle様の公開しているオーサリングツールです。しかもなんと無料日本語に対応しているようです。HTML5対応!すごい!
  • Microsoft Expression Web
    こちら、天下のMicrosoft様のリリースしたオーサリングツールです。Microsoft FrontPageの次バージョンとして公開されました。これも無料日本語に対応しているようです。ですが、2012年に開発が終了して、その後無償で配布するようになったようなので、対応しているHTML, CSSのバージョンがかなり古いと思われます。あまりお勧めできません
  • Aptana Studio
    Eclipseベースの無料のソフトウェアです。HTMLを簡単に記述できて、機能が豊富でWebサイトの開発を効率よく行うことができます。
  • Dreamweaver CCAdobe Muse
    どちらもAdobeの製品で有償です。有償というだけあって、とても高機能で、簡単に複雑なウェブサイトを作成できますが、HTML, CSSの知識がある程度必要になります。

ただし、このようなツールはHTML, CSSを綺麗に出力してくれるのかがネックになり、結局HTML, CSSをある程度学習しなくてはならない場合もあるので、質問者さんの状況によってWebオーサリングツールを使用するか、書籍などを読んでHTML, CSSを学習しウェブサイトを独力で作成するかなどを選択する必要があります。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/03/21 21:40

    googleのオーサリングツールは使ってみたいと思いました、
    しかし、それを使いこなすにも また時間がかかると思うので、
    まずは、HTML CSS の基本を押さえてから、使っていくかは考えたいと思います。



    キャンセル

checkベストアンサー

+4

HTMLでclassを指定し、CSSで場所を決めることが出来ます。
ドラッグ&ドロップでサイトを構築するのは
確かAdobeのDreamweaverなどで出来ますが、こちらは有料になってしまうので
すぐに変更を見たいのであればBracketsやAtomといったプログラミングエディタを使用することをオススメします。
ちなみに拡張機能といった機能を拡張するもので自動でHTMLのタグなどを補完してくれたりなど便利なものがたくさんあります。

画像などはコードを書いて場所を指定する感じになるため少し難しく感じられるかもしれませんが、角を丸くしたり影を指定して立体っぽくしてみたりなど様々なことができるので習得すると良いサイトが作れるようになると思います。

他社のサービスになるため、こちらで言うのは宜しくないのかもしれませんが、私はProgateというプログラミング学習サービスを使って学習しています。

最後に
HTMLという言語はCSSとカップルのような存在なので一緒に使わないとサイトが
寂しいことになります...
HTMLは文字を入れたり、画像を貼ったり、パーツを作り
CSSで場所や色、フォント、幅などを指定してあげるとTeratailのように
メニューや質問欄などを作ることが出来ます。
絵で言う線書きがHTMLで絵の具がCSSといったものです。
わかりにくかったらすみません。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/03/19 20:42

    CSSが、どのようなものなのかは理解できたのですが、部品の場所を決めるときには、やはりコードで記述することになってしまいますよね?

    キャンセル

  • 2017/03/19 20:56 編集

    そうですね~
    HTMLもCSSもそうですが上から読み込まれます
    画像の順番を変えたり、大体の場所に持っていくことは不可能ではないですが
    やはり、幅や大きさ、スペースなどを調整できるCSSと一緒に学んだ方が宜しいかと。
    先程申し上げたProgateはリアルタイムで変更を見ながら順に教科書のように学んで行ける無料のサービスなのでぜひ一度試してみて下さい。

    また近くの本屋などでHTMLやCSSなどの入門書籍はコンピューターやプログラミングの場所にありますので、もし立ち寄る機会があるのであれば見てみるのもオススメします~(人それぞれですが自分は本を買って1度読んで読み捨てるタイプの人間なのでオンライン学習サービスを使用しています)

    キャンセル

  • 2017/03/21 21:27 編集

    コードで書くのも悪くはないかと いろいろな意見を聞いてそう思いました。
    やはり、実際どのような感じなのかは、触れてみないと分からないので、
    まずは、Progateで基本を勉強したいと思います。

    キャンセル

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

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

関連した質問

  • 解決済

    XcodeでWebViewをデバッグしたい【swift】

    表題の件ですが、 XcodeのデバッグでWebを表示させたいのですが、 デバッグ時にURLの画面が表示されず、 真っ白なままです。 プログラムは、 Swift Docs 009 

  • 解決済

    [swift]Optionalの考えについて

    nilは何もないというのは例えば玉入れで玉が入ってない。その状態がnilでいいのでしょうか? そしてOptionalは玉入れをスタートする前の状態つまり始まると玉が入る可能性もある

  • 解決済

    swift : textFieldが複数ある場合に、datepickerの定義の方法

    現在、iphoneアプリを作成しているswift初心者です。 日付の期間指定の部分をを作成していまして、 FromのtextFieldをタップすると、datepickerが表示さ

  • 解決済

    Swift クラス定義

    プログラミングに関してはほとんど無知識で、今年からC言語を大学で習い始めて、つい最近swiftの勉強を始めました。しかし、クラス定義がなんなのか、定義する利点はなんなのかいまいちよ

  • 解決済

    swift ゲームアプリのスタート画面について

    前提・実現したいこと 簡単なゲームのスタート画面を製作しようとネットから拾ってきたものを、手直ししていました。アプリ開発自体独自では初めてなもので、至らない点が多いいと思いますが

  • 解決済

    【swift3】URLオブジェクトのアンラップ【URLSession】

    前提・実現したいこと こちらを参考に、こちらのページの15番目のアプリ(swift2で作成)と同じものをswift3で作っているのですが どうしてもエラーが解決できずに困ってい

  • 解決済

    swift3.0 入力文章を自動改行する方法

    swift3.0, xcode8.1で単語帳アプリを制作しています。 単語の意味の説明を入力する方法として、UITextViewを利用し、別のviewController上でその文

  • 解決済

    UIWebViewNavigationTypeについて

    func webView(_ webView: UIWebView, shouldStartLoadWith request: URLRequest, navigationType

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

  • HTML

    8991questions

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