CSSだけでスマホでも使えそうなスライドインするメニューを考えてみた
一週間ほど鼻水が止まらず、咳までで出したごろどくです、どうも。北海道ではまだ花粉の時期ではないので花粉症ではないのですが、ここ数年毎年この時期には同じような症状で体調崩してる気がします。年度末の気の緩みでしょうか。 さて今回はコチラのページを制作するときに色々覚えたCSS小ネタの備忘録です。新しいことを覚えるのはやっぱり楽しいですね。 作りたいもの スライドインメニューサンプルその3 いきなり「その3」ですみません。別に順番間違えてるわけではないです。 スマホアプリなどで採用されているのでWebでも良く見かけるようになった「横からにゅるっと出てくるメニュー」です。ハンバーガーメニューとかドロワーメニューとかスライドインメニューとかいろいろ呼称があるようです。どれが正しいのかはよくわかりません。 こういうのをjqueryのみならずjavascriptなしで実装してみたいと思います。 ちなみに
Notepad++とEmmetでサクサクコーディング
以前の記事で紹介したNotepad++、大変便利で私もブログライティングやコーディングのデフォルトエディタとしてありがたく使わせてもらってます。 最新のNotepad++ではデフォルトプラグインでEmmetが入っているらしく（もちろん旧バージョンにあとから入れることもできます）、これはちょっと便利だなぁ、と感じましたのでEmmetの基本あたりを備忘録兼ねて紹介しておきます。 Emmetってなにさ？ Webコーディングに携わってる方はご存知の方が多いかもしれない、Zen-Coding。独自の記法でHTMLやCSSを記述し、それを展開することでコーディングが楽チンになるというものです。 EmmetというのはそのZen-Codingの次期バージョンです。 Zen-Codingの次期バージョン、Emmet について Sergey Chikuyonok氏のGithubを見に行ったら、”Emmet (
セマンティックなHTMLを書くべき理由
タイトルは釣りです。 「書く目的」ならそりゃそんなの各自好きにやってよっていうか書きたくなきゃ書かなきゃ良いよって思いますよ。ただ「目的」というのが書く「べき理由」を意味しているのならばさ。 インターネッツ！インターネッツ！HTMLとは「HyperText Markup Language」の略です。 「HyperText Markup Language」はドキュメントを記述するための言語です。 ドキュメントとは文書です。 マークアップとは文章の構造に意味づけをすることです。 HTMLではタグをもって文書に意味付けがなされます。 HTMLは文書を書くための言語フォーマットでありそこに個人の裁量によらない記述のためのルールがあるというだけのことなのです。 ルールがあるからそれに従う「べき」というただそれだけ。 正しいHTMLを書く目的はただ一つ – ネコメシCEOブログ それでは、なぜ正しいH
CSSでディスクを回転浮上させるエフェクトのサンプル
CSS演出小ネタ連投です。 【borde-radius】で作った丸型の要素に対し、マウスオーバーでコンテンツを回転させながら浮かび上がらせる方法です。 transformで拡大と回転言葉で説明するのはとっても難しい（けどやってることは全然難しくない）のでさっそくサンプルをご覧下さい。 HTML <p> <span>Shop</span> <a href="#">More info</a> </p> 【p】のなかに【span】と【a】が並んで内包されています。通常時は【span】のみ表示させておいてhoverで【a】を浮き上がらせてこよう、という構想。 p,span,a{ display:block; position:absolute; width:100px; height:100px; border-radius:50%; font-size:16px; text-align:cent
CSSのtransformでクルクル回転するパネルのサンプル
CSSの【transform:rotate()】を使った回転するパネルのサンプルを作ってみました。 手法としては比較的知ってる人も多いかもしれませんが自分用備忘録として。 回転変形おもしろーいベースとなるHTMLはこちら。 <p><a href="#">Sample Box 1</a></p> はい、1行ソースです、すみません。単純に【p】の中に【a】を内包しているだけ。これに p{ display:block; margin:10px; width:100px; height:100px; } a{ display:block; line-height:100px; text-decoration:none; text-align:center; color:#fff; border-radius:6px; background-color:#44f; transition:0.3s l
ブラウザをテキストエディタっぽく使うサンプルを作ってみたら意外に単純にできますた
なんだかidea*ideaさんの たった一行でブラウザをシンプルなメモ帳に変える方法 という記事が話題になってまして、ブラウザをメモ帳代わりにするっていうお話なんですが…いろいろ調べてるうちにブラウザ上で動作するエディタができちゃいました。 contenteditableとは件の記事ではWebブラウザのURL欄に data:text/html, <html contenteditable> というのを入力して開くと、ブラウザ自体がメモ帳のようにテキスト入力できるようになるよ！というネタでして、確かにテキスト入力すると書き込めるようにはなってるんですが残念ながら保存はできません。 ブラウザの【保存】でもhtmlとしてしか保存できないしなんだかテキストは実態参照になって（chromeで保存した場合）たり…といった感じなのです。 そもそもこのコードの【contenteditable】っての自体よ
2012年ブログライティング・アクセスアップ系記事まとめ
12月と半ば言うことで様々なブログで年間総括や1年のまとめ記事がぼちぼち公開される時期ですね。 私自身「ブログの書き方」について悩みつつ勉強しては躓きの繰り返しなのですが、その中でもこれはと思ったことはブログ技術カテゴリに備忘録を残しております。 手前味噌で恐縮ですが世のブロガーさんのお役に立てればなにより…ということで筆者選のブログライティング・アクセスアップ系記事のまとめを月を追ってやってみたいとおもいます。 1月ブログの書き方を工夫して読者とグーグル先生に気持ちを伝える基本的な3つの施策内部SEOというほど難しい話じゃなくて極々基本的なHTMLタグの記述法の紹介。最低限これくらいの文書構造を考えておけばGoogle先生もきちんと記事の意図を読み取ってくれるでしょう、というお話。テキストのみ書く人やブログシステムのWISIWIGエディタにお任せで文に装飾入れてる人は一度読んでいただける
CSSのみ画像不要のドット柄背景の作り方を若干丁寧に説明してみる
ドット柄を見ると職業柄ついパンチングメタル（等ピッチ穴明きの鉄板）を思い出すゴロドクさんです、どうも。 「CSSのみ画像不要のストライプ柄背景～」という記事に引き続き、CSSのみの背景パターンの作り方の解説です。今回はドット柄に挑戦です。 背景イメージに円形グラデーションを上適用してみる ベースとなるHTMLは前回同様1行のみです。単純なボックスの適用に対して考えてみます。 <div class="dot"></div> クラス名は自分で分かりやすいように適当につけておいてください。今回は単純にドット柄なので dot としておきますね。 基本CSSは以下の通りとします。 .dot{ display:block; width:300px; height:300px; background-color:#ff0040; } 【ブラウズ結果】 サンプルページ 300px×300pxのボックスに単
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
