2020年– date –

Illustratorの基本講座となります。iPhone のホーム画面にある見慣れたホームアイコンを作成する講座です。ここでは、基本図形の書き方やそれを使っての新しいオブジェクトの生成を行います。 オブジェクト（図形）である四角や丸を書いてみよう！ 新規のアートボードを作成したら、iPhoneから作りやすそうなアイコンをチョイスしてホーム画...

Illustratorでパーツを回転させながら、模様を完成させる Illustratorで、まずは、上記左側を作成するために、まずはオブジェクトツールより楕円をクリックして100px＊100pxの正円を作成します。それを右側にoption(WindowsはAlt)キーをクリックしてからコピーをします。円を重ねるように配置して、パスファインダーの交差をクリックします。...

リース模様を作る オブジェクトを作成後、パスファインダーの交差 オブジェクトツールより楕円をクリックして100px＊100pxの正円を作成します。 option(WindowsはAlt)キーを押したまま、ドラッグして右にコピーをし、円を重ねるように配置します。 プロパティパネルの「パスファインダー」の「交差」をクリックします。 プロパティパネルが出...

イラストレーターで曼陀羅模様を作ろう！ Illustratorで、回転ツールを使って曼陀羅模様を作る工程です。ここでは、オブジェクトを書くことと、そのオブジェクトを変形させ、基準点を変更した回転ツールを使って、オブジェクトを繰り返しながら曼陀羅になっていくことを行います。 まずは800*800のアートボードを作ってから、縦横の中央に印...

レスポンシブデザインの課題 レスポンシブデザインは、異なるデバイスに適応する柔軟なウェブデザインを実現します。しかし、実際に構築する際には以下のような課題に直面することがあります ブレイクポイントが多すぎるデバイスごとに細かくブレイクポイントを設定すると、CSSが煩雑になり管理が困難になる。 コードの重複同じスタイルが複...

レレスポンシブホームページ基本講座の第1回目です。前回、レスポンシブデザインに必要な「デベロッパーツール」を解説しました。まだ確認されていない方は、初回講座をご覧ください。 meta viewportビューポートの設定は必須 meta viewport？メタビューポートって何ですか？ パソコンで見ているホームページをスマートフォンで見ると、全体...

レスポンシブホームページ制作講座の概要 今回のレスポンシブホームページ制作講座は、その基本概念と考え方について学ぶ初回講座です。レスポンシブとは何か？ スマートフォン、タブレット、パソコンなど、異なるデバイスの画面サイズに対応できるデザインのことです。 HTMLは一つで統一し、CSSを利用してデザインを可変させるのが特徴です...

10分で簡単バナー作成 Photoshopを使って写真サイズ変更後、切り抜きツールを使い細長いバナーを作成します。作業時間はおよそ10分です。 今回の動画では、 Photoshop2019までに入っていたプリセット。2020以降は、「従来のプリセット」といって格納された便利グッズを使います。 Photoshop2020からシェイプ・パターン・グラデーション・スウ...

5分でできる簡単バナー作成 Photoshop を使って簡単なバナー作成を行います。使うツールは、 範囲選択のクィック選択ツールとレイヤーマスク レイヤースタイルのグラデーションオーバーレイ ブラシツール（キラキラブラシ） 写真素材が必要なので、下記から素材をダウンロードしておいてください。 Photoshop_banner_01ダウンロード Photosho...

ポートフォリオとは？ 分野や業界によって意味が違ってくるのですが、ここで言うポートフォリオとは、【自分をアピールする為の作品集】になります。クリエイティブな業種の採用には、必ずと言っていいほど求められるでしょう。履歴書や職務経歴書よりも重要視される場合がありますので、ポートフォリオを使ってどれだけスキルをアピールでき...

在宅・フリーランスになるためのバナー作成講座・イラレ編 ６回目のバナー作成講座は、５回目からの引き続き下半分のデザインをIllustratorで作成していきます。上記のようにSALE 詳細はこちらの文字をアピアランスで、境界線を作成し、ブラシツールから、新規にブラシを作成してから花弁を作っていきます。 アピアランスってどういった機能...

