ホームページ作成方法

このQ&Aのポイント
  • ホームページの作成方法を教えてください。
  • 具体的な手順や参考になるページがあれば教えてください。
  • HTMLやCSSの基礎知識しかない初心者でもわかりやすい説明をお願いします。
回答を見る
  • ベストアンサー

添付画像のようなホームページを作るにはどうしたら?

立命館大学の教員紹介 http://www.ritsumei.ac.jp/lt/introduce/faculty/index.html/ を参考にして、似たような人物紹介ページを作ろうとしています。 添付の画像は、作りたいと思っている箇所のスクショです。 参考ページのHTMLとCSSをコピペしてみたのですが、間違っているのか足りないのか上手くいきません。 似たようなものを作るにはどうしたらよいのでしょうか? 出来ればテーブルは使わずに、参考ページと同じくリストを使って。 まず、一人の人物あたりの塊の作り方もわかっていません。 そして、それを二列にするのも、やり方がわかりません。 順番は左上の次は右上、その次は一段下がって左、右・・・・・・と続けたいです。 ちなみにですが、私は10年くらい前に勉強したHTMLの基礎の基礎位の知識しかなくCSSは詳しくありません。 自分で構築するには知識が足りず、ネットで調べて拾っては編集して作っています。 会社では既存のページの更新作業だけだったので良かったのですが、一部リニューアルすることとなって新しいページも作ることになって困ってしまいました。 なので、初心者でもわかりやすくご説明頂けると幸いです。 あまり時間が無いので、至急のご回答宜しくお願い致します。

  • CSS
  • 回答数1
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • qualheart
  • ベストアンサー率41% (1451/3486)
回答No.1

まず、教員のリスト全体をDIVで囲み、そのDIVに対して固定でwidthを指定します。 その上で、1人の教員の情報をさらにDIVタグで囲み、このDIVに対しても、widthとfloat:leftを設定します。 float:leftを言うのは、要素を左に寄せて配置するCSSです。 float:leftで要素を配置すると、左から要素を並べて表示します。その際、1行に入り切らなくなった要素は、下に下がりまた左から表示するようになります。 つまり上記のfloat:leftの性質を利用して、全体のDIVのwidthを固定で指定し、更に教員のDIVのwidthを全体のwidthに丁度2つ収まる数値で指定すれば、1行に2つずつ教員のブロックを表示する形でページ内に配置することができる訳です。 もっと詳しく知りたければfloat:leftで検索すれば、色々と調べられると思います。 ご参考まで。

hirohiroronron
質問者

お礼

float:leftをcssに組み込んでみたところ、上手くいきました! ありがとうございます

