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">
マスク販促バナー(2020-1学年)
新型コロナウイルス感染症拡大に伴い、いまや日常に欠かせなくなったマスクです。販促用のバナー制作を練習しました。 【作品を…
【2020年度版】レスポンシブ練習(スマホ対応・中級)
可愛いペットをテーマにしたレスポンシブ練習(中級)です。 ▶️ 完成サンプルを見る | …
【2020年度版】レスポンシブ練習(スマホ対応・中級)
基礎から学ぶレスポンシブレイアウト(中級編) サンプルモコモは、現役のクリエイター講師が、ウェブデザイナーを志す学生に向…
【最新版2020】HTML+CSS練習問題(初級)
基礎から学ぶHTML+CSS ケーキハウス編 架空のケーキショップを作成しながら、基礎を固めて行きます。「モバイルファー…
要素の重なり優先順を指定
z-index:値 値は整数で入力し、大きい数値のものほど手前に表示される。(ゼロ開始やマイナス値も有効) ※(注意)要…
ポジションプロパティ(2020年更新)
●資料を見るPDF ボックスの配置方法を指定する position(ポジション)プロパティは、ボックスの配置方法を指定し…
コピペだけ!簡単すぎるCDNを使った「slick slider」
【フルーツをスライドさせてみよう!】 今回は、ダウンロードも不要、jsファイルも用意せずに、オールCDN(コンテンツデリ…
【2019年Xmas特集】
● 生徒作品 https://cocohp.com/students/Xmas/2019/
レスポンシブメニュー実装
ハンバーガーメニュー 【超簡単!】コードコピペで完成。 トグルボタン(ハンバーガーボタン)が完成できたら、いよいよレスポ…
CSSで作るトグルボタン
CSSで作るトグルボタン 今回は、CSSで実装してみましょう。さらにクリック後、trantitonを用いて、クローズボタ…

● 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">
マスク販促バナー(2020-1学年)
新型コロナウイルス感染症拡大に伴い、いまや日常に欠かせなくなったマスクです。販促用のバナー制作を練習しました。 【作品を…
【2020年度版】レスポンシブ練習(スマホ対応・中級)
可愛いペットをテーマにしたレスポンシブ練習(中級)です。 ▶️ 完成サンプルを見る | …
【2020年度版】レスポンシブ練習(スマホ対応・中級)
基礎から学ぶレスポンシブレイアウト(中級編) サンプルモコモは、現役のクリエイター講師が、ウェブデザイナーを志す学生に向…
【最新版2020】HTML+CSS練習問題(初級)
基礎から学ぶHTML+CSS ケーキハウス編 架空のケーキショップを作成しながら、基礎を固めて行きます。「モバイルファー…
要素の重なり優先順を指定
z-index:値 値は整数で入力し、大きい数値のものほど手前に表示される。(ゼロ開始やマイナス値も有効) ※(注意)要…
ポジションプロパティ(2020年更新)
●資料を見るPDF ボックスの配置方法を指定する position(ポジション)プロパティは、ボックスの配置方法を指定し…
コピペだけ!簡単すぎるCDNを使った「slick slider」
【フルーツをスライドさせてみよう!】 今回は、ダウンロードも不要、jsファイルも用意せずに、オールCDN(コンテンツデリ…
【2019年Xmas特集】
● 生徒作品 https://cocohp.com/students/Xmas/2019/
レスポンシブメニュー実装
ハンバーガーメニュー 【超簡単!】コードコピペで完成。 トグルボタン(ハンバーガーボタン)が完成できたら、いよいよレスポ…
CSSで作るトグルボタン
CSSで作るトグルボタン 今回は、CSSで実装してみましょう。さらにクリック後、trantitonを用いて、クローズボタ…