在宅・フリーランスになるためのバナー作成講座・イラレ編 5回目のバナー作成講座は、Illustratorを使って、バナーを作成していきます。Photoshopと異なり、写真加工は得意ではないIllustratorですが、オブジェクト（図形）やイラストの作成には適しているツールです。下記のようなイラストメインだったり、図形を多く使うバナーを作成する場...

在宅・フリーランスになるためのバナー作成講座 Webサイト制作で必要な要素のひとつ「バナー」作成講座4回目です。今回は、Photoshopを使ってアートボードごとに作成したバナーを、書き出し形式を使い、１枚１枚をjpeg/png形式で書き出しを行う工程を行っています。 今回は、Photoshopの「アートボード」を使って、異なるデザインを２枚同じ...

在宅・フリーランスになるためのバナー作成講座 Webサイト制作で必要な要素のひとつ「バナー」今回は、Photoshop バナーで、背景に写真やイラストを設置してみます。 バナー作成講座の2回目で、キャッチコピーを入力して配置やデザインもきめたのですが、今から背景ですか？イメージくずれませんか？ そうですね。最初に背景から決めて文字を...

在宅・フリーランスになるためのバナー作成講座 Webサイト制作で必要な要素のひとつ「バナー」今回は、Photoshop にコピー文を広告バナーらしく入力していきます！ バナーらしくとは？？どんな入力の仕方があるんですか？ Photoshop にコピー文を広告バナーらしく入力していきます。少ない情報だからこそ選抜されたキャッチコピーにはこだわ...

バナー作成するための準備 バナーを作成するアプリは、特にこれでないとダメ！と決まりがあるわけではありません。使いやすい、慣れたプログラムでもかまいません 但し、Webデザインの仕事としてバナー作成を依頼される場合は別です。一般的なクラウドソーシングでも、PSDファイル(Photoshop形式)で納品やAIファイル(Illustrator形式)で納品...

模写コーディングを行う際は、少しでも速く、効率良く入力を練習する必要があります。 何度か紹介してきたプラグイン「Emmet!」を再度解説した動画です。確認してみましょう。 EmmetでHTMLのタグを入力してみようっっw Emment でHTMLのタグ（要素）を入力する場合は、要素名を入力してTabキーを押します。 div のあと TABキー で開始と終了タ...

今回は、Webデザインでよく使われるフォトギャラリーを作成します。写真とキャプションの組み合わせをカード形式で表示するデザインを、HTMLとCSSを使って実現していきます。 どんなフォトギャラリーを作るんですか？ 今回は、写真とキャプションの組み合わせを使ったフォトギャリーを作っていきます！HTMLの<figure>という要素を活用...

ページ一番下に常に配置するfooter要素の設定 前回の「08 ホームページ中級講座」のfloatを使った回り込みに続き、今回はページの一番下に常にfooter要素を固定する方法を学びます。下記を参照ください 現代のWebサイトの特徴と課題 近年、スマートフォンサイトの普及により、縦に長いLP（ランディングページ）のデザインが主流となっていま...

CSSの周り込みプロパティ「float」を使った例 前回「07 ホームページ中級講座」の続きとなります。 ここで使用するHTMLファイルとCSSファイルは下記のページを参照ください。 前回「07 ホームページ中級講座」に引き続き、今回はCSSのプロパティ「float」を使用した例を学習します。floatは、画像やテキストの周り込みを制御するためのプロパ...

HTMLコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ネットワークサービス　株式会社</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="content"> <header> <h1>NewWorkService</h1> <nav> <ul> <li><a href="#">Home<...

Emmetとは？ Emmetは、HTMLやCSSのコーディングを効率化するためのツールです。コードのテンプレートを簡単に生成できる「ショートカット機能」があり、ほとんどのモダンなエディタ（VS Code、Sublime Text、Atomなど）に対応しています。Emmetを使うことで、数秒で複雑なHTML構造を楽に生成できます。 !から始める基本操作 まず、HTMLの基本...

前回の04ホームページ中級講座 display:flex のおさらいの続きになります。 HTMLコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="content"> <header> <h1>Flex Box</h1> <...

