法人のお客様Schooをご利用になるには、JavaScriptの設定を有効にしてください。授業リスト関連授業コース概要この授業では、HTMLとCSSの基本的なスキルを持った方を対象に、企業のコーポレートサイトのような簡単なPCサイトのコーディングについて全6限で学びます。「様々なテクニックを使いこなして、かっこいいWebサイトを作れるようになりたい」という気持ちは、Web制作を行う誰もが思うことです。基礎があやふやだと応用がききません。基本的なレイアウトをきちっと実装できるように、基礎力をしっかり身につけることが大切です。授業を通して、簡単なレイアウトのサンプルデザインを使って、実際にWebページとして完成させましょう。3391_downloads.zip※授業中に使用されている画像データは著作権の関係により本ファイルに入っておりません※授業以外での利用は禁止します。授業概要このコースでは、HTMLとCSSの基本的なスキルを持った方を対象に、企業のコーポレートサイトのような簡単なPCサイトのコーディングについて全6限で学びます。「様々なテクニックを使いこなして、かっこいいWebサイトを作れるようになりたい」という気持ちは、Web制作を行う誰もが思うことです。基礎があやふやだと応用がききません。基本的なレイアウトをきちっと実装できるように、基礎力をしっかり身につけることが大切です。第1回はサンプルデザインをもとにHTMLを書いていきます。授業を通して、簡単なレイアウトのサンプルデザインを使って、実際にWebページとして完成させましょう。footer00:37問題#0302:48答え#0301:38まとめ03:22Q:最近、モダンなwebサイトだと画面一杯に大きな背景画像が現れ、グローバルnavもその画像の上にかかってるサイトをよく見かけるのですが、そういう場合はmainの中にheaderが入っているのでしょうか?02:22Q:日付の<p>2016.06.20</p>は<time></time>でしなくてもいいですか?00:58Q:ずっと企業ロゴをh1にしてました。授業概要このコースでは、HTMLとCSSの基本的なスキルを持った方を対象に、企業のコーポレートサイトのような簡単なPCサイトのコーディングについて全6限で学びます。「様々なテクニックを使いこなして、かっこいいWebサイトを作れるようになりたい」という気持ちは、Web制作を行う誰もが思うことです。基礎があやふやだと応用がききません。基本的なレイアウトをきちっと実装できるように、基礎力をしっかり身につけることが大切です。第2回はCSSを記述して、レイアウトを整えていきます。授業を通して、簡単なレイアウトのサンプルデザインを使って、実際にWebページとして完成させましょう。CSSの記述が間違っているわけではなさそうなのに、レイアウトがずれる。具体的にどうずれているのか確認する簡単で手軽な方法があります。ユーザーがクリックしやすいリストにするために、CSSをどう書くとよいでしょうか。「ページトップへ」のボタンに使われている上向き矢印、どのように実装するのが良いでしょうか04:34答え#0306:16フッター00:05footerのレイアウト02:18まとめ01:44Q:画像をCSSで縮小するメリットってなんですか?01:40Q:CSSを書く時に何か工夫している事とかありますでしょうか?書き方の順番とかどうしたら見やすくなるかいつも迷います。02:14Q:CSSのセレクタ(margin・width等)ですが、書く順番は決まっているのでしょうか?他のソースを見るとセレクタの順番がバラバラの場合もありますが、先生は書く順番に拘りや決まりがありますか?01:29Q:WEBサイトは1からコーディングするのが一般的だと思いますが、CSSフレームワークなどを使った方がいいですか?作業が楽みたいですが。%にして、小数点以下3桁くらいを切り捨ててではいけませんか。授業概要このコースでは、HTMLとCSSの基本的なスキルを持った方を対象に、企業のコーポレートサイトのような簡単なPCサイトのコーディングについて全6限で学びます。「様々なテクニックを使いこなして、かっこいいWebサイトを作れるようになりたい」という気持ちは、Web制作を行う誰もが思うことです。基礎があやふやだと応用がききません。基本的なレイアウトをきちっと実装できるように、基礎力をしっかり身につけることが大切です。第3回はCSSを微調整してトップページを完成させます。授業を通して、簡単なレイアウトのサンプルデザインを使って、実際にWebページとして完成させましょう。ulの高さが70pxで、liは67pxになっています。3px少ないのでしょうか。h1には背景写真を表示させるのに、背景色も指定しています。余白をつけるためにliの右側にmarginをつけたらレイアウトが崩れました。?04:49答え#0302:11今回作ったものの確認01:59おまけ知識01:42まとめ01:34Q:画像についてですが、スマホで撮ったのをそのままimgタグで挿入したらドカンと大きくなります。すればよいでしょう01:02Q:昔は、HTML・CSS・JavaScriptを使ってホームページ作成を主流でしたが、今は、CMSが主流。CSSを使うメリットはありますか?01:55Q:HTML5、CSS3に対応していないブラウザへの対応はどのようにされていますか?00:57Q:ブラウザは基本的には最新版でチェックしてますか?01:38Q:資料30ページのおまけ知識ですが、自然なhoverに見せるには、元の色より薄目にするのがよいのでしょうか?01:26Q:画像を、均等に、3個横並びにする時に、width:やmarginを%で指定するよりも、先ほどの、nth-childでするのが一般的ですか?02:06Q:1限目の授業でサンプルファイル、Marketchフォルダの中に、3BDFCなんちゃら〜フォルダがあります。授業概要このコースでは、HTMLとCSSの基本的なスキルを持った方を対象に、企業のコーポレートサイトのような簡単なPCサイトのコーディングについて全6限で学びます。「様々なテクニックを使いこなして、かっこいいWebサイトを作れるようになりたい」という気持ちは、Web制作を行う誰もが思うことです。基礎があやふやだと応用がききません。基本的なレイアウトをきちっと実装できるように、基礎力をしっかり身につけることが大切です。第4回は下層ページのHTMLの書き方を学習します。適切なHTMLタグの使い方を覚えましょう。授業を通して、簡単なレイアウトのサンプルデザインを使って、実際にWebページとして完成させましょう。A→B→C→D→Eの順番でHTMLを書いてもま以外ではありませんが、情報の重要度を考慮したいです。いう順番で書くのが良いでしょう。ul,liの他に、親子関係(セットである必要)のあるHTMLタグやCSS使用例を挙げてみましょう。順序リスト00:44position01:45サイドバーのナビゲーション03:54おまけ話06:32まとめ02:38Q:mainタグは使用しないのでしょうか?00:52Q:デザイン上hタグがある章とない章がある場合はsection、div、sectionという感じになっても問題ないのですね。間だけdivはおかしいかと思ったのですがよいのですね。02:11Q:例えばFlexboxを使う時に一番大きな枠をdivとして使い、その入れ子としてarticleやsectionを使うとSEO的には問題ないでしょうか?01:42Q:clearfixを使う際、確かarticleなどHTML5で新しく出てきたタグには適用されなかったと思いますが、その際はdivを使う事になるでしょうか?01:11Q:sectionとarticle、figureとpの中のimgどちらかいつも迷います。実務でもあまりこだわらなくてもよいのでしょうか?01:06Q:html5なのにタグを有効利用していないサイトを更新しています。授業概要このコースでは、HTMLとCSSの基本的なスキルを持った方を対象に、企業のコーポレートサイトのような簡単なPCサイトのコーディングについて全6限で学びます。「様々なテクニックを使いこなして、かっこいいWebサイトを作れるようになりたい」という気持ちは、Web制作を行う誰もが思うことです。基礎があやふやだと応用がききません。基本的なレイアウトをきちっと実装できるように、基礎力をしっかり身につけることが大切です。第5回は下層ページのCSSの書き方を学習します。レイアウトによってどんなCSSを使えば良いかを覚えましょう。授業を通して、簡単なレイアウトのサンプルデザインを使って、実際にWebページとして完成させましょう。この方法以外にも回り込みを解除する方法があります。この命名の仕方だと問題がありそうです。それはどんな問題でしょうか。いう命名が適切でしょうか。以下のように一番下のリストだけ点線が表示されないようにするには、CSSをどう書けばよいでしょうか。05:22答え#0302:12まとめ01:57Q:スマホとかであるんですが、長くタップしても写真を保存出来ないのってCSSですか?それともJSですか?00:53Q:last-childはIEだと9からなので、対象ブラウザ8以下だと、対象のliにクラス名付けて対応するしかないか・・。授業概要このコースでは、HTMLとCSSの基本的なスキルを持った方を対象に、企業のコーポレートサイトのような簡単なPCサイトのコーディングについて全6限で学びます。「様々なテクニックを使いこなして、かっこいいWebサイトを作れるようになりたい」という気持ちは、Web制作を行う誰もが思うことです。基礎があやふやだと応用がききません。基本的なレイアウトをきちっと実装できるように、基礎力をしっかり身につけることが大切です。第6回はお問い合わせフォームを作成します。入力しやすいお問い合わせフォームのためのHTMLとCSSの書き方を覚えましょう。授業を通して、簡単なレイアウトのサンプルデザインを使って、実際にWebページとして完成させましょう。最近では、リセットボタンを配置しないお問い合わせページが主流です。クレジットカードや生命保険の加入申し込みページは信じられないほど項目がたくさんあります。この授業で学んだこととは真逆のことをやっているのに、なぜ利用が伸びているのでしょうか。安心して、商用や個人サイトでも使えるレベルでしょうか。組み込むセキュリティの種類を教えてください。閉じる資料をダウンロードするには資料パスワードの設定が必要です。資料パスワードを設定する閉じる資料のダウンロードは1日10件、1ヶ月100件までです。Reserved.スクーについてご意見をお聞かせくださいありがとうございました!いただいたご意見はスクー教務課にて確認し、今後の運営に役立てさせていただきます。個々のご意見にはご返信しておりませんので予めご了承ください。招待したあなたには2枚、招待されたお友達には1枚、録画授業が受けられる「チケット」をプレゼントします。IDで登録メールアドレスまたはパスワードが違います。ログインできない方は「よくある質問」をご確認下さい。