CSSレイアウトテクニック ヒーローイメージによくあるレイアウトを作る【flexbox版】
概要コードを編集し、以下のようなレイアウトを作成してください。背景のグラデーションと文字装飾はすでに適用されているため、位置の指定を行なってください。今回はflexboxを使用してください。ポジションの場合は以下です。ヒント 文字を中央に置...
CSSレイアウトテクニック CSSレイアウトテクニック ヒーローイメージによくあるレイアウトを作る【position版】
概要コードを編集し、以下のようなレイアウトを作成してください。背景のグラデーションと文字装飾はすでに適用されているため、位置の指定を行なってください。ヒント 文字を中央に置こう！ 位置指定にはposition:absolute;を利用 he...
Canvaの使い方 Canvaで作るモックアップ画像！
ポートフォリオ用にモックアップを作るポートフォリオに載せるために、サイトをpcやスマホで動作させている画像を作りたいことがあります。そのような画像はCanvaで簡単に作れます。この記事で作り方を解説します。次のような画像が作れます。以下のペ...
WEB制作基礎知識 ハンバーガーメニューから始めるjQuery
スマホサイトにハンバーガーメニューを実装しよう！スマホサイトを作った際にハンバーガーメニューによるメニュー表示の動作は欠かせません。jQueryの使い方をスマホメニューの作り方から学んでいきましょう。次のような動きのメニューを作成できます。...
WEB制作基礎知識 AniCollectionの使い方
作ったサイトにアニメーションを追加したい！サイトを作っているとアニメーションを追加したいことがあるでしょう。アニメーションを1から作るのは大変ですが、ライブラリを使うことで簡単にサイトに動きを追加することができます。今回使うのは以下のサイト...
WEB制作基礎知識 【初級】jQueryから学ぶプログラミング入門
jQuery初級学習前の記事はこちら！次のように学んでいきます。 ボタンをクリックして要素を非表示にする（jQuery） 入力されたテキストをリアルタイムで表示する（jQuery） リストに項目を追加するボタンを実装する（jQuery） T...
WEB制作基礎知識 jQueryから学ぶプログラミング入門
jQueryは時代遅れの技術であるこの記事はWebデザイナーを目指すみなさんのために、jQueryの技術についての情報を提供します。しかし、そんなみなさんに知っておいて欲しい。jQueryは現在時代遅れの技術だと言われています。jQuery...
WEB制作基礎知識 Web制作の環境を整える
学習を始める前に環境を整えよう学習を始める前にまずは環境を整える必要があります。 Windows or Mac のパソコン ネット回線 アプリケーション VisualStudioCode Adobe Illustrator Adobe Ph...
WEB制作基礎知識 意識改革も重要！初心者からコーディングができるようになるためのフロー
コーディングをできる人になろう！この記事を見ている皆さんはWebサイトが作れる人になりたいと考えているはず・・・！パソコン作業がどうしても苦手、という場合でなければしっかり初歩から理解していけばサイト制作に必要なHTML / CSSの知識は...
コーディング練習問題 フォームを作ろう（HTMLのみ）
概要必要なファイルを新規作成し、画像のようなフォームを作成しましょう。目的フォームタグの使い方を学習する。※データはありません。index.html style.cssなどを新規作成してください。目標デモ使用ソフトVisualStudioC...
WEB制作基礎知識 サイト制作に必要なサーバー用語説明
サーバー (Server)Webサイトやアプリケーションを提供するためのコンピュータ。リクエストを受け取り、適切なデータを返す役割を果たす。ドメイン名 (Domain Name)Webサイトの名前。例えば「example.com」など。これ...
WEB制作基礎知識 スターサーバーフリーを借りる手順
スターフリーサーバーはサービスが終了しました。新サービスに移行していますので、そちらを契約することをお勧めします。すでに契約されている方も、2025年3月末にサーバーが停止しますので、期限までにデータをダウンロードして、サービスを移行してお...