吉野家コピペで練習するHTML&CSS

吉野家コピペで練習するHTML&CSS

鉄板コピペである吉野家コピペを使ってHTMLとCSSの基本をおさえるための練習場です。
吉野家コピペ(とその別Ver.)を使ってコンテンツを作り、CSSでデザインを変えてみます。

吉野家コピペ

昨日、近所の吉野家行ったんです。吉野家。
そしたらなんか人がめちゃくちゃいっぱいで座れないんです。
で、よく見たらなんか垂れ幕下がってて、150円引き、とか書いてあるんです。
もうね、アホかと。馬鹿かと。
お前らな、150円引き如きで普段来てない吉野家に来てんじゃねーよ、ボケが。
150円だよ、150円。
なんか親子連れとかもいるし。一家4人で吉野家か。おめでてーな。
よーしパパ特盛頼んじゃうぞー、とか言ってるの。もう見てらんない。
お前らな、150円やるからその席空けろと。
吉野家ってのはな、もっと殺伐としてるべきなんだよ。
Uの字テーブルの向かいに座った奴といつ喧嘩が始まってもおかしくない、
刺すか刺されるか、そんな雰囲気がいいんじゃねーか。女子供は、すっこんでろ。
で、やっと座れたかと思ったら、隣の奴が、大盛つゆだくで、とか言ってるんです。
そこでまたぶち切れですよ。
あのな、つゆだくなんてきょうび流行んねーんだよ。ボケが。
得意げな顔して何が、つゆだくで、だ。
お前は本当につゆだくを食いたいのかと問いたい。問い詰めたい。小1時間問い詰めたい。
お前、つゆだくって言いたいだけちゃうんかと。
吉野家通の俺から言わせてもらえば今、吉野家通の間での最新流行はやっぱり、
ねぎだく、これだね。
大盛りねぎだくギョク。これが通の頼み方。
ねぎだくってのはねぎが多めに入ってる。そん代わり肉が少なめ。これ。
で、それに大盛りギョク(玉子)。これ最強。
しかしこれを頼むと次から店員にマークされるという危険も伴う、諸刃の剣。
素人にはお薦め出来ない。
まあお前らド素人は、牛鮭定食でも食ってなさいってこった。

Step1

上記吉野家コピペを使ってHTML直書きでテンプレを作ります。
ヘッダーにコンテンツトップへのリンク、サイトトップへのリンク
メインに画像挿入と画像からのリンク、h2、strong、テンプレ本体
フッターに吉野家コピペの説明とニコニコ大百科の解説ページへのリンク
という単純な構成です。

ソースコード

Step2

Step1で作成したテンプレにCSSをあててデザインを変えてみます。
ついでにul liを使ってこのコンテンツ全てへ行き来できるリンクをメニューとして作成します。
CSSを当てるためにdiv要素でmenu,main,footerを作成します。
CSSはわかりやすいように要素に対してborder-bottomで一部枠線を入れたり、background-colorで背景色を入れます。
見栄え良くするためにfloatでmenuを左側に回りこませます。 使ったCSSはyoshinoya.cssです。

ソースコード

HTML

CSS

Step3

Step2で若干いじったテンプレにCSSフレームワークであるBootStarp3のCSSを適用します。
Bootstrapの流儀に習ってco-md-3 でmenu、col-md-9 でメインを指定してグリッドシステムを使います。
デフォルトのCSSでは気に入らないところを追加のCSSで修正します。
基本のCSSとjsやjQueryはCDNから取ってきて、追加のCSSはyoshinoyabs.cssに記述します。

ソースコード

HTML

CSS

その他メモ的な何か

Bootstrap3のCSSやらなんやらをCDNから取ってくるのはGetting StartのCDNのとことか。
あと同じページのBasic templateのとこのheaderの中とか見ればだいたい分かる。
containerで全体を覆って、rowsでmenuとmainを囲って、あとは基本のグリッドレイアウトを利用。
ちなみにこのページ自体はStep3と同じCSS設定を使ってます。

inserted by FC2 system