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">
【決定版】CSS横並び プロパティまとめ
float,inline,inline-block,table-cell,Flex 横並びを極める 初級(前編)では、C…
【初心者向け解説】JQueryの基本
WebデザイナーのためのjQuery ● 公式サイト https://jquery.com/ jQueryは、アメリカの…
グローバルメニューを移動・固定
メニューを移動し、固定する ヘッダーの直下にあるナビゲーションが、スクロールすると、ページトップの位置に固定されるように…
ヒーローヘッダーの落とし穴
大きなビジュアルを配置したトップページは、多くのサイトに採用されているレイアウトです。ファーストビューが肝心のWebデザ…
画面の大きさとブレイクポイント
デバイスピクセル比（devicePixelRatio） デバイスピクセル比とは画像の1ピクセルをデバイスで何ピクセルとし…
font-awesomeで作るSNS
とても便利なfont-awesomeで、人気のSNSを表示させてみましょう。 See the Pen YzKLJYe b…
RWD-DogDogDog
DogDogDog-レスポンシブ編- 基礎編で練習したDogDogDogをRWDに対応する サンプルを見る▶…
HTMLとは
HTML（Hyper Text Markup Language）とは、Webページを作成するための言語の一つです。言語と…
レスポンシブ基礎練習①
モバイルファーストで考える 4つのボックスで構成します。 ▶ サンプルを見る まずは、ビューポート設定から…
トグルボタンとは
トグル(ボタン)とは、ひとつのボタンで、「開く・閉じる(オン・オフ)」の切り替え操作が実現できるスイッチのようなものを指…
