illustrator講座

05 バナー作成講座 バナーをIllustratorで作ってみた 設定から

在宅・フリーランスになるためのバナー作成講座・イラレ編 5回目のバナー作成講座は、Illustratorで、バナーを作成してみよう〜となります。上記のようなバナーを作成しますので、Illustratorの機能もいくつか紹介し...
Webデザイン技能検定

実技01 ウェブデザイン技能検定 3級

ウェブデザイン技能検定 3級 実技のための解説 作業1 Web業界唯一の国家検定 ウェブデザイン技能士をめざすウェブデザイン技能検定です。 今回は、初めての方でも比較的チャレンジしやすい ウェブデザイン技能検定3級 実技の動画です。 ...
Webサイト制作

22 ホームページ制作基礎講座 Emmet!プラグインの使いかた(adobe Brackets 使って)

Yoshiko先生 爆速プラグイン「Emmet!」の紹介です。これを設定すると入力が非常に楽になります! EmmetでHTMLのタグを入力してみよう。 Emment でHTMLのタグ(要素)を入力する場合は、要素名を入力して...
Webサイト制作

21 ホームページ制作基礎講座 フォトギャラリーを作る 続き

Yoshiko先生 こちらはこの前のページ 20 のフォギャラリーを作ろうの続編です。前のページは下記から参照されてください。 Photo GalleryのHTMLの全体コード <!DOCTYPE html...
illustrator講座

01 Illustratorアイコン作成講座 iPhoneのホーム画面アイコン

Illustratorの基本講座となります。iPhone のホーム画面にある見慣れたホームアイコンを作成する講座です。ここでは、基本図形の書き方やそれを使っての新しいオブジェクトの生成を行います。 オブジェクト(図形)である...
Webサイト制作

20 ホームページ制作基礎講座 HTML編 フォトギャラリーを作る

Yoshiko先生 今回はよく使うフォトギャラリーを作っていきましょう〜写真とキャプションの組み合わせのカード形のデザインです。<figure>という要素を使います。 はてな女史 <figure>?フィギュ...
Webデザイン技能検定

学科 平成30年度3回目(3級) ウェブデザイン技能検定

ウェブデザイン技能検定 学科 平成30年度 3回目(3級) ウェブデザイン技能検定3級 学科講座です。過去問より平成30年度 2回目(3級)の過去問題をといて解説しています。 第1問 2 正しくない Internet...
illustrator講座

03 イラストレーター曼荼羅模様 拡大縮小を使って

Illustratorでパーツを回転させながら、模様を完成させる Illustratorで、まずは、上記左側を作成するために、まずはオブジェクトツールより楕円をクリックして100px*100pxの正円を作成します。それを右側...
illustrator講座

02 イラストレーター曼荼羅模様 リフレクトを使ってリーフ

Illustratorでリーフ〜葉っぱを作ります。 Illustratorで、まずは、上記左側を作成するために、まずはオブジェクトツールより楕円をクリックして100px*100pxの正円を作成します。それを右側にoption...
illustrator講座

01 イラストレーター曼荼羅模様 まずは基本の回転ツール

イラストレーターで曼陀羅模様を作ろう! Illustratorで、回転ツールを使って曼陀羅模様を作る工程です。ここでは、オブジェクトを書くことと、そのオブジェクトを変形させ、基準点を変更した回転ツールを使って、オブジェクトを繰り返し...
Webサイト制作

02 レスポンシブホームページ基本講座 ブレイクポイント

レスポンシブとは、スマートフォン・タブレット・パソコン画面をHTMLはひとつで、CSSで見た目を可変するデザインのことです。今回のレスポンシブホームページ基礎講座は、その概念と考え方を行います。そこで、まず最初に使い方を覚えておく必要がある、google クロムの検証ツール「chromeデベロッパーツール」の使い方を行います。レスポンシブ講座では必須なので、ここでしっかりと使いかたを覚えていきます。
Photoshop講座

Photoshop を使って簡単バナー作成2

10分でできる簡単バナー作成 Photoshopのすぐにできるバナー作成 作業時間は10分です。 従来のプリセット を使います。Photoshop2020からシェイプ・パターン・グラデーション・スウォッチなどの様々なプリセッ...
Photoshop講座

Photoshop を使って簡単バナー作成1

5分でできる簡単バナー作成 Photoshop を使って簡単なバナー作成を行います。使うツールは、 範囲選択のクィック選択ツールとレイヤーマスクレイヤースタイルのグラデーションオーバーレイブラシツール(キラキラブラシ)...
Webサイト制作

01 ポートフォリオ・制作実績講座(転職・フリーランス・在宅)

ポーフォリオとは? ポートフォリオは、自分のスキルをアピールするための制作実績や成果物を掲載する作品集です。ホームページの形式や、紙に印刷するものがあります。 例えば、自作のバナーをポートフォリオに掲載する場合、ただ並べるだけ...
illustrator講座

06 バナー作成講座 バナーをIllustratorで作って書き出しまで

在宅・フリーランスになるためのバナー作成講座・イラレ編 6回目のバナー作成講座は、5回目からの引き続き下半分のデザインをIllustratorで作成していきます。上記のようにSALE 詳細はこちらの文字をアピアランスで、境界...
Webサイト制作

10-2 HTMLとCSS講座 CSS編

そろそろ中級講座になってきましたホームページ作成講座です。 マークアップ言語HTML5でheader footer 設定がおわったあと、CSSでデザインを書いています。 前回の続きのCSSで、liner-gradient と...
Webサイト制作

10-1 ホームページ中級講座 CSSでグラデーション

外部スタイルシート HTML<head></head>内に記述する内包のスタイルシートとは違い、HTMLとは別のファイルを作成して、そのファイルの拡張子をcssとすることで、スタイルシートのファイルを作成す...
Webサイト制作

09 ホームページ基礎講座 HTML編 header footer

<header><footer>要素 今回のマークアップは独自コンテンツようのarticle の他に、ページのヘッダー部分に設定する<header>要素 フッター部分専用の<footer>要素を...
Webサイト制作

08 ホームページ基礎講座 CSS 角丸 border-radius

box-sizing:border-box; 今回の動画ではarticle にboder:2px solid と線を引いて、横幅700px padding:2em とした時、画面の横幅が700px + 2em になっていて外に膨れて...
Webサイト制作

07 ホームページ基礎講座 HTML 箇条書き ul > li ol > li

箇条書きの<ul> <li>要素  <ol><li>要素 <ul> は順不同型リスト <ol>は順序型リストで、ホームページの中で箇条書きをマークアップする時に使われる要素です。箇条書きといっても...
Webサイト制作

06 ホームページ基礎講座 CSS 幅のwidth 線のborder

横幅指定のwidth を使う  HTMLの中に書くスタイルシート 内包スタイルシートを使って、CSSを適用していきます。今回はwidthを使うので、横幅が一定の距離で折り返すというところになります article{ wi...
illustrator講座

04 バナー作成講座 PSDファイルからの書き出し

在宅・フリーランスになるためのバナー作成講座 yoshiko先生 Webサイト制作で必要な要素のひとつ「バナー」作成講座4回目です。今回は、Photoshopではまだあまり知られていない「アートボード」を使って、簡単に異なるデザイン...
Webサイト制作

05 はじめてのホームページ HTMLとCSS

article要素 section要素 を設定 文章から基本のマークアップを行います。 article要素とは <artilce>という要素は、独自コンテンツと呼ばれる要素です。 ホームページのコンテンツ=内容を囲...
スポンサーリンク
Yoshiko先生をフォローする
タイトルとURLをコピーしました