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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

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

Q&A

解決済

2回答

1649閲覧

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

NamaKori

総合スコア81

HTML

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

0グッド

1クリップ

投稿2017/03/19 10:57

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

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

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

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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様の公開しているオーサリングツールです。しかもなんと無料日本語に対応しているようです。HTML5対応!すごい!

こちら、天下のMicrosoft様のリリースしたオーサリングツールです。Microsoft FrontPageの次バージョンとして公開されました。これも無料日本語に対応しているようです。ですが、2012年に開発が終了して、その後無償で配布するようになったようなので、対応しているHTML, CSSのバージョンがかなり古いと思われます。あまりお勧めできません

Eclipseベースの無料のソフトウェアです。HTMLを簡単に記述できて、機能が豊富でWebサイトの開発を効率よく行うことができます。

どちらもAdobeの製品で有償です。有償というだけあって、とても高機能で、簡単に複雑なウェブサイトを作成できますが、HTML, CSSの知識がある程度必要になります。

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

投稿2017/03/19 14:28

s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

NamaKori

2017/03/21 12:40

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

0

ベストアンサー

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

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

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

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

投稿2017/03/19 11:27

編集2017/03/19 11:30
tomopro

総合スコア57

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

NamaKori

2017/03/19 11:42

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

2017/03/19 11:56 編集

そうですね~ HTMLもCSSもそうですが上から読み込まれます 画像の順番を変えたり、大体の場所に持っていくことは不可能ではないですが やはり、幅や大きさ、スペースなどを調整できるCSSと一緒に学んだ方が宜しいかと。 先程申し上げたProgateはリアルタイムで変更を見ながら順に教科書のように学んで行ける無料のサービスなのでぜひ一度試してみて下さい。 また近くの本屋などでHTMLやCSSなどの入門書籍はコンピューターやプログラミングの場所にありますので、もし立ち寄る機会があるのであれば見てみるのもオススメします~(人それぞれですが自分は本を買って1度読んで読み捨てるタイプの人間なのでオンライン学習サービスを使用しています)
NamaKori

2017/03/21 12:44 編集

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問