Webサイト制作– category –
-
ポートフォリオ「デザインカンプ」の作成
ポートフォリオのデザインカンプを作成する際には、以下のステップになります。 目的を明確にする：ポートフォリオの目的は何か、何を伝えたいのかを明確にすることが重要です。自分のスキルや経験、作品をアピールすることが目的であれば、それに合わせた... -
Visual Studio Codeのインストールとセットアップ
Visual Studio Codeは、マイクロソフトが開発した無料のオープンソースのテキストエディターです。多くのプログラミング言語に対応し、Windows、macOS、Linuxで利用できます。 Visual Studio Codeには、シンタックスハイライト、コード補完、デバッグ機能... -
ホームページ中級講座 Table要素を使って表組作成
ホームページ内で表組みを作成する場合はtable要素を使います。 ひと昔前までは、テーブルレイアウトというのを使ってレイアウトを作成している時代がありましたが、今のTable要素は、完全に表としての利用以外に使うことはありません。またレスポンシブウ... -
ポートフォリオサイトの作り方
ポートフォリオとは、自分をアピールするためのプロフィールや、今まで作成した制作実績や課題などを掲載したWEBサイトのことです。就活やフリーランスで活動する場合は必須のアイテムといえます。 「WEBサイトの作成ができます！」と言っても、相手はあな... -
02 レスポンシブホームページ基本講座 ブレイクポイント
レスポンシブホームページ基本講座2回目の講座です。今回はレスポンシブデザインでは、必須の「ブレイクポイント」を解説していますので、1回目はがまだの場合は、レスポンシブホームページ基礎講座1回目をご覧ください。 【画面を可変するレスポンシブ】 ... -
01 レスポンシブホームページ基本講座
レスポンシブホームページ基本講座1回目の講座です。前回レスポンシブで必要なデベロッパーツールを解説していますので、こちらの回がまだの場合は、初回講座をご覧ください。 【の設定は必須】 meta viewport？メタビューポート？って何ですか？ パソコン... -
00 レスポンシブホームページ講座 (検証ツール)
レスポンシブホームページ制作講座の初回講座です。 レスポンシブとは、スマートフォン・タブレット・パソコン画面をHTMLはひとつで、CSSで見た目を可変するデザインのことです。 今回のレスポンシブホームページ基礎講座は、その概念と考え方を行います。... -
ポートフォリオ・制作実績講座[0]ゼロ Canvaを使って作成してみよう！
【ポートフォリオとは？】 分野や業界によって意味が違ってくるのですが、ここで言うポートフォリオとは、【自分をアピールする為の作品集】になります。クリエイティブな業種の採用には、必ずと言っていいほど求められるでしょう。履歴書や職務経歴書より... -
06 バナー作成講座 バナーをIllustratorで作って書き出し
【在宅・フリーランスになるためのバナー作成講座・イラレ編】 ６回目のバナー作成講座は、５回目からの引き続き下半分のデザインをIllustratorで作成していきます。上記のようにSALE 詳細はこちらの文字をアピアランスで、境界線を作成し、ブラシツールか... -
05 バナー作成講座 バナーをIllustratorで作ってみた
【在宅・フリーランスになるためのバナー作成講座・イラレ編】 5回目のバナー作成講座は、Illustratorで、バナーを作成してみよう〜となります。上記のようなバナーを作成しますので、Illustratorの機能もいくつか紹介しつつの動画です。その為時間が多少... -
04 バナー作成講座 PSDファイルからの書き出し
【在宅・フリーランスになるためのバナー作成講座】 Webサイト制作で必要な要素のひとつ「バナー」作成講座4回目です。今回は、Photoshopの「アートボード」を使って、簡単に異なるデザインベースのバナーを作ります。 アートボードは、イラストレーターの... -
03 バナー作成講座 背景に写真・さくら吹雪のブラシ
【在宅・フリーランスになるためのバナー作成講座】 Webサイト制作で必要な要素のひとつ「バナー」今回は、Photoshop バナーで、背景に写真やイラストを設置してみます。 バナー作成講座の2回目で、キャッチコピーを入力して配置やデザインもきめたのです... -
02 バナー作成講座 コピー文をバナーらしく載せる
【在宅・フリーランスになるためのバナー作成講座】 Webサイト制作で必要な要素のひとつ「バナー」今回は、Photoshop にコピー文を広告バナーらしく入力していきます バナーらしくとは？？どんな入力の仕方があるんですか？ Webサイト制作で必要な要素のひ... -
01 バナー作成講座 まずは基本のサイズとフォント設定
【バナー作成するための準備】 バナーを作成するアプリは、特にこれでないとダメ！と決まりがあるわけではありません。使いやすい、慣れたプログラムでもかまいません 但し、Webデザインの仕事としてバナー作成を依頼される場合は別です。一般的なクラウド... -
コードが爆速で入力できる。 Emmet!プラグインの使い方
模写コーディングを行う際は、少しでも速く、効率良く入力を練習する必要があります。 何度か紹介してきたプラグイン「Emmet!」を再度解説した動画です。確認してみましょう。 【EmmetでHTMLのタグを入力してみようっっw】 Emment でHTMLのタグ（要素）を... -
20 ホームページ中級講座 HTML編 フォトギャラリーを作る
今回はよく使うフォトギャラリーを作っていきましょう〜写真とキャプションの組み合わせのカード形のデザインです。<figure>という要素を使います <figure>？フィギュアって読むんですか？あの人形の? 読み方はあってますね。figureは図という... -
19 ホームページ中級講座 footerを下部に固定
前回の18ホームページ中級講座 flat を使った回り込みの続きになります。 今回は、ページ一番下に常に配置するfooter要素を、一番最下部に固定する状態を作ります。 最近のWebサイトは、スマホサイトの影響もあって、縦に長いLP（ランディングページ）が多... -
18 ホームページ中級講座 floatを使った周り込み
前回「17 ホームページ中級講座」の続きとなります。 HTMLとCSSは前回のファイルを引き続き使いますので用意しておきましょう。 ここでは、cssの周り込みのプロパティ「float」を使った例を行なっています。 floatは、画像周りこみを制御するプロパティで... -
07ホームページ中級講座 CSSで作成するロゴ
前回の06 ホームページ中級講座 便利なEmmet!で作成したHTMLのマークアップファイルを使います。 ここから学習する場合は、フォルダは07を作成して、下記のHTMLファイルをコピーするか、コードを模写してから行いましょう。cssは外部スタイルシートになる... -
06 ホームページ中級講座 便利なEmmet!
16ホームページ中級以降は、少し懐かしさもある下記のようなホームページのコードを模写しながら練習していきましょう。 パソコン画像とグラフ画像ファイルは別途準備ください。 【テキストにマークアップを行なっていきます】 下記のテキストをコピーして... -
05 ホームページ中級講座 様々なセレクタ::隣接セレクタ
前回の04ホームページ中級講座 display:flex のおさらいの続きになります。 05のフォルダを作成し、inde.htmlに下記コードを貼り付けます。style.cssはファイル作成のみ行います。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UT... -
04 ホームページ中級講座 display:flex のおさらい
下記の講座で、ナビゲーションについてのコード練習を行ってきました。 01 ホームページ中級講座 ナビゲーションの作成(HTML) 02ホームページ中級講座 ナビゲーションの作成(CSS) 今回は改めて、CSSのdisplayプロパティのflexについて、復習もかねて深く学...
12