文献リストの作り方 | 質問掲示板 | 独学!未経験からWebデザイナーになる!!

Web制作や付随することを何でも質問できるコーナーです。

未経験からWebデザイナーになる!! > 質問掲示板 > カテゴリ: HTML/CSS > 文献リストの作り方

文献リストの作り方

当サイトのリニューアル作業に時間をあてるため、掲示板の投稿は当分停止させていただきます。
htmlタグで,論文の文献リストをレイアウトする方法はどのように記述したら良いのでしょうか?
文献リストの記述の仕方は,

著者名(発行年).書名.出版社.

などのようになりますが,

2行以上にわたる場合には,2行目以降を,全角2字分,字下げすることとなっています。

この2行目以降の全角2文字分の字下げの方法がわかりません。

どなたかご教示いただければ幸いです。
補足説明です。

例えば,以下のような文献が,1行におさまりきらない場合です。

重松晴美(2005).青年期における孤独感および内的対象の想起に関する研究--境界例心性を通して.心理臨床学研究, 22(6), 659-664.

どこかで改行されることになりますが,改行された行から以降が,2文字分の字下げをすることに決まっています。

この2文字分の字下げの方法がわかりません。

どなたかその方法をご存知の方,よろしくお願い致します。
shimu-OTさん、こんにちは。

シンプルに横並びにしてしまうという想定ですと、HTMLは以下のような形式でしょうか。

HTML
<ul class="book-list">
<li>重松晴美(2005).青年期における孤独感および内的対象の想起に関する研究--境界例心性を通して.心理臨床学研究, 22(6), 659-664.</li>
<li>2番目の文献</li>
<li>3番目の文献</li>
</ul>


おっしゃるように、これだとウィンドウサイズによってどこかで改行される可能性があります。
字下げをされたいとのこと、見た目に関することですので、CSSで調整可能です。
先ほどのHTMLだとすると、以下です。
(実際には、HTMLの記載方法によってCSSの指定方法は変わります)

CSS
.book-list > li {
padding-left: 2em;
text-indent: -2em;
}


CSSファイルは、すでに読み込んでいる外部CSSファイルなどに記述します。(CSSファイルって何?どこに書けば良いの?という状況でしたら詳しく書きますのでお知らせください)

このCSSの意味は、li内部の左にpadding(余白)を2文字分とって、最初の行だけマイナス2文字分引く……という意味です。こうすると2行目以降が字下げされる見栄えになります。


後、今回はそぐわないのかもしれませんが、そのまま横に並べずにtableタグ等で実装する方法もあるでしょうね。
それだと著者・タイトル・ID等が整列されて、見やすくなると思います。
詳しくお答えありがとうございます。試してみます。