動画

スポンサーリンク
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...
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 を使っているので、とて...
Webサイト制作

10-2 HTMLとCSS講座 CSS編

そろそろ中級講座になってきましたホームページ作成講座です。 マークアップ言語HTML5でheader footer 設定がおわったあと、CSSでデザインを書いています。 前回の続きのCSSで、liner-gradient と...
スポンサーリンク
Yoshiko先生をフォローする
タイトルとURLをコピーしました