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ブログ それでは、なぜ正しい
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
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ページを開く
