未分類

タイトルとサイドバーメニューの背景を角丸に

更新日:

CSS3になってから、スタイルシートで角丸が表現できるようになりましたが、なかなか実装するまでに時間がかかりました。

今回、サイトを作りなおすにあたって、これをきっかけにようやくやってみようと思いました。

このサイトのエントリータイトルのH2タグと、サイドバーのメニューのCSS部分に、次のものを追加しました。

border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px; /* Firefox用 */

5pxはの部分は好みです。僕はもう少し小さい値でもいいかなと思いました。

lala2

 

-webkit以下の部分は、Safari,Google Chrome用です。

-moz以下の部分は、Firefox用です。

まだまだブラウザによって表現が違うようで、-weblitとか、-mozなどと表現してやらないとそれぞれのブラウザで反映できないんですね。

 

ということで、2013年10月における状況下でのことです。

将来は、

 border-radius: 5px;

一本でいけたらいいですね。

 追記

2014年2月現在、ブログのテーマをStingerに変えており、この記事の記載はそのままこのブログのデザインにはあてはまりません。

でも、CSSの書き方は間違いなくこれで表示されていましたので、ご参考になれば幸いです。







メルマガ「知的迷走通信」

登録

「知的ジタバタ日記」「あなたの背中をおすトピック」「Lyustyleの目からウロコ」など,週3~4回,朝7時に発信します。
皆さんと一緒に楽しく成長できたらと思っています。

lyustyle
無料です。解除も自由です。下のリンクよりご登録ください。Lyustyleの設置した安全なページです。


登録するとすぐに第1回目のメールが届き,その後,3回ベーシックコンテンツが届きます。

Lyustyleメルマガ「知的迷走通信」

Lyustyleの本

kindleで読める電子書籍を書いています。2017年6月現在2冊の本を出しています。


 


現在,教育ちゃんねるで連載している記事から,3冊目の本を出版予定です。


 



よろしければ、購読の登録をしていただければ幸いです。


follow us in feedly

にほんブログ村 PC家電ブログ デジモノ・ガジェットへ

にほんブログ村


-未分類

Copyright© 知的生活ネットワーク , 2017 All Rights Reserved.