WEBデザイン企画 インタラクション前提でデザインしよう！
Web制作における「インタラクション」とは、ユーザーとWebサイト（またはアプリ）との間で行われる双方向のやり取りを指します。ユーザーの行動に応じて、画面上の要素が反応したり変化したりする仕組みのことです。 「Webサイトは操作することがで...
WEB制作基礎知識
WEBデザイン企画 
WEB制作基礎知識 WEBデザインにおけるモニターの重要性と、RGB・解像度の理解
WEBデザインをする上で、モニター（ディスプレイ）の仕組みを理解することは非常に重要です。特に、RGB（色の表現方法）と解像度（画面の精細さ）を正しく理解すると、より適切なデザインが作成できます。 RGBとは？（色の表現方法） RGB（Re...
Canvaの使い方 【ポートフォリオ作成パーフェクトガイド】WEBデザイナー職に転職しよう！※PDFポートフォリオ
WEBデザイナーに興味があるけど、求人要項に「ポートフォリオ提出」 って書いてある。聞いたことがない単語だ。 ポートフォリオっていうのは「作品集」のことだよ。 WEBデザイナーとしてスキルを持っていることを示すために作品集を提出するの。 ス...
WEB制作基礎知識 Sass超入門 （さわりだけ）
Web制作でよく使われるSassについて知っておこう！ CSSを作成するために言語、Sass(SCSS)があります。 がっつり使っての現場も当然ありますのでまずは概要を知っておきましょう！ PHP（Hypertext Preprocesso...
WEB制作基礎知識 PHP超入門 （さわりだけ）
Web制作でよく使われるPHPについて知っておこう！ サーバーサイドのプログラミング言語として「PHP」があります。 こちらについて学んで、Web制作についてより深く理解しましょう！ PHP（Hypertext Preprocessor）は...
WEB制作基礎知識 GitとGitHub超入門 （さわりだけ）
Web制作でも使うよ、GitとGitHubを知っておこう バージョン管理ツールとして「Git」があります。 概念が理解しにくいものなのですが、使えると大変便利なので把握してみましょう！ Gitは、プログラミングやWeb制作で使用されるバージ...
WEB制作基礎知識 イラストレーターでSVG画像を作ろう！
SVG画像を作ろう！ スマホ対応が必須となった現在の状況では綺麗に表示できるSVGを利用することが非常に有用です。 今回はイラストレーターによるSVG画像の作成方法についてまとめたいと思います。 今回はイラストレーターでこのような画像を作っ...
WEB制作基礎知識 Basic認証をかける ※中級者向け
サイトの閲覧に簡易のパスワードをかけよう webサイトにパスワードの閲覧制限をかけたい場合はサーバーの設定ファイルを追加し、パスワードをかけます。 macの場合「.htaccess」という名称のファイルは非表示になってしまうため注意が必要で...
WEB制作基礎知識 スムーススクロールと上に戻るボタンを実装する
スムーススクロールと上に戻るボタンを実装しましょう！ スムーススクロールとはページ内リンクを押した際に、すーっと移動するものです。 まずはページ内リンクを設定しておきましょう。 該当エリアに「ID」を振っておき、そこへaタグでリンクさせます...
WEB制作基礎知識 ハンバーガーメニューから始めるjQuery
スマホサイトにハンバーガーメニューを実装しよう！ スマホサイトを作った際にハンバーガーメニューによるメニュー表示の動作は欠かせません。 jQueryの使い方をスマホメニューの作り方から学んでいきましょう。 次のような動きのメニューを作成でき...
WEB制作基礎知識 AniCollectionの使い方
作ったサイトにアニメーションを追加したい！ サイトを作っているとアニメーションを追加したいことがあるでしょう。 アニメーションを1から作るのは大変ですが、ライブラリを使うことで簡単にサイトに動きを追加することができます。 今回使うのは以下の...
WEB制作基礎知識 【初級】jQueryから学ぶプログラミング入門
jQuery初級 学習前の記事はこちら！ 次のように学んでいきます。 ボタンをクリックして要素を非表示にする（jQuery） 入力されたテキストをリアルタイムで表示する（jQuery） リストに項目を追加するボタンを実装する（jQuery）...