WEB制作基礎知識 jQueryから学ぶプログラミング入門
jQueryは時代遅れの技術である この記事はWebデザイナーを目指すみなさんのために、jQueryの技術についての情報を提供します。 しかし、そんなみなさんに知っておいて欲しい。 jQueryは現在時代遅れの技術だと言われています。 jQ...
Photogentle
WEB制作基礎知識 
WEB制作基礎知識 Web制作の環境を整える
学習を始める前に環境を整えよう 学習を始める前にまずは環境を整える必要があります。 Windows or Mac のパソコン ネット回線 アプリケーション VisualStudioCode Adobe Illustrator Adobe P...
WEB制作基礎知識 意識改革も重要！初心者からコーディングができるようになるためのフロー
コーディングをできる人になろう！ この記事を見ている皆さんはWebサイトが作れる人になりたいと考えているはず・・・！ パソコン作業がどうしても苦手、という場合でなければしっかり初歩から理解していけばサイト制作に必要なHTML / CSSの知...
コーディング練習問題 フォームを作ろう（HTMLのみ）
概要 必要なファイルを新規作成し、画像のようなフォームを作成しましょう。 目的 フォームタグの使い方を学習する。 ※データはありません。index.html style.cssなどを新規作成してください。 目標 デモ 使用ソフト Visua...
WEB制作基礎知識 サイト制作に必要なサーバー用語説明
サーバー (Server) Webサイトやアプリケーションを提供するためのコンピュータ。リクエストを受け取り、適切なデータを返す役割を果たす。 ドメイン名 (Domain Name) Webサイトの名前。例えば「example.com」など...
WEB制作基礎知識 スターサーバーフリーを借りる手順
スターフリーサーバーはサービスが終了しました。 新サービスに移行していますので、そちらを契約することをお勧めします。 すでに契約されている方も、2025年3月末にサーバーが停止しますので、期限までにデータをダウンロードして、サービスを移行し...
コーディング練習問題 サイトレイアウトの実践練習
概要 コードをダウンロードし手順通りに作業しましょう。 目的 基本のpcレイアウトを学習する。 目標 手順 ①CSSの読み込み HTMLにCSSを読み込みましょう。 reset.cssとstyle.cssがあります。 <link rel="...
コーディング練習問題 ブロック要素のレイアウト練習
概要 コードを編集し、以下の動画のようなレイアウトを作成してください。 ヒント marginの左右をautoにすると中央寄せ。 margin-leftをautoにすると右寄せ。 margin-rightをautoにすると左寄せ。 目標 目的...
コーディング練習問題 Positionレイアウト練習②
概要 コードを編集し、以下の動画のようなレイアウトを作成してください。 positionのCSS指定で配置してください。 ヘッダーをスクロールに追従する位置に指定 「TOPへ戻る」ボタンをスクロールに追従させる（位置 下から10px 右から...
コーディング練習問題 Positionレイアウト練習①
概要 コードを編集し、以下の画像のようなレイアウトを作成してください。 HTMLコードに必要なclassは追加してあるため、HTMLの修正は必要ありません。 style.css上でスタイル指定が必要なclassがある場合は、必要なセレクタ等...
コーディング練習問題 Flexレイアウト練習
概要 上記のコードを編集し、以下の画像のようなレイアウトを作成してください。 HTMLコードに必要なclassは追加してあるため、HTMLの修正は必要ありません。 style.css上でスタイル指定が必要なclassがある場合は、必要なセレ...
コーディング練習問題 Flexレイアウト実践問題
概要 「index.html」等を新規作成し、以下のようなレイアウトを作成してください。 横並びにはflexboxでのレイアウトを使用すること 必要なdiv等は適宜追加し、適切なclass付けをすること 使用カラーは「#cca677」「#0...