立命館大学の教員紹介 http://www.ritsumei.ac.jp/lt/introduce/faculty/i … を参考にして、似たような人物紹介ページを作ろうとしています。
添付の画像は、作りたいと思っている箇所のスクショです。
参考ページのHTMLとCSSをコピペしてみたのですが、間違っているのか足りないのか上手くいきません。
似たようなものを作るにはどうしたらよいのでしょうか?
出来ればテーブルは使わずに、参考ページと同じくリストを使って。
まず、一人の人物あたりの塊の作り方もわかっていません。
そして、それを二列にするのも、やり方がわかりません。
順番は左上の次は右上、その次は一段下がって左、右・・・・・・と続けたいです。
ちなみにですが、私は10年くらい前に勉強したHTMLの基礎の基礎位の知識しかなくCSSは詳しくありません。
自分で構築するには知識が足りず、ネットで調べて拾っては編集して作っています。
会社では既存のページの更新作業だけだったので良かったのですが、一部リニューアルすることとなって新しいページも作ることになって困ってしまいました。
なので、初心者でもわかりやすくご説明頂けると幸いです。
あまり時間が無いので、至急のご回答宜しくお願い致します。
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
どうも学び方を間違えてしまったような・・・。
正しく学べば余暇を使って2ヶ月もあればできるはずです。IT技術なんて、理科や数学と同じで基礎からきちんと学べば、とても簡単なものです。
まずHTMLは、文書構造だけをマークアップする言語でそれ以外の目的はありません。なぜなら出自はSGMLだからです。HTMLの基礎の基礎ですから御存知だと思いますが。
→SGML#背景 - Wikipedia( https://ja.wikipedia.org/wiki/Standard_Generaliz … )
10年前でしたら、HTML4.01が勧告(1999年)されて5年以上経過していますが、それ以来、『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』が強く叫ばれていました。
それをデザインするためのCSS1は当時からありましたし、CSS2は9年前の2008年、現在のCSS2.1の勧告は今から4年前の2011年7月ですから、理解されていないのかもしれませんね。
現在、ウェブ標準は HTML4.01 + CSS2.1とされれていますから(HTMLがとても増えてきましたが・・)それを目標にされたらよいでしょう。
>自分で構築するには知識が足りず、ネットで調べて拾っては編集して作っています。
これは最悪の学習方法です。理数科を問題と回答集だけで身につけよと言うものですよ。そうではなく、まず仕様書を読みそれにしたがって身につけていく。それが一番早く効率的で応用が利きます。
私は 25年前にこの世界に入りましたが、当時から仕様書を読み解くことから始めてきました。
例えば、この場合のHTMLは、【人名と紹介記事ののリスト】ですから、率直に
<ul id="album">
<li>山田太郎
<ol>
<li><img src="" width="" height="" alt=""></li>
<li>自己紹介</li>
<li><a href="">山田太郎のページ</a></li>
</ol>
</li>
・・・・で良いのですよ。
あとはスタイルシートでデザインします。
幅広のディスプレイでは、4列に小さな画面だと2列、携帯電話だと1列、印刷だとシンプルなリスト形式とかが、自在に・・・
あせってつまみ食いしても時間のロスですよ。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(プログラミング・Web制作) 次に、楽天のアジャイル就活に参加して、1日で内定を獲得できる。私は大企業に就職できる? 2 2022/04/17 13:38
- MySQL PHPとMySQLを使った掲示板の作り方 1 2022/06/02 13:00
- HTML・CSS ホームページをちょっと加工する程度の無料または古くて安く購入できる作成ソフトを教えてください 5 2022/12/16 12:17
- Windows 10 Windows10 の設定?について (長文ですがよろしくお願いします)m(_ _)m 3 2022/05/14 12:22
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- JavaScript スマホ上で、左右スワイプで次のページに移動させたいです 2 2022/11/11 17:04
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- マンガ・コミック 手塚治虫のアシスタントをしていた人を教えて下さい。 1 2023/07/22 10:10
- その他(法律) Wikipediaの著作権について 2 2022/08/14 07:14
- WordPress(ワードプレス) ワードプレスで、投稿一覧ページにタグを表示する方法 投稿につけたタグを、記事一覧ページにもカテゴリと 1 2023/05/10 21:41
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リストマーカーをボックス内に...
-
<table>の高さ固定。情報増加時...
-
html/cssの、navを2段にする...
-
番号付きリスト(<Ol><Li>・・...
-
html <li>の中の文字一部に色を...
-
ol要素の番号とリスト項目の離...
-
htmlの<ol>タグで、数字などを...
-
画像横のテキストをセンターに...
-
レスポンシブWebデザインでリン...
-
HTMLで組織図を作成する方法
-
「・」(黒い点)を非表示にした...
-
CSS「table-cell」で横並びにし...
-
親ページ側からインラインフレ...
-
list-style-type部分だけ大きく...
-
CSS使用。表のセルの中で、強制...
-
CSS3グラデーションで、右端だ...
-
HTMLで画像を3つ並べる方法
-
横並びのボタンの背景を片方だ...
-
カルーセルスライダー「slick.j...
-
ulとliで囲った文字の一部を変...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
番号付きリスト(<Ol><Li>・・...
-
liタグの中に<p>タグやら<dl>を...
-
レスポンシブWebデザインでリン...
-
<table>の高さ固定。情報増加時...
-
<ul><li></li></ul>にするメリ...
-
リストの数字のフォントサイズ...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
divタグ内のコンテンツが重なっ...
-
画像にリンクを張ると画像がず...
-
複数行にまたがる括弧を表示し...
-
ページを開いているときのリン...
-
html <ul></ul>の並びで一行空...
-
html/cssの、navを2段にする...
-
HTML5のfooterに見出しを付けて...
-
<ul>~</ul>が二つ続くと間に改...
-
htmlの<ol>タグで、数字などを...
-
リンク文字同士の間隔を開ける...
-
CSSでつくったメニューのアニメ...
おすすめ情報
ご回答ありがとうございます。
別の質問サイトで解決いたしました。
HP制作が私の主な仕事ではありません。
更新だけのはずが急に新しくすると言われ、さらに作り始めてから、2ヶ月後の退職が決まり、回答者様が仰る2ヶ月ですら時間がありません。
他社に依頼するお金もありません。
なので突貫工事でも形になれば構わない状況なのです。
結局、tableを使用しfloatで回り込ませて二列にする方法を取りました。
基礎を学んでいても知らないことばかりで、何が出来て出来ないのかもわからない状態です。
勉強不足と言われようが、会社が参考書を買ってくれるわけでもありません。
今後Web制作をやっていくわけではないので、自費で購入するお金は勿体ないです。
なので、ネットじゃわからない事をこうして質問した事態なのです。
ちなみにですが、私の本来の仕事はDTPです。
そしてここで質問を締め切らせて頂きます。