URL
TAG index とほほのWWW入門 HTML・CSSの勉強におすすめの本13選 HTMLタグ事典記事内に開閉パネルやボタンを簡単に挿入できるWordPressプラグイン HTMLレイアウトで左右分割する方法を現役エンジニアが解説 HTMLでウィンドウ幅に合わせて画像サイズを自動で調整する方法を現役エンジニアが解説 【HTML タグ】タグの使い方を徹底解説 headerとfooterの使い方とデザイン例まとめ 初心者のためのCSSの書き方・入門編 HTMLの構成を正しく理解しよう HTMLの要素を四角で囲む方法とデザイン例を一挙公開 初心者向けCSS(スタイルシート)入門:基本的な書き方を総まとめ! HTML要素をセンタリングする方法まとめ! 中央に配置する HTMLのみで実装できるアコーディオン 詳細折りたたみ要素 CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選 CSS疑似クラス 『::after と ::before』 を使いこなす!
HTMLについて
<a href="misc/computer_html.html" target="_blank">html</a>
p:タグ名 href:属性名 misc/computer_html.html:属性値(常に""ではさむ) 文全体は要素
<!-- コメント -->
HTML構成
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>タイトル名</title> <meta name="description" content="ナタデココ入りの楚蟹"> <link rel="stylesheet" href="computer_html.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header></header> <main></main> <footer></footer> </body> </html>
idとclassの違い classは何度も使える idは1度切り,headerやsidebarやmainやfooter idはページ内リンクとして仕える <a href="#footer">ページ末尾へ<a>
<img>画像を表示するためのタブ 属性:src="URI",必須 alt="テキスト",画像が表示できないとき画像の代替テキストを表示する
<hr>水平な線 <br>改行breakの略 <img src="">画像の挿入
特殊文字 <は&lt; >は&gt; &は&amp; "は&quot
インライン要素:行内の一部のまとまり
- <a href="URL">リンク</a>
- <a href="URL"#idの属性値>ページ内リンク</a>
- <span>CSSで装飾</span>
- <strong>太字になる</strong>
- <em>斜体になる</em>
- <u>下線</u>
- <mark>背景色がつく<mark>
- <del>取り消し線<del>
- <ins>追加されたテキストを示す、下線</ins>
- <abbr>略語や頭文字を示す、マウスオーバー時に表示</abbr>
- <q>引用を表す、引用符に囲まれて表示される</q>
- <code>コードを示す、等幅フォント</code>
ブロック要素:行全体のまとまり
- <div>特に意味はない,まとめたい時</div>
- <p>テキストの段落</p>
- <h1>内容</h1>や<h6>見出しテキスト</h6>
- <ul>番号なしリスト,で中に<li>中身<li>を繰り返す</ul>
- <ol>番号付きリスト</ol>
- <pre>改行とかをそのまま表示する</pre>
-
<table> <tr> <th>住所</th> <td>東京都1200</td> </tr> <tr> <th>電話番号</th> <td>090-111-1111</td> </tr> </table>
CSS
@charset "UTF-8";
CSSファイルの先頭に置く
/*コメント内容*/
コメントとはこれ
id指定:#id名
:そのままp{} class指定:.class名{}
「すべての擬似クラスで同じ色を指定する」場合には、:link, :visited, :hover, :active擬似クラスで同じ色を指定すれば良いです。 参考にしたサイト
a:link, a:visited, a:hover, a:active {
color: blue;
}
text-alignプロパティ:文字や画像に対して、水平方向の揃え方を指定する
値は,"right"と"center"と"left"のみ
vertical-alignプロパティ:文字や画像に対して、垂直方向の揃え方を指定する
値は,"sub"と"center"と"left"のみ