【コピペOK】CSSだけで実装できるおしゃれテーブルデザイン10つ
よくサービスのプランの比較に使用される料金テーブルです。人気のプランを目立たせるために中央のデータだけ大きさを変えて飛び出させています。真ん中の飛び出しているセルはposition:absoluteで実現しています。tableの幅は絶対値で固定しているのでレスポンシブ対応させる場合は横スクロールさせる必要があります。 <table> <tr> <th>無料プラン</th> <th class="popular"><span class="inner"><span class="no1">人気No.1</span>初級プラン</span></th> <th>上級プラン</th> </tr> <tr> <td>¥0</td> <td class="popular">¥5,000</td> <td>¥8,000</td> </tr> <tr> <td><a href="#">申し込み</a></
画像の上に文字列を表示する方法 – いつか誰かの役に立つかもしれないweb制作屋の備忘録
CSSのpositionプロパティを使用して画像の上に文字列を重ねて表示する方法を示します。おまけとしてアニメーション機能を使用して文字列をスクロールさせます。重ねることにより文字の内容や位置の変更にも早く対応できて良いですね。 1.画像の上に文字列を表示する CSSの設定は、画像は「position:relative;」にして、文字列は「position: absolute;」とします。文字列はtop、bottom、left、right等を使用して位置を調整します。 サンプルでは写真の下の方に文字列を表示します。文字列のバックグランドに半透明の黒い帯を表示させます。 HTMLのサンプルソース <div class="photo"> <img src="image.jpg" /> <p class="text">きれいな風景を見て、ちょっと一息</p> </div> CSSのサンプルソース
[JS]フェードで表示・非表示するFAQコンテンツをシンプルなコードで実装するチュートリアル
jQueryを使って、FAQのAnswerをフェードで表示・非表示を切り替えるコンテンツをシンプルなコードで実装するチュートリアルを紹介します。 Questionクリック時 実装 Step 1: 外部ファイル 「jquery.js」を外部ファイルとして記述します。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> Step 2: HTML 質問はh3要素、回答はp要素で実装し、div要素で内包します。 <div id="w"> <h2>User Accounts</h2> <div class="q"> <h3 class="qhead"><a href="#q01">よくある質問</a></h3> <div clas
簡単、きれい！RGBaカラーを使って横メニューを作ってみる
RGBaカラーを使って全体に統一感のある横メニューを作ってみます。RGBaカラーといっても使うの色は白（rgba(255,255,255,0.4)など）と黒（rgba(0,0,0,0.1)など）だけで、その透明度を変えて様々なところで使っています。 先日書いた「カラーツール「0to255」で色を決めてメニューを作ってみる」がなかなか好評でしたが、今回も出来上がりは同じようなメニューになります。 RGBaカラーについては、以前書いた「透明度を表す「opacity」 と 「RGBa」の違いと使い分け」も参考になると思いますのでぜひご覧ください。 早速コードを見てみます。まずはHTMLですが、これは特に問題ないと思います。 <ul id="menu"> <li><a href="#">IE</a></li> <li><a href="#">Firefox</a></li> <li><a href
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