関連するQ&A

  • ホームページを作りたいんですが

    現在DreamweaverMX2004で作ったホームページがあります。それを引き継ぎリニューアルを任されましたが今まで独学でやってきたので殆ど基礎がわかりません。CSSを外部リンクさせて作っていきたいのですが、HTMLとCSSファイルとどちらを先に作ればよいか教えてください。 どうぞ宜しくお願いします。

  • ホームページビルダー12とWEB標準技術

    以前、ホームページビルダー12とドリームウィーバーCS3のどちらを買うべきか、という趣旨の質問をさせていただきましたところ、ビルダー派の方から、「HTMLやCSSなどのWEBの基本を覚えておくと後から本当の便利ですので、覚えておくことをオススメします!」という答えが返ってきました。 ホームページビルダー12を使う上で、HTMLやCSS、あるいはXHTML等のWEBの基礎知識を知っておくことは意味のあることなのでしょうか? (それを知っておくことによって、今までより見栄えのするデザインができたりと、今までのビルダー12の使い方より一段上を行く使い方ができるのでしょうか) HTMLやCSS等、一晩で習得できるほど簡単そうなものには見えないので、勉強しようかどうか迷っています。 ビルダー12を使う上で、WEBの基礎知識を覚えることがどれくらい意味のあることなのか、どれくらいの成果が自分に返ってくるのか、教えてください。

  • ホームページ・・・・

    僕は、生徒会の役員になったのですが、仕事として先生から自分の学校のホームページをリニューアルしろと頼まれました。 一応HTMLなどの知識は有り、作れることは作れるのですが先生がおっしゃった「人を集められるページ」にするためのアイディアがありません。 人を集める為のアイディアなどありましたらどなたかご回答お願いいたします。

  • ホームページ作成について

    こちらhttp://www.hokuriku-mazda.jp/testdrive/?area=fukui のページを参考にwordpressのオリジナルテーマにて作成中です。 私はHTML・CSSが分かる程度なので知識不足で・・ 申し訳ございませんが、このページを作りにあたり、 どういったものを導入すれば宜しいでしょうか? また、jQueryやWPのプラグインで簡単に設置する方法がもしありましたら 教えて頂けるとありがたいです。 どうぞご回答頂けますようお願い申し上げます。

  • HTMLとCSSの効果的な勉強方法や、参考になる参考書、サイト等があれ

    HTMLとCSSの効果的な勉強方法や、参考になる参考書、サイト等があれば 是非教えて下さい。 会社でWEB担当になったのですが、 簡単なHTML以外は知識が無い状態です。 リニューアル等の大きな制作は業者の方に御願いするとしても、 ある程度のサイトの構造は理解したいと思っています。 (ニュースリリース等の更新は問題ありません) 初心者向の解説があるWEB等で自己流で勉強していますが、 なかなか難しいなあと感じています。 知識を身に付けるためには、ある程度の基礎が必要なのかもしれませんが、 とりあえず、何が基礎かも分からないので、必要な情報を都度調べて模索している状態です。 勉強に近道はないと思うのですが、もう少し要領よく学ぶ為の 進め方/順序(この知識を身に付けてから、これ、的な・・・)等があるのではないかなあと思っています。 ご意見いただけると嬉しいです。

    • ベストアンサー
    • HTML
  • ホームページ作りで困ってます。。。

    ホームページ作成初心者の者です。もしかしたらカテゴリを間違えたかもしれません。 上記の通り、ホームページ作成に挑戦しています。トップページは出来ました。ですが、次に作ろうとしている「はじめに」というページの作成に当たって壁に当たってしまいました。 次の図のようなレイアウトを目指しているのですが、全く作り方が分からないのです。 ~~↓↓↓図↓↓↓~~ ・項目1 |  内容… ・項目2 |  ……… ・項目3 |  ……… ・項目4 |  ………       |      ~~~~~~~~~~~ ※上の図の補足 ・「項目~」をクリックすると内容のみが項目に応じて変化する ・「|」はバー(?)を表現したつもりです…。カーソルでドラッグすることによって、左右に動くもの(右に動かすと内容の場所が狭まり、左に動かすと項目の部分が狭まる)を想像しています。 全く作り方が分かりません。HTMLやCSS、Javaの知識がまだ未熟だからなのですが… 作り方が分かる方、また、参考になるページを知っている方がいたらお願いします。

    • ベストアンサー
    • HTML
  • 背景を薄くして別コンテンツを表示する

    言葉でどう説明したらいいのか分からないのですが、下記ページの「写真を拡大」をクリックしたときの動きってどうやったらできるのでしょうか? http://netallica.yahoo.co.jp/news/30139 ソースを見ても普通のaタグが書いてあるだけで、onclickでJavaScriptも呼んでないし、分かりません。 参考ページ等あれば教えてください。 当方、HTML、JavaScript、CSSの基礎知識はあります。

    • ベストアンサー
    • HTML
  • ホームページ作成のためのWebの勉強・資格について

    お世話になります。 私は小企業でIT担当をしております。 ITにかける費用も最低限しかないため、 ホームページも自分で作ることになりました。 HTMLの知識もないため、ビルダーなどのソフトを使用して作ることになると思いますが、 一通りの基礎知識は得ないといけないと思っています。 Webに関する知識(デザイン・HTML・CSS等)を、 何から始めればよいでしょうか? また、その延長で取得できる資格でお勧めは ありますでしょうか。 なにとぞご回答よろしくお願い致します。

  • ホームページビルダーでダウンロードしたテンプレートを読み込む方法ってありますか?

    初心者の為説明が下手でしたらすいません。 ホームページビルダーを使ってHPを作ろうとしている所です。 デザインなども自信がなかったので、テンプレートをダウンロードしてきました。 ダウンロードしたファイルは基礎HTMLのファイルと、着せ替えCSS用のCSSファイルです。 このCSSをHTMLに読み込まなくてはならないと思うのですが、まずその過程をホームページビルダーで出来るかどうか、 また、初歩的ですが、そもそもの基礎HTMLをホームページビルダーホームページビルダーに取り込む…というか、読み込めるのかどうかがよく分りません。 ホームページビルダーでファイルを開くから、ダウンロードしたファイルを開こうとしましたが、indexなどのHTML形式のファイルしか、開けそうにありませんでした。 ですが、例えばこの方法だとindex、Menuとそれぞれ同じ様に改変していかないとならない気がします。 親子それぞれのページで同デザインで纏めたい時には、indexで表示されるタグをそれぞれのページにコピーするしかないのか、それとも何か他の方法があるのか…。 どのタイミングでCSSをHTMLに読み込んでいいかもよく分りません。 また、無事に読み込めた際に、それはindexのページだけにのみ反映となってしまわないのか、等疑問点が沢山です。 一度に沢山の質問で申し訳ないのですが、お分かりになる方、もしくは説明のあるサイトをご存じの方がいらっしゃいましたら、宜しくお願いします。 尚、ホームページビルダーのヴァージョンは10です。

  • HTMLとCSSのオススメ本

    現在HTMLとCSSを基礎知識をマスターしようとしています。 とりあえず、HTML&CSS入門本を1冊購入し最後まで読み終わりました。 実践形式な本だったので、その本に書かれてある手順通りの簡単なサンプルサイトが出来上がりました。 あまりにも簡単な内容だったので、基礎知識をマスターまでは出来ていないと思います。 ですので、2冊目として基礎~マスターまで学習できる本を探しています。 1冊目の実践形式で進めていける本はとても分かりやすかったので、文字ばっかりの知識紹介やタグの羅列辞典等ではなく、画像等をはさみながら操作手順をこなしていける内容の本、又はサイトを探しています。 良い本、またはサイトはありますでしょうか?

    • ベストアンサー
    • HTML