今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！要素の四隅の角を丸めるためのCSSプロパティー「border-radius」。ボックスや画像などの要素に対して適応でき、角丸にしたりまん丸にしたりと、様々な表現が可能です。このプロパティーが使えるようになってから、どれだけコーディングが楽になったか…！今回はそんなborder-radiusの基本的な使い方と、応用表現を紹介します！ 無難で王道！正円の円弧を使った角丸border-radius は「border」とついているものの、border プロパティーの指定がなくても大丈夫。background によって与えられた背景や、img 要素で指定された画像の四隅も丸まめられます。 四隅に同じ値の丸みを与えるなら border-radius: 10px; と記述すれば OK。半径 10px の正円の円弧をベースにした角丸
.btn-square { display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #668ad8;/*ボタン色*/ color: #FFF; border-bottom: solid 4px #627295; border-radius: 3px; } .btn-square:active { /*ボタンを押したとき*/ -webkit-transform: translateY(4px); transform: translateY(4px);/*下に動く*/ border-bottom: none;/*線を消す*/ }
モバイル表示の時右上に「≡」アイコンで設置したりするハンバーガーメニュー。通常ならば JavaScript を用いてクリック時に開くようコードを組むのが普通ですが、CSS だけで設置してみようと思います。 今回作るハンバーガーメニューはマウスホバー時に開くタイプです。ラジオボタンなどを使えばホバーではなくクリックでも開くように作れそうですが、ホバーの方が簡単なのでそちらで作ってみます。 追記 ホバーではなくクリックでメニューの開閉をするバージョンの記事を書きました。 参考：checkboxを使ってCSSだけでハンバーガーメニュー 作り方実際に当記事でもハンバーガーメニューを設置してみました。右上の「≡」アイコンにマウスカーソルを乗せるとメニューが開きます。 HTML<div id="ham-menu"> <ul> <li>メニュー1</li> <li>メニュー2</li> <li>メニュー
ご覧のような、各板の勢いを文字の大きさで表したタグクラウドをご提供しています。あなたのサイトやブログに貼り付けて、今2chで勢いのある板を訪問者に知らせることができます。 更新は15分ごと、２ちゃんねる全板での勢いランキング100位以内に入った板を表示しています。文字の上にマウスをあてると、その板が現在何位にランクインしているかが分かります。 <script src="http://ranking.sitepedia.jp/ranks/cloud.js" charset="Shift_JIS"> </script> ↑このコードをコピペするだけで、導入できます。 ブログの場合 ブログにも、基本的にコピペだけで導入できます。 例として、Seesaaブログの場合でご説明致します。 まず、デザイン→コンテンツから「自由形式」を選択し、任意の場所にドラッグアンドドロップして配置します
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
