Drawer
Flexible drawer menu using jQuery, iScroll and CSS. InstallationStep 1: Link required filesDownloadDrawer v3.2.2jQuery 1.11.3+ Created by jQuery Foundation and other contributors.iScroll Created by Matteo Spinelli.CDN<!-- drawer.css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css"> <!-- jquery & iScroll --> <script src="https://ajax.google
レスポンシブに対応した簡単メニュー
PC・タブレット・スマホ、それぞれに対応したレスポンシブなメニューを「jQuery」と「CSS」で簡単に作成できます。シンプルなものですが、その作り方をメモしておきます。 サンプルを用意しましたのでまずは確認してみてください。 ウィンドウサイズを小さくしてみたり広げてみたりすると、２列になり、メニュータブにと変化するようにしてあります。 デモサンプル それでは、作り方を見ていきましょう。 1.HTMLを記述 <nav id="menu-box"> <div id="toggle"><a href="#">MENU</a></div> <ul id="menu" class=""> <li><a href="#">Navi1</a></li> <li><a href="#">Navi2</a></li> <li><a href="#">Navi3</a></li> <li><a href="
CSSの基礎／CSS講座
CSSの基礎 CSSの適用 外部CSSファイルの利用 CSSファイルの作成 link要素による参照 外部CSSの利点 style要素の利用 style属性の利用 セレクタ スタイルの継承 id,class属性値の命名 CSSの書き方をすぐにでも知りたいところでしょうが、その前に勉強してほしいことがいくつかあります。まずCSSの基本的なお約束に目を通してください。 CSSの適用 HTML4.01Strictでは、3種類のCSS記述が可能です。 外部CSSファイルの参照 style要素の利用 style属性の利用 外部CSSファイルの利用 お勧めの方法です。 外部CSSファイルをHTML文書とは別に作成し、＊＊＊.cssという名前で保存します。 head要素内でlink要素を用いて＊＊＊.cssを参照します。 外部CSSファイルの作成 外部CSSファイルはテキストファイルですからNotepad
WordPressのhead要素を整理してみる
静的HTMLだった場合のhead要素 いきなりWordpressに入る前に静的HTMLで作成する場合のhead要素を確認してみます。 あれが足りない、ここは違うだろという意見はあると思いますが、大きく外していないはず（多分……）。 HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="imagetoolbar" content="no" /> <meta
Awesome Blockquote Styling with CSS | Code-Tricks
Here is the simple technique to get awesome blockquote styling with CSS.1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 blockquote{ display:block; background: #fff; padding: 15px 20px 15px 45px; margin: 0 0 20px; position: relative; /*Font*/ font-family: Georgia, serif; font-size
背景画像をブラウザの枠いっぱいに表示するテクニックの考察
最近のトレンドの一つでもある背景画像をブラウザの枠いっぱいに表示する実装方法はたくさんあります。その中から、理にかなった最新のテクニックや、より多くのブラウザに対応させるテクニックを紹介します。 Perfect Full Page Background Image [ad#ad-2] 下記は各ポイントを意訳したものです。 各デモはページ下部のDownload Files」で、まとめてダウンロードできます。 背景画像をブラウザの枠いっぱいに表示するテクニックとは CSS3を使ったテクニック CSSだけで実装するテクニック：その1 CSSだけで実装するテクニック：その2 jQueryを使ったテクニック 背景画像をブラウザの枠いっぱいに表示するテクニックとは 前提として、下記のポイントが挙げられます。 画像でページをいっぱいにします。 空きは無いようにします。 画像のサイズは必要があれば調整しま
任意の部分の文字サイズをクリックで切り替えるjQueryプラグイン「fontScaler」実装 | イチニチ。
個人で運営しているブログだったら文字サイズなんて運営者の好みでいいと思うんですけど、幅広い年齢層をターゲットとしているポータルサイトやネットショップなんかには文字サイズを切り替える機能があった方がいいんじゃないかな～。 今回紹介する「fontScaler（フォント・スケーラー）」は、”コンテンツ部分のみ”など部分的に文字を拡大縮小したい人にぴったりのスクリプトです。 CSSの指定次第でいろいろと応用が利きそうだし、実装は割と簡単。 まずはjQueryを含めた一式ダウンロード。 fontScaler 解凍すると「jquery.fontScaler.v0.2」というフォルダが出来上がるので、「fontScaler」とでもフォルダ名を変更しておいて、それをサーバーに丸ごとアップロード。 fontScalerを使用したいページのヘッダに以下を記入。 <link rel="stylesheet" t
ホントに助かるフリーのcssジェネレーターいろいろ
使えるcssのオンラインサービスが 50個、Speckyboyで記事にされていた のでよさ気なものをいくつかご紹介します。 全部良さそうなので気になる方はぜひ 記事元を訪れてみてください。 日本語のテキストで作成できるｃｓｓメニュージェネレーターは本当に助かります。 Grid Designer 2 細かい設定を行えてすぐに反映されるグリッドシステム。 Grid Designer 2 nP: Grid Generator グリッドを作成すると、ｃｓｓのソースも出してくれます。 nP: Grid Generator Dynamic 4 Column Layout Generator これ面白い。4カラム専用のレイアウトジェネレーター。設定と同時に反映、 ｃｓｓもＤＬ（コピペ）出来ます。 Dynamic 4 Column Layout Generator XHTML/CSS Markup Gen
New ツイッター：背景をデザインする時のガイド サイドバー透明化も
Newツイッターの背景をデザインする時のサイズなどをガイド的にまとめてみました。サイドバーを透明にしたりして工夫すれば、ディスプレイサイズが小さい画面でも、メッセージを背景に掲載する事もできそうです。みなさんはNewツイッターの背景どうしてますか？先日、私のツイッターもやっとNewになりました。 嬉しい反面、ちょっと残念なことも…それは以前のツイッターに合わせて作った背景が全く見えなくなってしまった事。 新しいツイッターの画面は横幅が1,040px（小さいディスプレイ時は920pxの可変）もあって、1280pxのディスプレイでは背景がほとんど見えません… 過去記事：ツイッター入門：背景画像をデザインする時のルールが意外にアクセスが多いのですが、情報が古いのでNewツイッターの背景を作る時のガイドを考えてみました。 New ツイッターの画面 ツイッターの画面、背景の見え方はディスプレイの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
xml.vc
WordPressちょこっとTips:ギャラリーのCSSを変えるフック