Webサイト制作22 ホームページ制作基礎講座 Emmet!プラグインの使いかた(adobe Brackets 使って) Yoshiko先生 爆速プラグイン「Emmet!」の紹介です。これを設定すると入力が非常に楽になります! EmmetでHTMLのタグを入力してみようっっw Emment でHTMLのタグ(要素)を入力する場合は、要素名を入力... 2020.12.08Webサイト制作ホームページ中級講座動画
Webサイト制作21 ホームページ制作基礎講座 フォトギャラリーを作る 続き Yoshiko先生 こちらはこの前のページ 20 のフォギャラリーを作ろうの続編です。前のページは下記から参照されてください。 Photo GalleryのHTMLの全体コード <!DOCTYPE html... 2020.11.26Webサイト制作ホームページ中級講座動画
Webサイト制作20 ホームページ制作基礎講座 HTML編 フォトギャラリーを作る Yoshiko先生 今回はよく使うフォトギャラリーを作っていきましょう〜写真とキャプションの組み合わせのカード形のデザインです。<figure>という要素を使います。 はてな女史 <figure>?フィギュ... 2020.11.24Webサイト制作ホームページ中級講座動画
Webサイト制作02 レスポンシブホームページ基本講座 ブレイクポイント レスポンシブとは、スマートフォン・タブレット・パソコン画面をHTMLはひとつで、CSSで見た目を可変するデザインのことです。今回のレスポンシブホームページ基礎講座は、その概念と考え方を行います。そこで、まず最初に使い方を覚えておく必要がある、google クロムの検証ツール「chromeデベロッパーツール」の使い方を行います。レスポンシブ講座では必須なので、ここでしっかりと使いかたを覚えていきます。 2020.11.05Webサイト制作webデザインレスポンシブ基礎講座
Webサイト制作ポートフォリオ・制作実績講座(転職・フリーランス・在宅) ポートフォリオとは? 分野や業界によって意味が違ってくるのですが、ここで言うポートフォリオとは、【自分をアピールする為の作品集】になります。クリエイティブな業種の採用には、必ずと言っていいほど求められるでしょう。履歴書や職務経歴書よ... 2020.05.05Webサイト制作webデザインレスポンシブ基礎講座
illustrator講座06 バナー作成講座 バナーをIllustratorで作って書き出しまで 在宅・フリーランスになるためのバナー作成講座・イラレ編 6回目のバナー作成講座は、5回目からの引き続き下半分のデザインをIllustratorで作成していきます。上記のようにSALE 詳細はこちらの文字をアピアランスで、境界... 2020.05.05illustrator講座Webサイト制作webデザインバナー作成講座
illustrator講座05 バナー作成講座 バナーをIllustratorで作ってみた 設定から 在宅・フリーランスになるためのバナー作成講座・イラレ編 5回目のバナー作成講座は、Illustratorで、バナーを作成してみよう〜となります。上記のようなバナーを作成しますので、Illustratorの機能もいくつか紹介し... 2020.04.04illustrator講座Webサイト制作webデザインバナー作成講座
Webサイト制作10-2 HTMLとCSS講座 CSS編 そろそろ中級講座になってきましたホームページ作成講座です。 マークアップ言語HTML5でheader footer 設定がおわったあと、CSSでデザインを書いています。 前回の続きのCSSで、liner-gradient と... 2020.04.03Webサイト制作ホームページ中級講座動画
Webサイト制作10-1 ホームページ中級講座 CSSでグラデーション 外部スタイルシート HTML<head></head>内に記述する内包のスタイルシートとは違い、HTMLとは別のファイルを作成して、そのファイルの拡張子をcssとすることで、スタイルシートのファイルを作成す... 2020.04.02Webサイト制作ホームページ中級講座動画
Webサイト制作09 ホームページ基礎講座 HTML編 header footer<header><footer>要素 今回のマークアップは独自コンテンツようのarticle の他に、ページのヘッダー部分に設定する<header>要素 フッター部分専用の<footer>要素を... 2020.04.02Webサイト制作ホームページ基礎講座動画
Webサイト制作08 ホームページ基礎講座 CSS 角丸 border-radius box-sizing:border-box; 今回の動画ではarticle にboder:2px solid と線を引いて、横幅700px padding:2em とした時、画面の横幅が700px + 2em になっていて外に膨れて... 2020.04.02Webサイト制作ホームページ基礎講座動画
Webサイト制作07 ホームページ基礎講座 HTML 箇条書き ul > li ol > li 箇条書きの<ul> <li>要素 <ol><li>要素 <ul> は順不同型リスト <ol>は順序型リストで、ホームページの中で箇条書きをマークアップする時に使われる要素です。箇条書きといっても... 2020.04.02Webサイト制作ホームページ基礎講座動画
Webサイト制作06 ホームページ基礎講座 CSS 幅のwidth 線のborder 横幅指定のwidth を使う HTMLの中に書くスタイルシート 内包スタイルシートを使って、CSSを適用していきます。今回はwidthを使うので、横幅が一定の距離で折り返すというところになります article{ wi... 2020.04.02Webサイト制作ホームページ基礎講座動画
illustrator講座04 バナー作成講座 PSDファイルからの書き出し 在宅・フリーランスになるためのバナー作成講座 yoshiko先生 Webサイト制作で必要な要素のひとつ「バナー」作成講座4回目です。今回は、Photoshopではまだあまり知られていない「アートボード」を使って、簡単に異なるデザイン... 2020.03.31illustrator講座Webサイト制作バナー作成講座
Webサイト制作05 はじめてのホームページ HTMLとCSS article要素 section要素 を設定 文章から基本のマークアップを行います。 article要素とは <artilce>という要素は、独自コンテンツと呼ばれる要素です。 ホームページのコンテンツ=内容を囲... 2020.03.24Webサイト制作ホームページ基礎講座動画
Webサイト制作04 はじめてのホームページ HTMLとCSS HTMLのマークアップされたファイルにCSSを書いていきます HTMLファイルを開いたら、<title>エコロジー&環境問題<title>の直下に内包のスタイルシートを書いていきます。<styl... 2020.03.24Webサイト制作ホームページ基礎講座動画
Webサイト制作03 はじめてのホームページ HTMLとCSS 基本のマークアップが終わりましたら、今回はHTMLで画像の設定を行います。画像は<img>要素を使います。 画像はインライン要素ですので、今回の動画は<p>要素の中に書いています <p><img sr... 2020.03.23Webサイト制作ホームページ基礎講座動画
Webサイト制作02 はじめてのホームページ HTMLとCSS 01のはじめてのホームページ HTMLとCSSでは、エディタに文字にマークアップ言語であるHTMLを設定しました。タイトルにはタイトル要素の<h1>を文章には、段落要素の<p>をマークアップしています。今回は、デザイン担当のCSSを設定します。 2020.03.23Webサイト制作ホームページ基礎講座動画
Webサイト制作01 はじめてのホームページ HTMLとCSS マークアップ言語であるHTMLは、文章に印をつけていく構造型 骨組みの言語です。タイトルだったら<h1> そのサブタイトルだったら<h2> 段落だったら<p> 箇条書きだったら<ul><li> リンクだったら <a href=""> というように印をつけていく言語です。 2020.03.23Webサイト制作ホームページ基礎講座動画
illustrator講座03 バナー作成講座 背景に写真・さくら吹雪のブラシ 在宅・フリーランスになるためのバナー作成講座 yoshiko先生 Webサイト制作で必要な要素のひとつ「バナー」今回は、Photoshop バナーで、背景に写真やイラストを設置してみます。 はてな? バナー作成講座の2回目で... 2020.03.16illustrator講座Webサイト制作バナー作成講座
Webサイト制作01 レスポンシブホームページ基本講座 レスポンシブとは、スマートフォン・タブレット・パソコン画面をHTMLはひとつで、CSSで見た目を可変するデザインのことです。今回のレスポンシブホームページ基礎講座は、その概念と考え方を行います。そこで、まず最初に使い方を覚えておく必要がある、google クロムの検証ツール「chromeデベロッパーツール」の使い方を行います。レスポンシブ講座では必須なので、ここでしっかりと使いかたを覚えていきます。 2020.03.16Webサイト制作レスポンシブ基礎講座
Webサイト制作00 レスポンシブホームページ基本講座 レスポンシブとは、スマートフォン・タブレット・パソコン画面をHTMLはひとつで、CSSで見た目を可変するデザインのことです。今回のレスポンシブホームページ基礎講座は、その概念と考え方を行います。そこで、まず最初に使い方を覚えておく必要がある、google クロムの検証ツール「chromeデベロッパーツール」の使い方を行います。レスポンシブ講座では必須なので、ここでしっかりと使いかたを覚えていきます。 2020.03.15Webサイト制作レスポンシブ基礎講座