以下のプログラムはHTMLのプログラムの抜粋です。
<div>4個:</div>2個の割合です。
この場合
<div>3個:</div>3の割合で丁度つり合いがが取れます。
なので、どこか一か所<div>~</div>に変更しないといけないです。
私は、著書でCSS関連を学んでいる途中なので、初心者であり、参考書通りに、
転記したのかも疑問もあります。
取り分け、以下のプログラムですが!もし、</div>に変更する場合、何処を
変更すればいいでしょうか? 現在プログラムが著書通りに動いてくれいません
ので、原因としては</div>のバランスが取れていないのからだろうと思っています。
よろしくお願いいたします。
--------------------------------------------------
<div id="wrap"
<div class="content">
<div class="main-center">
<h1>About</h1>
<p>SNAPPERS代表、織姫 彦星のプロフィールや経歴の紹介ページです。</p>
<section class="profile clearfix">
<div class="profile-txt">
<h2 class="icon">Profile</h2>
<p><span>SNAPPERS 代表:織姫 彦星</span><br>アナログ、デジタルを問わず、トイカメラやぽらポラロイド、ビデオカメラに至るまで、あらゆるカマラに夢中になって遊んでいるうちに自然とカメラマンとして道を志すようになる。</br>大学卒業後、有名なカメラマンのアシスタントを経て渡米。世界各国を放浪しながら撮影する中で、現在のアウトアカメラマンとしてのスタイルを確立する。2016年に帰国し、「SNAPPERS」を設立。<br>現在は、雑誌の表紙やカタログの撮影を中心に、映画作品などにもカメラマンとして参加するなど幅広く活躍している。</p>
</div>
<img src="images/about-profile.png" alt="織姫 彦星プロフィール画像"class="profile-image">
</section>
<section class="career">
<h2 class="icon">Caree and job history</h2>
<table>
<tr>
<th>1944年3月</th>
<td>〇▽角形芸術大学写真家 卒業彦星写真研究所に入社、彦星英明氏に師事</td>
</tr>
<tr>
<th>2012年3月</th>
<td>彦星写真研究所を退社して欧米、世界各国を放浪しながら撮影を続ける</td>
</tr>
<tr>
<th>2012年8月</th>
<td>イタリア・ミラノで開催されたコンクールにて、審査特別賞受賞</td>
</tr>
<tr>
<th>2016年1月</th>
<td>帰国し「SNAPPERS」を設立</td>
</tr>
<tr>
<th>2016年4月</th>
<td>Aichi Musimにて初の写真展「Snap!Snap!」を開催</td>
</tr>
</table>
</section>
</div>
No.1ベストアンサー
- 回答日時:
※ 先の質問から誘導された前回答者の#4です。
記載されたHTMLからだけで判断すると、
最後の</div>の下に、不足分の</div>を2つを追加するしかないです。
~~~~
</table>
</section>
</div>
</div>
</div>
とします。ただし、
HTMLの文法上これは消去法で、HTMLとしての辻褄をあわせただけの話です。
<section>の存在を考えると途中に、</div>を入れる事はありえないから・・・
で、
思い通りにならないのは、そのせいだけではなくて、
1行目の
<div id="wrap"
これがが大原因(ミス)です!
<div id="wrap">
に正しいHTMLに↑↑変更しましょうね。
その上で、
不足分の</div>を2つを追加する!という事になります。
もし、それで意図しない表示になるのなら、HTMLの構造を最初から見直す(作り直す)か、CSSの適用が出来ていないのでしょう・・・
再度、ご回答くださいましてありがとうございました。
ご指摘通りに>を追加したところ
私が使っている、著書が推進しているBracketsのテキストっディタ
では>を追加した瞬間に</div>が以下通り自動的に追加されました。
<div id="wrap"></div>
従って</div>1個追加されましたので!残り
あと1個</div>をどこかに追加しないと、いけないです。
ちなみに、</div>を1個追加しただけで、
文字の[SNAPPERS 代表:織姫 彦星</span><br>アナログ、
デジタルを問わず、・・・]の文字のbakkuguranndoが今まで
白色でしたが、透明になりました。
著書は、白ですが!著書と文字の位置が違っています。
もう少しです。
ちないみ!
<div class="content">
<div class="main-center">
ですが、これに対して、1個</div>
を追加しないといけに気がします。
No.3
- 回答日時:
#1です お礼拝見済み
><div id="wrap"></div>
>従って</div>1個追加されましたので!残り
A,
いいえ!
数合わせじゃないんだから・・・
それは貴方のテキストエディタが勝手に、
<div id="wrap">の次に</div>を補完してくれただけの話です。
それは意味の無い事なので、
テキストエディタを使わない想定なのに、勝手に補完されたら別物のHTMLになるでしょw
なぜ、それを削除して戻さないの?・・・・
1行目はこれだけにする事
<div id="wrap">
あとは分かりますよね。
また-1するから、元に戻って2つ不足 → 最後に+2つ足す
No.2
- 回答日時:
No.1さんの回答にあるように、先頭のdivが怪しい。
初心者が真面目に勉強しようと、ネットじゃあなく、入門書籍を買ってサンプルを入力して勉強しようとします。
でも、安めの入門書の中には、書籍にするときの手違いか、古いエラーありのソースを使ったのか、ソースコードに間違いがいくつも入っていることがあります。
初心者なので、「自分が間違っているんだろう」と思っていろいろと調べていくうちに、書籍のほうが間違っているって分かることも良くあります。
私の場合も、何度もそういう経験がありますから・・・。
ちなみに、Visual Studioなど、最新の開発環境でhtmlを入力していると、「このdivが閉じてないよ」っていう警告が出るので、なにかがおかしいとすぐ分かります。
また、最新のVisual Studioは、AI機能を取り入れて、「ここはこの変数名が候補ですよ」と表示されたりしてくれる嬉しい機能が追加されたようです。
また、「実務には使わないで!」という警告付きだけどマイクロソフトでオープンソースとして開発している技術があります。
これを使うと、Webでは必須知識だったJavaScript言語が不要となり、その個所はC#で開発可能になるそうです。
まあ、初心者にとっては、C#もJavaScript以上に習得が難しいかもしれないけど・・・。
ご回答くださいまして、ありがとうございました。
私もPHPの本を購入しまして、180ページやりましたが!
プログラムが著書の通りに動かなくなりました。
アマゾンで、評価を見たら、その本ですが、慶応義塾大学工学部の
高学歴者がお書きになった著書でしたが、この本は検証されていない
との評価がありました。確かに、最後はバグでした。
同サイトにだいぶ書き込みをしましたて、著書が可笑しいというとこになりました。
質問している著書ですが!
[HTML&CSSとWebデザイン]
https://gihyo.jp/book/2017/978-4-7741-9064-8
です。
なかなか評判がいい本でしたので購入しました。
ちなみに、プログラムにバグがある?
ヨドバシカメラとアマゾンと読書メーター
評価を見ましたが
divによるバグの報告がありませんでしたので!
まだ何とも言えないところです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
-
html の divとtable の役割
-
<div id="container">の使いか...
-
divとpの使いわけ
-
複数のボタンを等間隔に、かつ...
-
divを横に並べる方法
-
min-heightとheightの違いについて
-
スペースを使わず文字位置を揃...
-
[CSS]リキッドレイアウト上で、...
-
h1のテキストサイズよりh2の方...
-
HPの外側の両サイドにある広告...
-
1時間30分を簡単に表したいで...
-
cssにてボタン位置を下揃えしたい
-
モバイルサイト用のタブ型メニュー
-
スライド部分のリンクが貼れな...
-
セクションをdivで囲むと見出し...
-
background-imageが効かない
-
3カラムレイアウトで「常に残り...
-
html5でheader,footerこみのwra...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
div要素が重なってします
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
divとpの使いわけ
-
ヘッダーとフッターだけ背景を...
-
min-heightとheightの違いについて
-
セクションをdivで囲むと見出し...
-
画面を縮小するとカラムが落ち...
-
ヘッダーを左右に二分割する方...
-
スペースを使わず文字位置を揃...
-
1時間30分を簡単に表したいで...
-
CSSで、contentsがfooterに重な...
-
h1に自分自身へのリンクを張...
-
divの中に外部のHTMLを埋め込む
-
hタグの右横に画像を表示
-
divを横に並べる方法
-
インラインフレームのページ内...
おすすめ情報
#2さんのご回答を参考にさせていただきました。
BracketsのテキストエディタのAIがあるのかな?
以下の2個が</div>が二個しかありませんが、マウスオーバー
した場合、色が変化なしで、反応がないです。
なので!
<div id="wrap">
<div class="content">
分をどこかに、追加しないといけないと思います。
ちなに!
最後の
</section>
</div>
ですが!
</section>
</div>
</div>
</div>
としましたが、追加した</div>が
通常の青文字ですが!赤文字に変化するので
位置的には違っていると考えられます。
#2さんのご指摘通り、著書の間違い
かもしれませんが!?
もう少し検討してみます。
<div id="wrap"><--cssプログラムへ伝達するidなので、これは全体対する命令-->
<div class="content"><--上記のidと同様-->
<div class="main-center"><--上記のidと同様-->
中略
(ゆえに全体に対するプログラムなので、その為には最後に</div>としないと辻褄が合わなくなる)
</section>
</div>
</div>
</div>
検証していませんが!以上、結論付けました。