HTML/CSS
display: flex; flex: auto; flex-wrap: wrap; flex-direction flex-direction: row; flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse; justify-content justify-content: flex-start; justify-content: flex-end; ju…
レスポンシブデザイン メディアクエリ（Media Queries） @media ブレイクポイント viewport box-sizing: border-box; display: none; fioatの解除 実践 asanokai.html style.css responsive.css ブラウザ（結果） レスポンシブデザイン レスポンシブデザイン…
ランディングページ 新たに登場したプロパティ background-image background-size margin: 0 auto; opacity letter-spacing display border-radius text-decoration text-align transition line-height font-weight position position(2) z-index box-shadow…
ランディングページ ブラウザ GIF HTML CSS 構成 解説 ランディングページ ランディングページとは、サイトを訪問したユーザーが一番最初に目にするWebページです。実際に作ったので記述をご確認下さい。 （記述はProgateを参考にしています） ブラウザ GIF …
メイン作成 span要素 お問い合わせフォーム input要素 textarea要素 type属性 value属性 前回に引き続き、今回はWebページのメイン部分の作成を行います。 ヘッダー・フッターの記述はこちらの記事をご覧ください。 morning-output.hatenablog.com ▼ブラウザ…
ヘッダー作成 list-style float フッター作成 ボックスモデル border padding margin まずは完成形のコードとブラウザ画像をご参照下さい。 ▼HTML <html> <head> <meta charset="UTF-8"> <title>朝活アウトプット</title> <link rel="stylesheet" href="style2.css"> </head> <body> <header> <div class="header-logo">朝活 -Asakatsu-</div> </header></body></html>
HTMLのレイアウト div要素 header要素 footer要素 レイアウト構造 入れ子構造 親要素と子要素 ブロックレベル要素 インライン要素 HTMLのレイアウト HTMLはhead要素とbody要素で成り立っています。 レイアウトはbody要素内で構成します。 ▼HTML <html> <head> <meta charset="UTF-8"> <title>朝活アウ</title></meta></head></html>…
HTMLの構造 DOCTYRE宣言 html要素 head要素 body要素 head要素に記述する内容 meta要素 title要素 CSSの読み込み body要素に記述する内容 HTMLの構造 HTMLには、決められた型があります。 html要素の中にhead要素とbody要素の2つを記述します。 <html> <head> </head> <body> </body> </html> DOC…
概要 記述に必要な知識 プロパティ color font-size font-family background-color width、height class 補足 コメントアウト 概要 CSSとは、Cascading Style Sheets（カスケーディング・スタイル・シート）の略で、HTMLの要素を装飾するためのスタイルシー…
概要 タグ 要素 h要素 p要素 a要素 img要素 li要素 補足 コメントアウト 概要 HTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、 Hyper Textが「テキストを超えた」という意味で、Markup Languageがマークアップ…
