2024-10

WEB制作基礎知識

AniCollectionの使い方

作ったサイトにアニメーションを追加したい! サイトを作っているとアニメーションを追加したいことがあるでしょう。 アニメーションを1から作るのは大変ですが、ライブラリを使うことで簡単にサイトに動きを追加することができます。 今回使うのは以下の...
WEB制作基礎知識

【初級】jQueryから学ぶプログラミング入門

jQuery初級 学習前の記事はこちら! 次のように学んでいきます。 ボタンをクリックして要素を非表示にする(jQuery) 入力されたテキストをリアルタイムで表示する(jQuery) リストに項目を追加するボタンを実装する(jQuery)...
WEB制作基礎知識

jQueryから学ぶプログラミング入門

jQueryは時代遅れの技術である この記事はWebデザイナーを目指すみなさんのために、jQueryの技術についての情報を提供します。 しかし、そんなみなさんに知っておいて欲しい。 jQueryは現在時代遅れの技術だと言われています。 jQ...
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にすると左寄せ。 目標 目的...