Webデザイナーの教科書(初級)
未経験からの基礎講座・どなたでも、ご自由にお使いください。
● CSSがセットになったレッスンファイルをダウンロードする。
● HTML基本構文
● ブラウザによって事前に作成されたすべてのスタイルをリセットする。 (Reseter.css)
● viewport-ビューポート設定-(meta内に記述する。)
● Font AwesomeCDN 5.11.2 cdnjs.com
● CSSがセットになったレッスンファイルをダウンロードする。
● HTML基本構文
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
● ブラウザによって事前に作成されたすべてのスタイルをリセットする。 (Reseter.css)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/krishdevdb/reseter.css/css/reseter.min.css">
● viewport-ビューポート設定-(meta内に記述する。)
<meta name="viewport" content="width=device-width, initial-scale=1">● Font AwesomeCDN 5.11.2 cdnjs.com
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://code.jquery.com/jquery-3.4.1.js.css" rel="stylesheet" type="text/css">
ヒーローヘッダー
ダイナミックなレイアウト 近年では、大きいパソコンモニターが主流になり、トップページにダイナミックな写真を使うことで、閲…
フォントに関するプロパティ
フォントの種類 [crayon-67406c8c54242344086390/] font-familyに指定できる値 …
フレックスボックス基礎 (Flexbox)
通常の配置 HTMLの要素は、基本的に縦にした並べることができません。横に並列する場合「float(回りこみ)」を利用し…
flex boxを学ぶ
flex boxとは、「Flexible Box Layout Module」のことです。レスポンシブなサイトを組む際に…
背景に関するプロパティ
背景色の指定 背景の色を薄い黄色にするbackground-color:#fffacd; [crayon-67406c8…
ボックスの考え方(重要)
ボックスとは 「ここから →ここまで」を定義し「範囲指定」し、ひとつの箱 ( ボックス ) に入れるイメージです。 ●資…
キーワードごっこ
SEOキーワードの考え方
CSSスプライト
CSSスプライトを使ってナビゲーションを画像化にする 最近は、レスポンシブの仕様などを踏まえ、テキストで作られることが多…
float(回り込み)プロパティ
テキストを画像の周囲に回り込ませる 画像の周辺にテキストを周り込ませるには、画像に対してfloatプロパティを使用します…
floatの基礎①
初心者のためのfloat基礎 画像の説明の横に画像を挿入してみましょう。まずは、親要素となるセクションを作成し、その中に…
