立命館大学の教員紹介 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で質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
html/cssの、navを2段にする...
-
<ul><li></li></ul>にするメリ...
-
隙間をなくすには?
-
ulとliで囲った文字の一部を変...
-
リストマーカーをボックス内に...
-
jQuery-もっと見るボタンをスマ...
-
html css マークアップについて
-
ローカルナビゲーションのマー...
-
円形の配置にするコーディング...
-
divタグ内のコンテンツが重なっ...
-
番号付きリスト(<Ol><Li>・・...
-
ナビゲーションバーを端まで伸...
-
既存のメニューにプルダウンメ...
-
htmlの<ol>タグで、数字などを...
-
CSSでこんな感じにしたい
-
HTMLタグ リストの入れ子とNet...
-
フレームページのドロップダウ...
-
ページを開いているときのリン...
-
アンカーにクラスを適用しての...
-
テーブルを使わない段組みで
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
html/cssの、navを2段にする...
-
リストマーカーをボックス内に...
-
リストの数字のフォントサイズ...
-
<ul><li></li></ul>にするメリ...
-
ulタグやliタグの中でbrタグ...
-
レスポンシブWebデザインでリン...
-
<ul>~</ul>が二つ続くと間に改...
-
HTML5のfooterに見出しを付けて...
-
htmlの<ol>タグで、数字などを...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
HTMLで組織図を作成する方法
-
複数行にまたがる括弧を表示し...
-
liタグの中に<p>タグやら<dl>を...
-
display:table;を多段表示させたい
-
divタグ内のコンテンツが重なっ...
-
<table>の高さ固定。情報増加時...
-
html <ul></ul>の並びで一行空...
-
テーブル内のプルダウンの下に...
-
【至急】ul li 行間調整ができ...
おすすめ情報
ご回答ありがとうございます。
別の質問サイトで解決いたしました。
HP制作が私の主な仕事ではありません。
更新だけのはずが急に新しくすると言われ、さらに作り始めてから、2ヶ月後の退職が決まり、回答者様が仰る2ヶ月ですら時間がありません。
他社に依頼するお金もありません。
なので突貫工事でも形になれば構わない状況なのです。
結局、tableを使用しfloatで回り込ませて二列にする方法を取りました。
基礎を学んでいても知らないことばかりで、何が出来て出来ないのかもわからない状態です。
勉強不足と言われようが、会社が参考書を買ってくれるわけでもありません。
今後Web制作をやっていくわけではないので、自費で購入するお金は勿体ないです。
なので、ネットじゃわからない事をこうして質問した事態なのです。
ちなみにですが、私の本来の仕事はDTPです。
そしてここで質問を締め切らせて頂きます。