html、css 記事一覧

バンドのHP作った

更新日:

僕が所属しているアカペラバンドのひとつにおーだーめいどカンタービレ♪というバンドがあるのだが、そのバンドのホームページを作ってみた。
といっても、テンプレートを流用しただけなんだけどな!!!
おーだーめいどカンタービレ♪

使用させていただいたテンプレートは、 HTML5up の Prologue というテンプレート。
Prologue | HTML5UP

1ページ内にすべて収まっているパータンが最近マイブームなので、これをチョイス。
フリーライセンスだけどクレジットつけたままにしといてね♡ってことらしい。
配色に関してはこちらのサイトを参考にした。
ノンデザイナーこそ押さえておきたい!グッとくるWebサイト配色パターン集

今回のサイト作りで色々学びました。

たとえば、質感。紙のような質感を出すために、背景色の上に透過するぼつぼつした画像をマスクしてたりする。
overlay
こんなかんじのやつ。

あと、ボタン。
下の画像の赤い部分は、左と右、どっちも同じ色に見えませんか?
スクリーンショット 2014-02-18 11.46.28
これですね、実は右のほうが明るい色なのです。錯視の一種なのかな…?詳しいことはわからないのですが。。

それと、Youtubeのリンクを途中から再生させる技。これは簡単。
埋め込みコードをこんな風にyoutubeからひっぱってきて、
[html]
<iframe width="189" height="141" src="//www.youtube.com/embed/wv1AHYJ5Fls" frameborder="0" allowfullscreen></iframe>
[/html]
ソースリンクのお尻に
[html]
?start=(始めたい場所の秒数)
[/html]
を書くだけでおk。
つまり、
[html]
<iframe width="189" height="141" src="//www.youtube.com/embed/wv1AHYJ5Fls?start=2220" frameborder="0" allowfullscreen></iframe>
[/html]
こういうこと。べーんりー。

あと、文字はWebフォント使ってます。
M+ FONTS
自分のHPで使わせていただこうと思って見つけてきたフォントだったのだが、先にこっちのページが完成してしまった……笑

そんなもんですかね。結構イメージ通りのものが出来たので満足です。

「面白いじゃん」と思ったらぜひシェアをお願いします!

-html、css, 記事一覧

Copyright© ちゃいら随筆 , 2019 All Rights Reserved Powered by STINGER.