HTML&CSSでWebサイトを作ってみよう!

原稿を確認しよう

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
サンプルサイトの原稿は一般的なテキスト形式です。Webに適したテキストになっているか、ボリューム・キーワードなどを確認します。
講師:
04:18

字幕

このレッスンではサイトに必要なテキスト原稿の確認をしていきます。まずレッスンフォルダの text というフォルダを開いてみましょう。中には3つのテキストファイルがあります。それぞれを見ていきたいと思います。まず text-home.txtこちらを Sublime Text で開きます。この様に文字だけの情報が此方に入っています。この罫線は区切りになっています。ではこのテキストをどこで使用するのか実際のサイトを見て確認をしておきましょう。フォルダの中から一階層上に戻りましてsite というフォルダがありますのでsite のフォルダの中の HTML をChrome で開きます。Chrome で開きますとこの様にサイトの完成図がでてきますけど例えばこの、画像にはなっていますがこちらの文字であったりとか「お問い合わせ」とか「サイトマップ」この様なキャッチコピーのエリアですとかこういったものがSublime Text の方で開いたこのテキスト原稿に入っているということです。人間が手で打ってしまうと打ち間違え等が発生してしまいますのでできるだけ原稿は完成したらコピー&ペーストで使うことをお薦めします。 また、他のテキストも見てみましょう。ここでアプリケーションの切り替えのショートカットも覚えておきましょう。Mac は Command+TabWindows は Alt+Tab でこの様にアプリケーションの切り替えが可能です。フォルダの方を開いてそして1階層戻ります。階層の戻り方はMac の場合は Command+1などで戻ることが可能ですしフォルダの表示を変えればWindows でも Mac でも共通で上の階層に戻れるかと思います。階層を戻りましたらtext フォルダですね。text フォルダの中に原稿が入ってますのでこの原稿の中の text-company をドラッグ&ドロップでSublime Text のアイコンにまた落としてみます。そうしますと、こちらは会社概要のページの原稿になっています。どこに使われているかというとこちらの Chrome の「企業情報」のリンクをクリックするとこの様に表示がでますけれどここの内容であったりここの内容であったりします。それでは次の原稿を見てみましょう。またフォルダの方に切り替えてtext-meta という原稿があります。こちらをまた Sublime Text にドラッグ&ドロップで見ていきましょう。 こちらは文字だけではなくて この様にプログラムのコードも入っています。これはメタ情報と言ってページの表にはでてこないけど検索結果であったりとかソーシャルサービスでシェアされた場合に埋め込まれている、このデータを表示するといったことが可能になるそんな情報がメタ情報です。このメタ情報も使っていきます。此方の確認の仕方はGoogleChrome に戻りまして右クリックを 特に何もない背景の白い所で右クリックをして「ページのソースを表示」とします。そうしますと、HTML のhead というエリアがありますので実はそちらに纏めて入っています。このレッスンではテキストの原稿についてご紹介しました。

HTML&CSSでWebサイトを作ってみよう!

HTMLとCSSについての断片的な知識だけではウェブサイトを構築することはなかなか難しいでしょう。そこでこのコースでは、架空のサイトを実際に構築しながら、シチュエーションに合わせたHTMLとCSSの使い方について学んでいきます。実際のWeb制作の現場でどのようにHTMLとCSSが使われているかを確認しながら、実践的なスキルを習得しましょう。

3時間28分 (31 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年03月19日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。