Style with custom themes! Change the background, color, schemes, fonts, and more! Share your own themes too!
今更なTipsなんですけど、まぁ自分用の 復習的な記事です。カスタマイズしやす いニュースティッカーを作るコードで、 1行でも4行でも画像でも、cssで見た目 をスタイルするだけで少量のコードで 実装する事が出来ます。 いろいろプラグインを紹介しておいてアレですけど、実際プラグインに依存すると困ることのほうが多いので簡単なものは簡単なコードで実装出来る程度にはしておきたい所ですね。 Sample:01ティッカーです。実際こんな風には実装せず、目立たないところに配置しますけど・・ 以下のコードで実装します。 function ticker(){ $('#news li:first').slideUp( function(){ $(this).appendTo($('#news')).slideDown(); }); } setInterval(function(){ticker()}, 50
第 6 回目は「CSSを使った見栄えの良い表組み(table)」です。 Web サイトのレイアウトがすべて table でコントロールされていた時代がありましたが、今そんなことをしたら嘲笑を買う時代です。 本来の「複数のデータを表示・比較の際にわかりやすいよう見せる表組み」のためのテーブルを、CSSを使って見栄えよくしてみましょう。 1. CSS のみで見栄えよくしてみる 線と塗りだけで表現する、一番シンプルなテーブルを作ってみます。 [HTML] <table id="table-01"> <tr> <th>本体名称</th> <th>スタンド名</th> <th>スピード</th> <th>持続力</th> <th>精密動作性</th> <th>成長性</th> </tr> <tr> <td>空条 承太郎</td> <td>スター・プラチナ</td> <td>A</td> <td>A<
2019年5月17日 CSS CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください! ↑私が10年以上利用している会計ソフト! コードはサンプル内の「HTML」や「CSS」タブをクリックしてくださいね! 少しのコードで実装可能なCSS小技集 シリーズ 【第2弾】少しのコードで実装可能な20のCSS小技集 【第3弾】少しのコードで実装可能な15のCSS小技集 まずはCSS基礎編 1. divを中央揃えにする ほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをautoにして中央揃えに。 See the Pen Center Div by Mana (@manabox
ブログの記事タイトルやサイドバーのタイトルなどで使えるオーソドックスな見出し(hタグ)のデザインサンプル集です。見出しにはCSS3や画像を使っていないのでシンプルですが、一応よく使うので、メモとしてエントリーしておきました。 ※追記6/24 HTMLのマークアップをpからh3に置き換えました。 見出し(Headline)のサンプル集 色やボーダーサイズ等の装飾部分は お好みで編集してください。 見出しサンプル01 .selector01{ border-left:7px solid #e3297d; padding:.6em .8em } 見出しサンプル02 .selector02{ border-left:7px solid #ccc; border-bottom:1px solid #ccc; padding:.6em .8em } 見出しサンプル03 .selector03{ bor
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く