HTMLのマークアップとCSSレイアウトの演習に「はてブの新着」を例題に作ってみた。

はてなブックマーク

PVが増えてくると、なかなか適当な記事は書けないなぁと思ってたんですが、最近はカナリ減ったので(爆)
初心に戻り地道に記事を書いていこうかと(笑)

今日は、HTMLとCSSに関する内容です。

以前、こういう記事を書きましたが、一番最初は完コピすらハードルが高いのかな?と思ったり・・・

作るのに慣れてないと1ページ真似して作るのにも時間がかかりますよね。最初は部分的に真似してみるのも良いのかなと思います。特にHTMLのマークアップやCSSレイアウトは、部分的なコーディングを沢山行うと早く力がつくような気がします。

PR

 

まずは部分的にコーディングしてみよう!

例題にしたのは「はてなブックマーク」の新着部分です。

はてブ

今回は、右下の1つだけ作ってみました。HTMLファイルで作ってる時は良かったんですけど、ブログの記事の中で再現するのはCSSがバッティングして難しい。若干再現出来てません(汗)

466 users

Macを購入したら最初に設定しておきたいシステム環境設定 – OTTAN.XYZ

  • テクノロジー
  • 2014/09/07 17:56

ottan.xyz

フォントは指定はしてません。フォントサイズや余白は目測です。

ブログの記事上では、イマイチ再現できないので写真で勘弁(笑)

hatena

 

HTMLは、こんな感じにマークアップしました。はてなブックマークのマークアップとは違います。

 

CSSは、こんな感じです。

カラーは、今回一色のみですが、classで色を変更できるようにしておくとベターですね。

まずは色々やってみることですね!

PR

関連記事