JSを使わずにアニメーションしながら展開するドロワーメニュー(スライドメニュー)の実装方法 | UNORTHODOX WORKBOOK | Blog
Javascriptを使わずに、HTMLとCSSだけでアニメーションしながら展開するドロワーメニュー(スライドメニュー)を実装する方法です。 クリックでドロワーメニューを展開させる場合、jQuery等でちょっとしたプログラムを組むのが一般的だと思いますが、以下の方法では、スクリプトを一切使わずにドロワーメニューを出したり隠したりしています。 タイトルで「アニメーションしながら」とありますけど、これについてはおまけみたいなもので、あくまでも「ドロワーが出現するきっかけをCSSでやる」がメインになります。なので、アニメーションについてはあまり触れていませんがご了承ください。一応、アニメーションも全てCSSだけでやっていまして、こちらのエントリーで紹介しているものを使用しています。 JSを利用しないドロワーメニュー まずは以下のデモをご覧ください。 JSを使用しないドロワーメニューのデモ デモ右
Android標準ブラウザで表示がヘンなら原因は「background-attachment」かも ｜ SEOモード
Android標準ブラウザで背景画像がコンテンツの上に乗っているように見える症状に遭遇したら、「background-attachment」が「fixed」になっていないか調べてみてはいかがでしょうか、という記事です。 もしかして有名なバグかなとも思ったのですが、個人的にはまったのでメモです。 先日、随分前に作られたウェブサイト（スマホ対応など何もしていない普通のPCサイト）をAndroid「4.2.2」と「4.1.2」の標準ブラウザで閲覧したときに、画面が真っ白になってしまうという報告を聞いて、調査しました。 真っ白というより、ちょうど背景画像上のコンテンツが透明になってしまっているような感じで、手探りで（！）操作してみると、リンクなどはタップできるということでした。 そのため、最初、文字コードだったり（該当サイトは「Shift_JIS」のサイトでした）、フォントだったりが問題なのだろう
CSSでフルスクリーン(全画面) ＋ 縦横中央配置レイアウトを作る【3ステップ + おまけ】
シングルページのWebサイトを作るとき、要素をフルスクリーンで表示させるレイアウトを取り入れることもあるかと思います。フルスクリーンレイアウトを実装する際に、ウィンドウの幅や高さをJavaScriptを使って取得したりしていましたが、CSSを使うとそんなことをする必要もなく、いとも簡単に実装できることが最近わかったので紹介します。ついでにフルスクリーンレイアウト時に使いたい「縦横中央配置」、「背景画像のフルスクリーン表示」の実装方法についても紹介します。 フルスクリーンレイアウトのデモ http://codepen.io/maechabin/full/MmOGWb/HTMLの用意ベースとなるHTMLは以下の通りとします。「2つのp要素を含んだ、3つのdiv要素」を用意します。それぞれのdiv要素をフルスクリーンサイズにして縦横中央配置にするのが目的となります。 <div class="bo
ひたすらハンバーガーアイコンを作ったので9種のソースを公開します！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ハンバーガアイコンアニメーションの実装 HTMLは今回spanを3つで構成しました。 これで色々ご紹介していこうと思います( ˇωˇ)☝ <div class="icon-animation type-1"> <span class="top"></span> <span class="middle"></span> <span class="bottom"></span> </div> お次にアニメーションの実装をご紹介します。 CSSは全てSassの構造で書いております( ˇωˇ ) 1. よくみかける動き 動き出す前の傾きとバーの位置をtransformで調整をします。 こちら、以前ご紹介した「スマホに特化したアコーディオンメニューを作ってみた」のアイコンも同じような実装をしております( ˇωˇ)☝ 押す前 .type-1 { span { transition: all 0.3s;
CSSのみで背景を全体的に斜めにして傾斜をつける方法 | UNORTHODOX WORKBOOK | Blog
最近よく見かけるやつなんですけど、ちょうど今作っているサイトで使ってみたくて、色々やってみた結果なかなか良かったのでブログに残しておきます。 斜めのストライプとかじゃなくて、ブロックごと全体的に斜めにして背景を傾かせる方法です。プラグインは使わずに、CSSのみで実装してます。 デモ つまりはこんな感じのやつです↓ DEMO PAGE 大胆に背景全体を傾斜させているので、単調なフラットデザインに、ちょっとしたスパイスを加えることができますね。 実装方法 色々とやり方はあるかと思いますが、ここではCSSのbefore擬似要素とtransform:rotateを使って表現しています。 HTML <section class="contents"> <div class="contents_inner"> <!-- ここはコンテンツ --> </div> </section> ※HTMLは該当部分
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Type!