2022-01-01から1ヶ月間の記事一覧
要素の絶対位置を指定するposition: absolute; position: absolute; は、要素の配置を自由に設定することができます position: absolute; は単体で使用せず、position: relative; とセットで使います positionプロパティはabsoluteの他にも下記の4つがありま…
相対位置を指定する position: relative; 現在位置を基準に、相対位置を指定することができます position: relative; は単体で使用せず、position: absolute; とセットで使うことが多いです positionプロパティはrelativeの他にも下記の4つがあります fixed …
positionプロパティ positionプロパティは、要素の配置を指定するプロパティです 通常、positionプロパティは「top」「right」「bottom」「left」の4つのプロパティと合わせて要素の配置を指定します static：位置も重なりも指定できない、positionプロパテ…
positionプロパティで要素を配置 positionプロパティとは positionプロパティは、要素の「位置」を指定する際に使用するCSSプロパティです 要素を自由に配置したい 要素の重なり順を変えたい ヘッダーを固定して表示したい positionプロパティの使い方 posit…
floatを使ったレイアウト - 実践 【例】floatを使った定義型リスト <html lang="ja"> <head> <meta charset="UTF-8"> <title>floatを使った定義型リスト</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } .d-list { overflow: hidden; width: 440px; margin: 50px auto; } dt { float: left; font-weight</meta></head></html>…
floatを使った回り込み 「回り込み」という言葉は、インラインレベル要素のfloatに適用されます 例えば、p要素内の先頭の文字と同じ扱いの画像に「float」を設定すると、それに続く p要素内の文字が float している画像の後ろに続いて並ぼうとします。それを…
floatの使い方 floatとは？ floatを指定した要素が「浮いた状態」になる特性です floatの使い方 横並びにしたい要素に対して、float: 値;を指定して使用します 値に記述するのは、以下のような「方向」を示すワードです 値 指定内容 left 横並びにした要素を…
要素の横並び displayプロパティの初期値 block inline inline-block none display: block <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>display: block</title> <style> /*--…</meta></meta></meta></head></html>
リセットCSS ブラウザのデフォルトスタイル（初期値）を解除するためのCSSは「リセットCSS」と呼ばれ、世界中でいろいろな手法が試されています。 目的は、各ブラウザが持つ「ボックスモデルの値」を初期化すること 以下の例は、最小記述の resetCSS の例に…
「ユニバーサルセレクタ」のデメリット ブラウザのレンダリングが遅くなる。 良いデフォルトのCSSをリセットしてしまう。 フォームの表示がおかしくなるブラウザがある。 とされてきました。 検証しているサイトがあるので紹介します。https://levelup.gitco…
要素を中央寄せ CSSで中央に寄せができるプロパティ4選 text-align flexbox margin position 【text-align】プロパティで左右中央寄せする方法 text-alignでブロック要素などの水平方向に対して配置を決めることができます <div class="parent"> <span>インライン要素を中央に寄せます</span> </div> <div class="parent"></div>…
CSSで要素を右寄せ CSSで右に寄せることができるプロパティ5選 text-align margin float flex position text-alignプロパティで文章を右寄せ text-alignは、ブロック要素などの水平方向に対して配置を決めることができます text-align: right;を指定する inl…
ブロックレベル要素とインラインレベル要素 ブロックレベル要素の特徴 テキストP.076〜P.077 要素が縦に並ぶ（その前後で改行表示されます） 幅と高さを指定できる（デフォルト状態で親要素と同じ幅を持っています） 余白を自由に調整できる 要素の配置を指…
文字の囲み borderを使用して、要素に枠線をつける borderプロパティの値を指定する セレクタ { boder: 線の太さ, 線の種類, 線の色 ; } 上下左右の枠線を個別に指定する 「border」と記述することにより、上→右→下→左をショートハンドで記述したことになり…
文字設定 - font 文字の修飾 ページ全体に反映したい場合は「body」に指定します（継承） 文字のプロパティ color : 文字の色 font-size : 文字の大きさ font-family : フォントの種類 font-weight : 文字の太さ font-style : 文字のスタイル line-height : …
ボックスモデル テキストP.076〜 HTMLタグでマークアップされた要素は１つの箱とみなされます HTMLの要素は4つの領域を持っています 表示領域 要素の内側の余白（padding） 要素の外側の余白(margin) paddingとmarginの境界線(border) 記述するプロパティの…
CSSとは テキストP.066〜 CSSは、Cascading Style Sheetsの略 HTML同様にwebサイトを作成するために使用される言語 CSSを使うことで、HTMLの要素に対し、 要素の大きさ 要素の並び 余白 色 などの見た目を追加することができる CSSの書き方 テキストP.067 CS…
id属性 class属性
相対パスと全体パス
画像を表示させるimgタグ
tableタグで表を作成
コメントアウト コメントアウトとはテキストエディタ側（コード側）に書くメモのようなもので、ブラウザには表示されません。 HTMLのコメントアウト 「」の間にコメント内容を書く <h1>これは表示されます</h1> <p>これは表示されます</p> <body> <header class="header"> </header> <main> </main> <footer> </footer> </body>
bodyタグの記述内容 bodyタグの中に記述するものは、主にWebサイトの目に見える部分です Webサイトを閲覧した際に表示される要素は、bodyタグの中に書いた要素になります 見出しタグ hは見出しを意味するheadingの頭文字を表しています hタグは、ページのタ…
headタグの記述内容 文書のメタ情報を記述するタグ headタグに記述されている情報は、通常画面上で確認することができません <html lang="ja"> <head> </head> <body> </body> </html> headタグの中に記述できる情報 文字コード HTMLファイルがどの文字コードで保存されているのか指定文字化け防止、UTF-8が…
HTMLとは HTML (Hypertext Markup Language)は、Webサイトを作成するために使われる言語 Webサイトの作成において、コンピューターが理解できる言語を用いて伝える必要があります HTMLタグ コンピューターに対しWebサイトの構成要素を教えてあげるために使わ…
Emmetとは Emmet は、主にHTMLやCSSの記述・編集を効率化するプラグインです docs.emmet.io HTML基本チートシート CSS基本チートシート テキストエディターの場合 「VS Code」は、インストールされています 基本構造 新規HTMLドキュメントを作成します 「!」…
カスタマイズ インデント１つあたりの見た目が半角スペース何個分になるかを選択します Live Server ファイル保存と同時に修正内容をブラウザに自動反映 簡易ローカルサーバーを構築 HTMLのプレビュー 「Go Live」を押す 右クリック「Open with Live Server…
Visual Studio Code code.visualstudio.com 起動 起動直後は、管理するフォルダーを設定していないため、下部帯が「紫色」になっています 初めてインストールした時点では、メニューは「英語表記」になっています 日本語化 Japanese Language Pack 拡張機能…
文書構造演習テキスト 新着情報 お知らせ 製品情報 店舗案内 会社案内山田一郎 山田一郎の写真 プロフィール 生年月日：1998.2.22 出身：東京都池袋 趣味：カメラ撮影 / 音楽を聴くこと 好きな言葉：想像すること できることできないことことが沢山ある 気づ…
Lorem ipsum 文章が入ると文書全体のデザインよりも文章の内容の方に意識が集中してしまう。 そこで[...]意味の全くない文字の羅列をテキスト部分に流し込む」ために作られた文章です。 VS Codeでは Emmetを利用する 日本語のダミーテキスト Lorem JPsum 自…
