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">
font-awesomeで作るSNS
とても便利なfont-awesomeで、人気のSNSを表示させてみましょう。 See the Pen YzKLJYe b…
RWD-DogDogDog
DogDogDog-レスポンシブ編- 基礎編で練習したDogDogDogをRWDに対応する サンプルを見る▶…
HTMLとは
HTML(Hyper Text Markup Language)とは、Webページを作成するための言語の一つです。言語と…
レスポンシブ基礎練習①
モバイルファーストで考える 4つのボックスで構成します。 ▶ サンプルを見る まずは、ビューポート設定から…
トグルボタンとは
トグル(ボタン)とは、ひとつのボタンで、「開く・閉じる(オン・オフ)」の切り替え操作が実現できるスイッチのようなものを指…
専門学生が作る夏のバナー
2020年は、新型コロナウィルスの影響で、多くのイベントや旅行関係など自粛された1年でした。「夏のクリアランスセール」と…
Rabbit&Cat
かわいいペットショップを、仮想して制作します。ヘッダーメニューを3本ラインにします。スマホとPCのメインイメージは、2種…
背景に動画を使用する(vol.①)
背景に動画を使用する① 動きがあって、インパクト効果抜群。動画を読み込む方法はいくつかありますが、容量が重いものもあるの…
ウエディング関連サイト課題制作
架空のウェブサイトを作成します。東京都内にある架空のウエディング企画会社。和装・洋装・披露宴まですべてプロデュース。魅力…
floatの基礎②
画像やリストを横に並べる「float」プロパティですが、近年は「フレックスボックス」という手法が主流になってきました。 …

● 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">
font-awesomeで作るSNS
とても便利なfont-awesomeで、人気のSNSを表示させてみましょう。 See the Pen YzKLJYe b…
RWD-DogDogDog
DogDogDog-レスポンシブ編- 基礎編で練習したDogDogDogをRWDに対応する サンプルを見る▶…
HTMLとは
HTML(Hyper Text Markup Language)とは、Webページを作成するための言語の一つです。言語と…
レスポンシブ基礎練習①
モバイルファーストで考える 4つのボックスで構成します。 ▶ サンプルを見る まずは、ビューポート設定から…
トグルボタンとは
トグル(ボタン)とは、ひとつのボタンで、「開く・閉じる(オン・オフ)」の切り替え操作が実現できるスイッチのようなものを指…
専門学生が作る夏のバナー
2020年は、新型コロナウィルスの影響で、多くのイベントや旅行関係など自粛された1年でした。「夏のクリアランスセール」と…
Rabbit&Cat
かわいいペットショップを、仮想して制作します。ヘッダーメニューを3本ラインにします。スマホとPCのメインイメージは、2種…
背景に動画を使用する(vol.①)
背景に動画を使用する① 動きがあって、インパクト効果抜群。動画を読み込む方法はいくつかありますが、容量が重いものもあるの…
ウエディング関連サイト課題制作
架空のウェブサイトを作成します。東京都内にある架空のウエディング企画会社。和装・洋装・披露宴まですべてプロデュース。魅力…
floatの基礎②
画像やリストを横に並べる「float」プロパティですが、近年は「フレックスボックス」という手法が主流になってきました。 …