Webデザイナーの教科書(初級)
未経験からの基礎講座・どなたでも、ご自由にお使いください。>
未経験からの基礎講座・どなたでも、ご自由にお使いください。>
● 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" />
● 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">
ハイパーリンク
ハイパーリンク機能 a要素とhref属性 クリックしてページジャンプ(移動)する実装を、「リンク」といます。リンクには、…
テーブル・作表
HTMLでは、「表」のことを「テーブル」といいます。テーブルを作成するには、<table>タグを使用します。…
様々なマルチメディア
動画を埋め込む Webページに、ビデオや音声、アニメーションを埋め込むには、2つの方法があります。 Webサービスが提供…
フォームの作成Ⅰ
フォームとは お問い合わせや資料請求など項目別に入力し、データを収集するコンテンツをフォームと言います。情報が一方的に流…
フォームの作成Ⅱ
フォーム関連 フォームの選択項目において、よく使われるフォームパーツについて学習します。 タイプ属性とは それぞれのタイ…
セクションを使った構造化
HTML5では、W3Cにより「セクション」に関するタグの利用が推奨されています。セクションに関するタグを使うと、文書構造…
夏の冷たいおやつ
HTML 初級(下)練習問題 ソフトクリームとかき氷の夏のおやつのレイアウトを組んでみましょう。それぞれのボックスを左右…
テキストに関するプロパティ
テキストの色を指定する 文字列を赤色にするcolor:#ff0000; [crayon-6768b035056aa727…
リンク疑似クラス
リンク疑似クラス 別のウェブページ、ファイル、同一ページ内の場所、電子メールアドレス、または他の URL へのハイパーリ…
進化するモコモコ(PC版)
練習問題(基礎) サンプル通りに実装してみてください。多少の記述の差異は、問題ありません。主要であるブラウザで問題なくレ…
● 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" />
● 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">
ハイパーリンク
ハイパーリンク機能 a要素とhref属性 クリックしてページジャンプ(移動)する実装を、「リンク」といます。リンクには、…
テーブル・作表
HTMLでは、「表」のことを「テーブル」といいます。テーブルを作成するには、<table>タグを使用します。…
様々なマルチメディア
動画を埋め込む Webページに、ビデオや音声、アニメーションを埋め込むには、2つの方法があります。 Webサービスが提供…
フォームの作成Ⅰ
フォームとは お問い合わせや資料請求など項目別に入力し、データを収集するコンテンツをフォームと言います。情報が一方的に流…
フォームの作成Ⅱ
フォーム関連 フォームの選択項目において、よく使われるフォームパーツについて学習します。 タイプ属性とは それぞれのタイ…
セクションを使った構造化
HTML5では、W3Cにより「セクション」に関するタグの利用が推奨されています。セクションに関するタグを使うと、文書構造…
夏の冷たいおやつ
HTML 初級(下)練習問題 ソフトクリームとかき氷の夏のおやつのレイアウトを組んでみましょう。それぞれのボックスを左右…
テキストに関するプロパティ
テキストの色を指定する 文字列を赤色にするcolor:#ff0000; [crayon-6768b035056aa727…
リンク疑似クラス
リンク疑似クラス 別のウェブページ、ファイル、同一ページ内の場所、電子メールアドレス、または他の URL へのハイパーリ…
進化するモコモコ(PC版)
練習問題(基礎) サンプル通りに実装してみてください。多少の記述の差異は、問題ありません。主要であるブラウザで問題なくレ…