triBlog

トリアナのブログ。

WEB制作

ちょっと変わったレイアウトをコーディングする方法

コーディングは、スリル・ショック・サスペンスではない・・・。
ライター画像
あべ

こんにちは、オタコーダーのあべです。
たまに、デザインをいただいた時に試されてる!って思う案件にぶち当たることがあります。
そこで、今回は、ちょっと変わったレイアウトが来た時の私流のコーディングをご紹介します。

今回の問題(デザイン)

では、今回の問題です。
ドン!

コンテンツ毎に、左右で色が違う背景が敷かれたこちらになります。
では、攻略していきましょう。

背景枠を作ります。


背景枠を作り、背景色を敷きます。(画像でもかまいません。)
今回は、#d6d8ff にしてみました。
(わかる人にはわかる、オクタヴィネルっぽい色。最近ツイステにも手をだしました。)

HTML

CSS

※ padingの右4%;は、レスポンシブ時に右側が少し空いて欲しく、必要なので入れいています。

コンテンツ枠背景をつくります。


半分半分の背景色を敷きます。
今回はコンテンツ内は白なので、#fff; と、#d6d8ff;で敷きます。
半分半分の背景色は、ツールを使うと便利です。

HTML

CSS

ちなみに背景が、画像の場合は、一方の色を透過してください。

透過例CSS

コンテンツ枠をつくります。

コンテンツが入る枠を作ります。
コンテンツの背景は白なので#fffで背景指定します。
サイズは、1000px。
位置は真ん中なので、margin:0 auto;で指定します。

HTML

CSS

コンテンツに文字等を入れます。


コンテンツ内にテキストやタイトルを指定します。
contentsにpaddingも入れます。
だいぶ形になって来ました。

HTML

CSS

完成!


これで整いました。
逆にするには、コンテンツ枠背景で色を逆指定し、背景枠の4%を逆にします。

実際においてみました。こんな感じでどうでしょう?

オクタのCM待ってる

今回はここで語ります。
最近、妹にすすめられてディズニーのスマホゲーム、ツイステ始めたんですが、ウツボの双子がかわいくてかっこよくてしんどいです。

自分は、物騒!とビンタされた方のウツボ先輩が好きです。

サイト演出がすごかった

発表当初、こちらのゲームのサイト本当にクオリティ高くてびっくりしました。(思わず、同僚を捕まえて見て!って言ってしまうほど)しかも、数ヶ月にわたり演出をかえてくるという制作会社さん頑張ったね!な内容でして、今は実物は見れないのですが、アーカイブでその演出を見ることができます。

ツイステ公式サイト特別演出アーカイブ

あくまで私流なので、他にも解決方法はあると思います。
1つの例として、とらえていただけたらと思います。

ここがコーディングの面白いところですね。
他に方法があるなら教えて欲しいのでTwitterやFacebook等でリプください。

今日も謎解き頑張るぞ!
デザイナーの方々、お手柔らかにお願いいたします。

WEBサイトなどのご相談はこちらからどうぞ

記事を書いた人

ライター画像
あべ ママコーダー

コード打って、オタ活して、3人の子育てママして、人妻してる書けないくらいclass属性だけは多いコーダーです。

ライター画像
あべ ママコーダー

コード打って、オタ活して、3人の子育てママして、人妻してる書けないくらいclass属性だけは多いコーダーです。

ページ上部へ