link要素を使用すると、この文章と関連している別の文書やファイルの所在を示すことができます。 <link rel="関連ファイルの種類"href="URL"> <link rel=&...

Progateサイト内のHTMLの全体構造説明を練習用にのせました。

Our two colored boxes share a number of properties in common, so next we establish a class, .box, that defines those shared properties: In brief, .box establishes the size of...

We'll look at the CSS to create the above results a piece at a time, so we can review the interesting parts one by one. The .wrapper class is used to assign styles to th...

The HTML responsible for creating the above example is shown here: This is pretty simple, using a <div> as a wrapper around the contents, which consists of two more <...

/*footer-logoのfont-sizeとfloatを指定*/ 1〜4 /*footer-listのfloatを指定*/ 6〜8 /*footer-listの中のli要素のpadding-bottomを指定*/ 10〜12

float: rightを用いると、指定した要素を右から順に横並びにすることができます。 index.html <ul> <li>HTML</li> <li>PHP</li> <li>R...

指定したい値が方向ごとに異なる場合、個別で指定する方法もありますが、まとめて書くことも可能です。 値を４つスペース区切りで指定した場合、上下左右の順で適用されます。 値２つ...

要素に余白を作りたい場合は、paddingを用います。 「padding: 値;」とすると、上下左右全ての方向にその大きさの余白が追加されます。 html <div class="logo1"> p...

floatプロパティを用いることで、指定した要素を横並びにすることができます。 html <ul> <li>HTML</li> <li>PHP</li> <li>Ruby</l...

/*header-logoの文字の大きさを、36px、floatプロパティをleftにする。

HTMLからCSSを読み込むためには、 <link rel="stylesheet" href="stylesheet.css"のファイル名">を用います。

ウェブデザイン初心者からすると分かりづらいのが、「HTMLコード内でEnterを押して改行しても、ブラウザに表示される文ではその改行が反映されない」ということです。 pタグなどを使えばそ...

ulの代わりにolを使うと、箇条書きのポッチが番号になります。

HTMLでは箇条書き用のコードも用意されています。<ul>と<li>のペア、もしくは<ol>と<li>のペアで使用します。

aタグではテキストだけでなく、画像をはさむこともできます。画像のリンクボタンが作れるということですね。試しに「サルワカくんの顔の画像をクリックするとサルワカのトップページに飛ぶ」...

基礎を学んだので総括する意味で作成しました。