CSS の border プロパティを使って見出しを装飾しよう

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

みなさん, Web サービスやブログを作る際に見出しのデザインに悩んだことはありませんか?

意外とこれが曲者で, Web デザインについての情報はたくさんありますが, 見出しについてはこれといった決定版ってのがないんですよねぇ.

今回は, CSS の border プロパティを使って見出しを装飾する方法を紹介します.

以前書いたエントリー『CSS の border-style 一覧』で紹介した border-style に加え border-colorborder-width を活用することで簡単に見出しを装飾することができます.

色々なパターンの見出しを jsdo.it で作っておりますので, 実際に実行したり fork してイジったりして遊んでもらえると幸いです.

また, 超有名ブログの見出しについても少しまとめてみたので, よかったら参考にしてみてください.

screenshot

Read More

『第一回全国統一HTML5実技コンテスト – jsdo.it』にエントリーしてみた

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

テーマはじゃんけんです.

ふといくつかゲームを思いついたので私も作ってみました.

テーマがじゃんけんなのに作ったのはパズルゲーム! 最近ハマっているパズドラに影響されちゃってますw

よかったら遊んで下さいな♪

screenshot

Read More

ページ右上に表示するリボンを CSS3 で作ってみた with LESS

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

CSS3 と LESS でページ右上に表示するリボンを作ってみました.

jsdo.it を使って Step by Step で作りながら解説しています. よかったら参考にしてください.

screenshot

Read More

CSS の border プロパティを使って見出しを装飾しよう – 超有名サイトの見出し

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

『CSS の border プロパティを使って見出しを装飾しよう』 第4弾! ラストです!!

私がよく参考にさせて頂いている有名ブログの見出しを並べてみました. 私が真似て作っているだけなので実際のコードとは異なる部分がありますのでご注意下さい.

やはり有名なブログだと, ごちゃごちゃした見出しではなく, 見やすさを重視したシンプルなものが多いですね.

なんかデザインについて色々言っちゃっていますが, 私はゲームプログラマであってWeb に関しては素人です. なので, なんか言っちゃってんなぁ~程度に流してもらえれば幸いです.

※見出しで使用している画像は許可を頂いて使用しています. 本家サイトの許可無く転用しないようお願いします.

screenshot

Read More

CSS の border プロパティを使って見出しを装飾しよう – ド派手な見出し

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

『CSS の border プロパティを使って見出しを装飾しよう』 第3弾!(第4弾まであります!!)

引き続き CSS の border プロパティを使って見出しを装飾する方法について紹介します.

ド派手な見出しです. 大見出しから中見出しを想定して作りました.

前回までの見出しとの違いは背景色を付けたり 上下左右をボーダーで囲ったりして見出しとしての役割を強調しています.

色については, 並べたときに見栄えするように hsl を使って色相を 60度ずつずらしていますが今回のエントリーとは無関係なので気にしないで下さい.

screenshot

Read More

CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

『CSS の border プロパティを使って見出しを装飾しよう』 第2弾!(第4弾まであります!!)

引き続き CSS の border プロパティを使って見出しを装飾する方法について紹介します.

ちょい派手な見出しです. シンプルな見出しです. 大見出しから中見出しを想定して作りました.

色については, 並べたときに見栄えするように hsl を使って色相を 60度ずつずらしていますが今回のエントリーとは無関係なので気にしないで下さい.

screenshot

Read More