下記の講座で、ナビゲーションについてのコード練習を行ってきました。 01 ホームページ中級講座 ナビゲーションの作成(HTML) 02ホームページ中級講座 ナビゲーションの作成(CSS) 今回は改めて、CSSのdisplayプロパティのflexについて、復習もかねて深く学習していきましょう 練習するためのHTMLファイルの準備 ファイルを作成し、以下のコー...

今回は、Google Webフォント設定を行います。設定するファイルは、「02ホームページ中級講座 ナビゲーションの作成(CSS)」で作成したコードを使います。 Google のWebフォントを指定する ブラウザのデフォルトフォントについて ブラウザのフォントは、特に指定がない場合、OSやブラウザのデフォルトフォントで表示されます。例えば： Windows...

HTMLマークアップファイルの確認 今回は、下記のページで作成したHTMLを使います。 https://fukuokamiyako.com/post-1470/ デフォルトのスタイルシート HTMLをブラウザでプレビューする際、各ブラウザにはそれぞれデフォルトのスタイルシートが設定されています。検証ツールのCSSセクションを見ると、「ユーザーエージェントスタイルシート」...

今回は、HTMLを文章から正しくマークアップしてから、CSSで横並びのナビゲーションを作成していきます。まずは正しくマークアップできるか確認してみましょう。 下記の文章から、HTMLをマークアップしてみましょう エコロジーと環境問題 ECOLOGY【エコロジー】 Home Service Map エコロジーへの取り組み Computer Technology Groupsでは早く...

今回使うHTML/CSSファイルの準備 下記のコードをコピーもしくは模写して練習を開始しましょう。いくつか追加要素である、aria-labelledbyとidがあります。これは、ウェブアクセシビリティやHTML構造を分かりやすくするための機能です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="descript...

今回からいよいよ、CSSを外部に分けて書く、「外部スタイルシート」を使います。外部スタイルシートを設定する場合、外部ファイル（例: styles.css）を作成し、それをHTMLファイルにリンクします。同じディレクトリ内にstyles.cssというファイルを作成します。 HTMLコード <!DOCTYPE html> <html lang="ja"> <head> <meta charse...

Webページを作成する際、マークアップは見た目を整えるだけでなく、ページの意味や構造を明確にする重要な作業です。その中でも、header, main, footer, article, section, aside,nav,timeといったセマンティックな要素は、検索エンジンやアクセシビリティツールが内容を正確に理解するための鍵となります。今回は、これらの要素の役割や、日...

今回はwidthを指定した際のmarginを使った中央の設定と、widthと同時に記述する際のborderとpaddingを入れるとwidthが大きくなることをしっかりと確認していきます。 HTML/CSSを入力しよう <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal...

今回は、Webサイトの中で使う箇条書き要素について、HTMLのマークアップとCSSの練習を行います。箇条書き要素は、Webサイトでは多くの場所で目次として扱われ、グローバルナビゲーションと呼ばれる重要な場所で使われたりします。 HTMLコードを入力しよう <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <t...

今回は、その指定したsection要素にCSSの横幅指定のプロパティwidthや、線を指定するborderプロパティを使用してCSSのデザイン設定を行います。 HTMLとCSSコードを入力してみよう 幅指定や余白指定のCSSプロパティの練習です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" conten...

今回は、HTML5のセマンティクスを活用した学習になります。これらのコードを正しく使うことで、文書構造をわかりやすく整理し、ユーザーと検索エンジンの両方にとって利便性が高くなります。ここでは、大事な、header要素、footer要素、main要素、section要素、article要素　の設定方法を行なっています。 HTMLコードを入力 下記のコードをコ...

今回はHTMLコードでマークアップされたファイルに、CSSを使って背景色の設定や、線を用いた枠の設置、行内での中央揃えなどを行います。ただし、同じ要素であるp要素に別々の色や配置を指定する場合必要になってくるのがclassです。ここでは、class属性を使って個別指定ができるように行います。 HTMLファイルの作成 下記のHTMLとCSSコードを...

画像をHTMLで配置する方法 3回目の講座では、画像の配置について学びます。HTMLでは、画像は埋め込むのではなく、リンクとして表示されます。そのため、画像ファイルをHTMLファイルと同じフォルダに保存し、HTML内でそのファイルを読み込んで使用します。 例えば、画像が多いページでは、1つのHTMLファイルに対して10個以上の画像を使うこと...