Webサイト制作– category –
-
Figmaを知ろう！入門講座 基本操作と概要
Figmaは、Webデザインやアプリデザイン、プロトタイプ制作に特化したクラウドベースのデザインツールです。ここでは、Figmaの特徴、他のデザインツールとの違い、基本操... -
今更聞けない。Webサイトのアップロード方法。FTPって何？
「Webサイトをアップロードする」と聞くと、初心者の方は少し難しそうに感じるかもしれません。でも実は、適切なツールと手順を知っていれば簡単にできます。その中でも... -
Photoshopのオブジェクト選択を使って、商品を並べたバナーを簡単に作成しよう！
楽天市場やさまざまなシーンでよくみかける、写真（アイテム）の背景が取り除かれて、文字を中心にあちこちに配置されているタイプのバナーの作成をPhotoshopで行います... -
HTMLを適当に書いてませんか？マークアップはとても大事です！
HTMLを扱うとき、「とりあえず見た目さえ整えばいい」という思いで書かれているコードに出会うことがあります。しかし、マークアップを適当に書いてしまうと、SEOやアク... -
意外と読めない・・・HTML/CSS/JavaScript/PHP/WordPressのコードの読み方
授業で生徒さんから「このHTML要素やCSSプロパティってどう読むんですか？」と質問されることがよくあります。特に、意外と特殊な読み方をするものや、日本語では馴染み... -
WebデザイナーがおすすめするWordPress 無料＆有料テーマ
Webデザイン会社や多くのユーザーに人気の高いCMS「Wordpress 」そのWordPressにはデザイン性の高い「テーマ」（テンプレート）が数多く用意されており、テーマは管理画... -
Photoshopでアイキャッチ画像の作成。中央を意識した6分割バナー -応用-
中央に正方形を意識した分割バナーの作成 今回は、Photoshopを使って知っておくと超便利「よくある分割バナー」の作成方法の応用を行います。OGPのことも考えたバナー... -
Webデザイナーだったら、IllustratorとPhotoshopどちらでバナーを作りますか？
IllustratorとPhotoshopどちらで作りますか？ バナーを作成する際、Webデザイナーがよく直面する疑問のひとつに、「AdobeのPhotoshopとIllustrator、どちらを使うべきか... -
現役ウェブデザイナーおすすめのフォント！20選！オススメのGoogleフォント
ウェブデザインにおけるフォントの重要性 まずは、視認性（読みやすさ）が第一に挙げられます。Webサイトを閲覧したユーザーが内容をストレスなく、スムーズ理解できる... -
Webデザイナーがおすすめする無料SVGアイコン「Tabler Icons」
様々なサイトで、UIデザインにぴったりのSVG及びPNGアイコンが無料で使えるTabler Icons Over 4900 pixel-perfect icons for web design このサイトでは、494... -
WordPress[初心者向け]固定ページとメニュー作成 -3-
3回目のWordPress（ワードプレス）初心者向け講座では、よくある会社のウェブサイトを想定した固定ページの作成と、固定ページを作成したあと、ヘッダー・フッター・モ... -
WordPress[初心者向け]基本のプラグインをインストール -2-
今回のWordPress（ワードプレス）初心者向け講座（2回目）では、前回に引き続き、設定したテーマに必要なプラグインを最小限に絞り、その導入と有効化、そしてダッシュ... -
WordPress 最小限入れておきたい「おすすめのプラグイン」
WordPressを初めて利用する際、最小限の必要な設定から始めることはウェブサイトの効率的な構築において重要ですが、基本的なワードプレスの機能だけでは、足りない部分... -
WordPress[初心者向け] ダッシュボードの設定と使い方 -1-
このセクションでは、WordPressの管理画面、つまりダッシュボードについて詳しく解説し、基本的な設定方法をご紹介しております。ローカル環境で、Wordpressを起動しま... -
Visual Studio Codeのおすすめプラグインをインストールしてみる
Visual Studio Code（VSC）は、軽量で高機能なプログラムを記述するための、コードエディタとして広く利用されています。便利な拡張機能（プラグイン）を活用することで... -
WordPressでLocalを使う。ローカル環境構築ガイド–初心者向け
レンタルサーバーを契約する前に、まずは自分のパソコンでWordPressを使いこなせるように練習したいと考えていませんか？実は、WordPressはレンタルサーバーを利用しな... -
Visual Studio Codeのインストールとセットアップ
Visual Studio Codeは、マイクロソフトが開発した無料のオープンソースのテキストエディターです。多くのプログラミング言語に対応し、Windows、macOS、Linuxで利用でき... -
ホームページ中級講座 Table要素を使って表組作成
Table要素を使って表組み作成 ホームページ内で表組みを作成する際は、HTMLの<table>要素を使用します。かつては「テーブルレイアウト」と呼ばれる手法でWebペー... -
Part:1 ポートフォリオサイトの作り方-制作工程
ポートフォリオサイトとは、自分をアピールするためのプロフィールや、今まで作成した制作実績や課題などを掲載したWEBサイトのことです。就活やフリーランスで活動する... -
02 レスポンシブホームページ基本講座 レスポンシブデザインをもっと効率的に
レスポンシブデザインの課題 レスポンシブデザインは、異なるデバイスに適応する柔軟なウェブデザインを実現します。しかし、実際に構築する際には以下のような課題に直... -
01 レスポンシブホームページ基本講座
レレスポンシブホームページ基本講座の第1回目です。前回、レスポンシブデザインに必要な「デベロッパーツール」を解説しました。まだ確認されていない方は、初回講座を... -
00 レスポンシブホームページ講座 (検証ツール)
レスポンシブホームページ制作講座の概要 今回のレスポンシブホームページ制作講座は、その基本概念と考え方について学ぶ初回講座です。レスポンシブとは何か？ スマー... -
ポートフォリオ・制作実績講座[0]ゼロ Canvaを使って作成してみよう！
ポートフォリオとは？ 分野や業界によって意味が違ってくるのですが、ここで言うポートフォリオとは、【自分をアピールする為の作品集】になります。クリエイティブな業... -
06 バナー作成講座 バナーをIllustratorで作って書き出し
在宅・フリーランスになるためのバナー作成講座・イラレ編 ６回目のバナー作成講座は、５回目からの引き続き下半分のデザインをIllustratorで作成していきます。上記の... -
05 バナー作成講座 バナーをIllustratorで作ってみた
在宅・フリーランスになるためのバナー作成講座・イラレ編 5回目のバナー作成講座は、Illustratorを使って、バナーを作成していきます。Photoshopと異なり、写真加工は... -
04 バナー作成講座 PSDファイルからの書き出し
在宅・フリーランスになるためのバナー作成講座 Webサイト制作で必要な要素のひとつ「バナー」作成講座4回目です。今回は、Photoshopを使ってアートボードごとに作成し... -
03 バナー作成講座 背景に写真・さくら吹雪のブラシ
在宅・フリーランスになるためのバナー作成講座 Webサイト制作で必要な要素のひとつ「バナー」今回は、Photoshop バナーで、背景に写真やイラストを設置してみます。 バ... -
02 バナー作成講座 コピー文をバナーらしく載せる
在宅・フリーランスになるためのバナー作成講座 Webサイト制作で必要な要素のひとつ「バナー」今回は、Photoshop にコピー文を広告バナーらしく入力していきます！ バナ... -
01 バナー作成講座 まずは基本のサイズとフォント設定
バナー作成するための準備 バナーを作成するアプリは、特にこれでないとダメ！と決まりがあるわけではありません。使いやすい、慣れたプログラムでもかまいません 但し... -
コードが爆速で入力できる。 Emmet!プラグインの使い方
模写コーディングを行う際は、少しでも速く、効率良く入力を練習する必要があります。 何度か紹介してきたプラグイン「Emmet!」を再度解説した動画です。確認してみまし... -
ホームページ中級講座 HTML編 フォトギャラリーを作る
今回は、Webデザインでよく使われるフォトギャラリーを作成します。写真とキャプションの組み合わせをカード形式で表示するデザインを、HTMLとCSSを使って実現していき... -
09 ホームページ中級講座 footerを下部に固定
ページ一番下に常に配置するfooter要素の設定 前回の「08 ホームページ中級講座」のfloatを使った回り込みに続き、今回はページの一番下に常にfooter要素を固定する方法... -
08 ホームページ中級講座 floatを使った周り込み
CSSの周り込みプロパティ「float」を使った例 前回「07 ホームページ中級講座」の続きとなります。 ここで使用するHTMLファイルとCSSファイルは下記のページを参照くだ... -
07ホームページ中級講座 CSSで作成するロゴとグラデーションを使ったナビゲーション
HTMLコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ネットワークサービス 株式会社</title> <link rel="style... -
06 ホームページ中級講座 便利なEmmet!
Emmetとは？ Emmetは、HTMLやCSSのコーディングを効率化するためのツールです。コードのテンプレートを簡単に生成できる「ショートカット機能」があり、ほとんどのモダ... -
05 ホームページ中級講座 様々なセレクタ::隣接セレクタ
前回の04ホームページ中級講座 display:flex のおさらいの続きになります。 HTMLコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> ...
