お知らせ

スポンサーリンク
Photoshop講座

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

マークアップ言語であるHTMLは、文章に印をつけていく構造型 骨組みの言語です。タイトルだったら<h1> そのサブタイトルだったら<h2> 段落だったら<p> 箇条書きだったら<ul><li>  リンクだったら <a href=""> というように印をつけていく言語です。
Webサイト制作

19 ホームページ制作基礎講座 CSS編 footerを固定する

Yoshiko先生 HTMLのsection 内に入っている画像周りこみを制御するcss19回目となります。ここでは、ページの一番下に常にfooter が固定されている状態を作っています。 はてな女史 footer って、あのco...
Webサイト制作

18 ホームページ制作基礎講座 CSS編 float

Yoshiko先生 HTMLのsection 内に入っている画像周りこみを制御するcss18回目となります。画像と文章のまわりこみ「float」に関しての説明動画です。 はてな女史 フロートはがどうにもうまくできません。すごく壊れ...
Webサイト制作

17 HTMLとCSS講座 CSS編 text-shadow

Yoshiko先生 ホームページ制作基礎講座 17回目は、1セットのサイトを作ります。CSSでheader を書いていきます。text-shadow 使ってみました。ロゴぽく見えますかね〜 やりすぎると汚く見えてします影効果です。 ...
Webサイト制作

16 HTMLとCSS講座 HTML編

Yoshiko先生 ホームページ制作基礎講座 16回目は、HTMLコードを書く回です画像の横並びにfloat を書いて行きます。HTMLではemmet を使っているので div.content TABキーなどの <div clas...
Webサイト制作

15 HTMLとCSS講座 CSS編 隣接セレクタ編

Yoshiko先生 ホームページ制作基礎講座 15回目は、グローバルナビゲーションでよく使う隣接セレクタの書き方です。CSSです。 はてな? 隣接セレクタって何ですか?そもそもグローバルナビゲーションって? Yoshiko...
Webサイト制作

14 HTMLとCSS講座 HTML/CSS編 display:flex を検証!

yoshiko 14HTML/CSS中級となってまいりました。横並びの決定版 disply:flex を使います。12章・13章で紹介したCSS display:flex について細かい設定を行う動画です。display:flex...
Webサイト制作

13 HTMLとCSS講座 CSS編

12の続きです。ナビゲーションのあと、article  の中の section 内にCSSを適用させてます。 article にpadding 設定のあと、section設定を行います。margin などに気を使って設定していきます...
Webサイト制作

12 HTMLとCSS講座 CSS編

そろそろ中級講座になってきましたホームページ作成講座です。ここでは、グローバルナビゲーションをCSSで書いています。 <nav> <ul> <li> <a href="#">のCSSを書いて行く中で、単位のe...
Webサイト制作

11 HTMLとCSS講座 HTML編

そろそろ中級講座になってきましたホームページ作成講座です。 html header 要素の中に必ず存在するグローバルナビゲーション。nav で囲んでの、ul>li>a のタグを書いています。 emmet を使っているので、とて...
お知らせ

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

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

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

ウェブデザイン技能検定 3級 実技のための解説 作業1 Web業界唯一の国家検定 ウェブデザイン技能士をめざすウェブデザイン技能検定です。 今回は、初めての方でも比較的チャレンジしやすい ウェブデザイン技能検定3級 実技の動画です。 ...
スポンサーリンク
Yoshiko先生をフォローする
タイトルとURLをコピーしました