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

段落のマークアップ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
段落として扱う「p」タグでマークアップしていきます。
講師:
05:09

字幕

このレッスンでは段落タグp のタグを学んでいきます。p は paragraph の p で段落、文章を流し込むためのHTML タグです。それでは begin のフォルダをSublime Text にドラッグ&ドロップします。そして index.html をダブルクリックで開いておきます。そしてフォルダから text フォルダの中に入ってtext-home つまりトップページ用のテキスト言語のファイルをSublime Text の方にドラッグ&ドロップします。こうして今から編集する HTML とコピー&ペーストをするための原稿を同時に開いていきます。それでは、この文章「私たちは」という所から「お手伝いをします。」という3行こちらが「あなたの旅にアイデアを」という見出しに対する説明の文章になりますのでこちらをコピーしておきます。そして HTML の方に行ってこの見出しタグの後ろで、まず改行をしてそして <p と打ってEnter を押しましょう。Enter を押すことでコードが保管されます。そしてこのまま Mac は Command+VWindows は Ctrl+V でペーストをしてしまいます。 このままですと、各文章の後ろでこのコード上では改行されていますがHTML 上ではひと繋ぎになってしまいます。一度この状態でブラウザで見てみたいと思います。まず上書き保存をしておきたいと思いますのでMac は Command+SWindows は Ctrl+S で上書き保存をしてから右クリックでコンテキストメニューを開いて「Open in Browser」を選びましょう。そうしますと、エディタ上では3行でしたがこの様に1繋ぎの文章になっています。こちらを改行したいと思いますのでアプリケーションを切り替えます。Mac は Command+TabWindows は Alt+Tab になります。それでは Sublime Text を開いて「応援します。」の後ろに<br と打ちます。<br は break のタグですね。主に段落の中で文章を改行する時に使います。そして「提供します。」の後ろにも<br で改行を入れておきましょう。それでは上書き保存をしてアプリケーションを Chrome に切り替えてMac は Command+RWindows は Ctrl+R でブラウザを更新します。 そうしますと、この様に改行されたかと思います。それでは Sublime Text に戻りまして他にも p タグを使う所がありますので原稿を見てみましょう。この見出しのコンテンツの情報にそれぞれ1つずつ段落があります。なので、こちらをコピーして「企業情報」の後ろで改行p を作ってペーストを繰り返していきます。コピーしてそして「サービス」の後ろでp タグを作りましてペーストをします。そして3つ目の方もコピーをして「株主」の方で改行してp タグを作ってペーストそして「採用情報」の方もコピーを取ってこちらも p タグを作ってペーストそしてまだ p タグがあります。それは最後のコピーライトの文章になりますのでそちらも原稿テキストの一番下の方にあるこちらのテキストこちらもコピーをしてNews の後ろに改行を入れましてこちらに p タグを作っておきましょう。そしてペーストをします。それでは上書き保存をしてブラウザをフォーカスそして更新をしてみましょう。そうしますと見出し、p タグ、見出し、p タグという風に情報が整理されました。このレッスンでは p タグについてご紹介しました。

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

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

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

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

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

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