Webサイト制作
ポートフォリオサイトの作り方

ポートフォリオとは、自分をアピールするためのプロフィールや、今まで作成した制作実績や課題などを掲載したまとめたWEBサイトのことです。 Web制作者として作る必要性を問われたら、これは必須です。 就活やフリーで活動する場 […]

続きを読む
Webサイト制作
22 ホームページ制作基礎講座 Emmet!プラグインの使いかた(adobe Brackets 使って)

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

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

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

続きを読む
Webサイト制作
20 ホームページ制作基礎講座 HTML編 フォトギャラリーを作る

Photo GalleryのHTMLの全体コード <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&gt […]

続きを読む
Webサイト制作
02 レスポンシブホームページ基本講座 ブレイクポイント

レスポンシブホームページ基本講座2回目の講座です。今回はレスポンシブデザインでは、必須の「ブレイクポイント」を解説していますので、1回目はがまだの場合は、レスポンシブホームページ基礎講座1回目をご覧ください。 画面を可変 […]

続きを読む
Webサイト制作
ポートフォリオ・制作実績講座(転職・フリーランス・在宅)

ポートフォリオとは? 分野や業界によって意味が違ってくるのですが、ここで言うポートフォリオとは、【自分をアピールする為の作品集】になります。クリエイティブな業種の採用には、必ずと言っていいほど求められるでしょう。履歴書や […]

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

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

続きを読む
illustrator講座
05 バナー作成講座 バナーをIllustratorで作ってみた 設定から

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

続きを読む
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>要素 フッター部分専用の<foote […]

続きを読む
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ファイルからの書き出し

在宅・フリーランスになるためのバナー作成講座 アートボードを使って、もう一つバナーを作ってみよう 上記のように画面に複数のバナーなどを配置することが可能です。今回は同じサイズですが、異なるサイズでもOKです。 Phtos […]

続きを読む
Webサイト制作
05 はじめてのホームページ HTMLとCSS

article要素 section要素 を設定 文章から基本のマークアップを行います。 article要素とは <artilce>という要素は、独自コンテンツと呼ばれる要素です。 ホームページのコンテンツ=内容を囲 […]

続きを読む
Webサイト制作
04 はじめてのホームページ HTMLとCSS

HTMLのマークアップされたファイルにCSSを書いていきます HTMLファイルを開いたら、<title>エコロジー&環境問題<title>の直下に内包のスタイルシートを書いていきます。&l […]

続きを読む
Webサイト制作
03 はじめてのホームページ HTMLとCSS

基本のマークアップが終わりましたら、今回はHTMLで画像の設定を行います。画像は<img>要素を使います。 画像はインライン要素ですので、今回の動画は<p>要素の中に書いています <p><img […]

続きを読む
Webサイト制作
02 はじめてのホームページ HTMLとCSS

01のはじめてのホームページ HTMLとCSSでは、エディタに文字にマークアップ言語であるHTMLを設定しました。タイトルにはタイトル要素の<h1>を文章には、段落要素の<p>をマークアップしています。今回は […]

続きを読む
Webサイト制作
01 はじめてのホームページ HTMLとCSS

初心者の方むけのホームページ作成講座 はじめのHTML講座では、Adobe Brackets を使って文章にマークアップをおこなう手順を行います。 この講座では、Adobe Bracketsのプラグインemmet!を使っ […]

続きを読む
illustrator講座
03 バナー作成講座 背景に写真・さくら吹雪のブラシ

在宅・フリーランスになるためのバナー作成講座 バナーの背景向きな写真 バナーの背景写真は、上記のサイトにあるように真ん中に必ずテキスト文字が入るので、フレームのようによけて左・右端にあるものがベストです。今回の動画もフレ […]

続きを読む
Webサイト制作
01 レスポンシブホームページ基本講座

レスポンシブホームページ基本講座1回目の講座です。前回レスポンシブで必要なデベロッパーツールを解説していますので、こちらの回がまだの場合は、初回講座をご覧ください。 meta viewportビューポートの設定 < […]

続きを読む