htmlcss ニュースエリアを作ってみよう
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

ニュースエリアを作ってみよう

HTML×CSS|2018年10月16日

2018年10月16日
  • このエントリーをはてなブックマークに追加

ウェブサイトにおいて、ニュースの更新欄はメジャーなコンテンツの1つです。
大抵のウェブサイトには実装してありますすね。

今回は、そんな頻出のニュース欄についてのミッションです。
下記の内容を再現してみてください。

■ 解答ファイルのダウンロード
https://base91.net/mission/cording/3/mission3.zip

※ zipファイルって何? どうやって開くの?
http://base91.net/zip-how-to-open/

もし、どうしても分からなければ、解答ファイルをダウンロードして中身を確認しましょう。
1人で何も見ることなく、MISSION3を再現できたら次に進んでみてください。

今回活用しているHTMLとCSSは下記の通りです。
それぞれ、意味を考えながら、使ってみましょう。

新出のHTMLタグ

<article>〜〜〜〜</article>

記事を意味します。

大抵の場合、記事一覧やニュース一覧などに使われます。
記事一覧ページの場合「記事1つ1つ」を囲みます。

記事本文も、もちろん記事ですので<article>で囲うことができます。
ニュース一覧やブログ記事一覧など、記事的なコンテンツ全てに利用できます。

<dl>
<dt>タイトル</dt>
<dd>内容</dd>
</dl>

h1〜h6の見出しを使うほどでもない。
けれど「何らかの要素(dt)」と「その意味や内容(dd)」の関係性にある。
そんな要素に使われます。

ニュース一覧を思い浮かべてみてください。

上記の場合、日付を<dt>とし、内容を<dd>で囲むなどが一例です。
カテゴリを<dt>、文章を<dd>とも解釈できます。

<a href="https://workroom.biz/" target="_blank" rel="noopener noreferrer">リンク</a>

リンクを貼ります。
href=の中に、URLを指定してください。
target=は、_blankにすると別タブでリンク先が開かれます。
_selfもしくは未記入だと、同じタブでリンク先が開かれます。

各タグにおける、より詳しい内容を知りたい場合は、下記のURLを参考にしてみてください。
http://www.htmq.com/html/

新出のCSSプロパティ

background:url(../img/common/luca-bravo-217276-unsplash.jpg);

背景画像を指定できます。パスの指定方法は、前回の画像指定と同じです。
ただ、今回、注意すべきなのは「cssファイルを起点とする」ということです。
前回は「htmlファイルから数えてどこに画像があるか」でした。
今回は、cssファイルから数えた画像のありかを指定する必要があります。

最初のパス設定を見てください。
「../ 」で、1つ階層上にあがってから「 img」フォルダを参照していますね。
cssからみた画像フォルダは1階層上にあるので「../」が必要になります。

background-repeat: no-repeat;

背景画像のリピートをしない設定です。
デフォルトは背景画像が永遠にリピートされます。

background-position: center center;

背景画像の位置を指定しています。
値はcenter right top bottom のいずれかから組み合わせます。
center top であれば、横は「中央」縦は「上」に表示されます。

background-size:cover;

対象の要素に対して、隙間なく1枚の背景画像が表示されます。
かつ、縮んだり拡大しても比率を保ったまま、自動で可変します。
要素に対して隙間なく、一枚画像を表示させたい時に便利です。

display:inline-block;

ブロック要素は自動で改行されますが、インライン要素は横並びになります。
状況に応じて、ブロック要素を横並びにしたい時もあります。
inline-blockでブロック要素をインライン要素のように横並びにできます。

各プロパティにおける、より詳しい内容を知りたい場合は、下記のURLを参考にしてみてください。
http://www.htmq.com/style/

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら