Webデザイナーの教科書(初級)
未経験からの基礎講座・どなたでも、ご自由にお使いください。>
未経験からの基礎講座・どなたでも、ご自由にお使いください。>
● CSSがセットになったレッスンファイルをダウンロードする。
● HTML基本構文
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
● CSS Reset-Destyle.css-(CSSをリセットする。) 公式サイト
<link href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" rel="stylesheet">
● 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" />
● jQuery3.4.1 CDN-google-
developers.google
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
● jQuery3.4.1 CDN jQuery
<link href="https://code.jquery.com/jquery-3.4.1.js.css" rel="stylesheet" type="text/css">
気になる?画像の隙間
vertical-align text-alignは、水平方向に対し、vertical-alignは垂直方向の位置を表し…
Flexで作るサンタクロース
サンタクロースエリアを作成します。以下のサンプルを参考にレイアウトしていきます。サンタクロースエリアの下に、バナーを2つ…
Flex演習①
見出し・写真・テキストをセットにした連結を、横に整列する練習です。flexの基本から、トライしてみましょう。 Flex演…
Flexで並べるクリスマスケーキ
ケーキのサイズを揃える ケーキ画像をダウンロード See the Pen qBBGXEN by nakatax (@co…
【2020年版】ハローウィン特集
ハローウイン特集2020 今年は、1年生による作品を集めました。バナーは、ユーザーに興味を持ってもらい「クリックさせる」…
【決定版】CSS横並び プロパティまとめ
float,inline,inline-block,table-cell,Flex 横並びを極める 初級(前編)では、C…
【初心者向け解説】JQueryの基本
WebデザイナーのためのjQuery ● 公式サイト https://jquery.com/ jQueryは、アメリカの…
グローバルメニューを移動・固定
メニューを移動し、固定する ヘッダーの直下にあるナビゲーションが、スクロールすると、ページトップの位置に固定されるように…
ヒーローヘッダーの落とし穴
大きなビジュアルを配置したトップページは、多くのサイトに採用されているレイアウトです。ファーストビューが肝心のWebデザ…
画面の大きさとブレイクポイント
デバイスピクセル比(devicePixelRatio) デバイスピクセル比とは画像の1ピクセルをデバイスで何ピクセルとし…

● HTML基本構文
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
● CSS Reset-Destyle.css-(CSSをリセットする。) 公式サイト
<link href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" rel="stylesheet">
● 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" />
● jQuery3.4.1 CDN-google-
developers.google
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
● jQuery3.4.1 CDN jQuery
<link href="https://code.jquery.com/jquery-3.4.1.js.css" rel="stylesheet" type="text/css">
気になる?画像の隙間
vertical-align text-alignは、水平方向に対し、vertical-alignは垂直方向の位置を表し…
Flexで作るサンタクロース
サンタクロースエリアを作成します。以下のサンプルを参考にレイアウトしていきます。サンタクロースエリアの下に、バナーを2つ…
Flex演習①
見出し・写真・テキストをセットにした連結を、横に整列する練習です。flexの基本から、トライしてみましょう。 Flex演…
Flexで並べるクリスマスケーキ
ケーキのサイズを揃える ケーキ画像をダウンロード See the Pen qBBGXEN by nakatax (@co…
【2020年版】ハローウィン特集
ハローウイン特集2020 今年は、1年生による作品を集めました。バナーは、ユーザーに興味を持ってもらい「クリックさせる」…
【決定版】CSS横並び プロパティまとめ
float,inline,inline-block,table-cell,Flex 横並びを極める 初級(前編)では、C…
【初心者向け解説】JQueryの基本
WebデザイナーのためのjQuery ● 公式サイト https://jquery.com/ jQueryは、アメリカの…
グローバルメニューを移動・固定
メニューを移動し、固定する ヘッダーの直下にあるナビゲーションが、スクロールすると、ページトップの位置に固定されるように…
ヒーローヘッダーの落とし穴
大きなビジュアルを配置したトップページは、多くのサイトに採用されているレイアウトです。ファーストビューが肝心のWebデザ…
画面の大きさとブレイクポイント
デバイスピクセル比(devicePixelRatio) デバイスピクセル比とは画像の1ピクセルをデバイスで何ピクセルとし…