タグ

ブックマーク / lab.sonicmoov.com (3)

  • 初心者でもすぐできるスマホ対応jQueryアコーディオンメニューの作り方 | SONICMOOV LAB

    また会いましたな! スイカバー(ふつうのやつ)をこよなく愛するマークアップエンジニアのまりぞーですヽ(°ω°)ノ 先日、ついにWii UとSplatoonをゲットしました。 そろそろガチバトルでわちゃわちゃするお年頃かもしれません…ガンバルゾー!ガンバルゾー! 今回はjQueryを利用したアコーディオンメニューの作り方をご紹介します。 前回の【初心者向け】レスポンシブなtableを作ってみる同様、初心者向けです。 また、 来年2016年1月12日からIE8がサポート対象外となるので、対応ブラウザはIE9以降とモダンブラウザ系とします。 デモでは割りとシンプルな構造なので、スマホなどたいていの端末で閲覧できると思います。 よろしくお願いします。 PCのときは横並びのレイアウトで、モバイル端末など画面が小さい場合はぬるりと動くハンバーガーに格納されるjQueryでレスポンシブなメニューを作って

    初心者でもすぐできるスマホ対応jQueryアコーディオンメニューの作り方 | SONICMOOV LAB
  • 【初心者向けCSS】レスポンシブな tableを作ってみる | SONICMOOV LAB

    お待たせしました!まりぞーですヽ(゜ω゜)ノ 今回は CSS 初心者向けです。 table タグがあるじゃないですか。 アレをレスポンシブな感じに実装していこうという内容です。 デモはこちら 使ったものは CSSHTML とjQuery、そしてコピペです。 よろしくお願いします。 目次 そもそもレスポンシブってなんだっけ Media Queriesの使いかた HTML CSS IE8対応 共通項目 Media Queries まとめ そもそもレスポンシブってなんだっけ responsive 「よく反応する」という意味の形容詞です。 当記事ではブラウザのウィンドウ幅をぐにょんぐにょんいじるとなんか臨機応変に見た目が変わったり変わらなかったりするやつです。 基的に CSS3 の Media Queries を用いる方法で進めていきます。 Media Queriesの使いかた HTML

    【初心者向けCSS】レスポンシブな tableを作ってみる | SONICMOOV LAB
  • 見ないとトレンドに乗り遅れるWebデザイン&スマホデザインまとめサイト33選 | SONICMOOV LAB

    皆様、お疲れ様です。 ソリューション事業部デザイナーのジャッキーです。 最近はラジオを聞きながら業務に取り組んでおります。 時折、笑いがこらえられずニヤニヤしている様は、傍から見れば恐怖を感じることでしょう。 夏なので許されますk…ヽ(#゚Д゚)ノ┌┛)`Д゚)かゆ・;’うま 皆様は参考にしたいデザインを探す時やトレンドを知りたい時にどんなサイトを見ていますか? 今回は私が定期的にチェックしているまとめサイト(リンク集)をWebデザイン・スマホサイトデザイン・ロゴデザインを中心に、私の主観で「掲載物のクオリティの高さ」はもちろん「見やすく、使いやすい」と感じたものを厳選してご紹介したいと思います。 では早速参ります。 Webデザインまとめサイト S5-Style 国内・海外問わず、様々なジャンルのデザインを取り扱っています。 最新の掲載サイトは大きいサムネイルで表示されます。 検索のフィル

    見ないとトレンドに乗り遅れるWebデザイン&スマホデザインまとめサイト33選 | SONICMOOV LAB
  • 1