ハンバーガーメニューは今やウェブでもモバイルでも広く使われています。しかし作り方次第で快適なナビゲーションメニューにもなれば、使いにくく邪魔な存在にもなってしまいます。 今回は美しいハンバーガーメニューの実装例をご紹介します。 1.Slideout.js　美しさと可愛さが入り混じる 美しいデザインとかわいらしいアニメーションを持つメニューです。タッチで起動することができ、ネイティブのスクロールを採用しているおかげで快適です。 2.Drawer　シンプルなのに効果的 CSS3を利用したjQueryプラグインで、シンプルながらも効果的なアニメーションを使っています。 3.Pure Drawer　多彩なアニメーションが魅力 スライドだけでなくズームなど多彩なアニメーションが利用できるドロワーです。 4.Shifter　ウェブでもでもアプリでも使える Shifterはアニメーションするハンバーガー

「CSSの指示が効かない。どうして?」 「CSSが効かなかった。修正に時間がかかりすぎる。」 正しいCSSの設定が効かないことがよくありますし、「効かない」ことをどうにかしようとして、更に設定が複雑になり、収集がつかなくなったことはありませんか？ この経験は初学者が必ず通る道です。ただ、この苦痛はできるだけ避けたいものです。そこで、この記事では知っておいて欲しい「優先順位」の考え方と「!important」の使い方をご紹介します。この知識があれば、CSSの書き方が変わりますし、問題が発生した時の解を自分で導き、必要以上に解決に時間がかることがなくなるはずです。 この記事は、CSSの初学者向けに書いていいます。経験者を想定した記事ではありません。 CSSが効かない状況 まず、どのような時にCSSの指示が効かなくなるかを知っておきましょう。CSSの記載ミスを除き、一般的には以下のパターンがあり

Sublime Text は現在もっとも人気のあるコードエディタのひとつです。そのスピードとシンプルさ、豊富なプラグインで多くのプログラマーに愛されています。最大限に Sublime Text を活用するために、今回は普段よく利用している拡張機能をまとめてご紹介します。 詳細は以下から。 Package Control まずはじめに Package Control をインストールしなければ始まりません。Sublime Text の拡張機能を管理するためのパッケージで、これなしで拡張機能のインストール、削除も大変な作業となってしまいます。今回紹介するプラグインをインストールする前に、まず最初に行いましょう。 詳しいインストール方法については、こちらのページを参考にどうぞ。 JavaScript & NodeJS Snippet より素早くJavaScriptを記述することができるスニペットの

皆さん、エディタは何を使っていますか？ 今回は海外でも日本でも大人気、一度使ったら恋に落ちるエディタ「Sublime Text」について紹介いたします。 Sublime Textは「見やすい」、「書きやすい」、「使いやすい」の三拍子揃った万能なエディタになります。 この記事を最後までお読みいただければ、インストールから便利な機能まで、簡単にマスターすることができるので、今使っているエディタに不満がある、使いやすいエディタを知りたい方は、ぜひ参考にしてください。 インストール Sublime TextはWindowsとMacの両方で使うことができますが、使うためには、インストールする必要があります。 現在（2017年10月15日）の最新バージョンは「Sublime Text 3」になり、ダウンロードするためには公式ホームページにアクセスしてダウンロードします。 http://www.subl

テキストエディタのSublimeText3ってとっても便利ですよね。特に「プラグイン（パッケージ）」で機能を自分好みにカスタマイズ出来る点が素晴らしいです。 ただ、いざSublimeText3のプラグインを使おうと思っても、プラグインが山ほどあってどれを選んで良いのかわからないですよね。さらにプラグインだけでなく、色々なWEBサービスやショートカットなどのテクニックも抑えると、よりSublimeText3を活用することができちゃうんです。 そこで今回は、様々な立場にあわせて作業がはかどるプラグインとテクニック、「計19種」をご紹介します！　ぜひどんどん活用して、快適なSublimeText3ライフをお送りください。SublimeText3の導入方法やプラグインの使い方がわからない方はこちらの記事もご覧ください。 まず絶対入れておくべきSublimeTextプラグイン11選 タグなどの開始/

ページ全般 ボックス テキスト リンク リスト イメージ テーブル フレーム フォーム フィルタ CSSの基本 CSSプロパティ一覧［ABC順］ リファレンスについて HTML リファレンス HTML Living Standardに対応したリファレンスです。 HTMLタグ リファレンス HTML4の時代に作成したリファレンスです。古いWebページを更新する際などに参考にしてください。 CSS リファレンス CSS2の時代に作成したリファレンスです。

class属性で、要素に対してクラス名（分類名）を付けることができます。 このクラス名は、主にスタイルシートのセレクタ（スタイルの適用対象）として使用されることになります。 スタイルシートに関する詳細は、CSSリファレンスをご覧ください。 <p class="example"> ～ </p> クラス名について クラス名を付ける際には、以下の点に注意してください。 大文字と小文字の区別があります。 クラス名をCSSのセレクタとして使用する場合は、上記以外にも以下の点に注意してください。 使用できる文字は、半角の英数字、ハイフン（ - ）、アンダーバー（ _ ）です。 アンダーバー（ _ ）をクラス名に含めると、一部の古いブラウザではクラス名が認識されなくなります。 アルファベットで始めなければなりません。（数字や記号で始めてはならない） ID名とクラス名のサンプル集 クラス名の指定方法 同じ

テーブルのセルは通常格子状に並んでいます。しかし同じ内容が入っているセルはまとめて結合すると、Excelで作った表のようになって見やすくなります。セルを縦に結合するにはrowspan属性を、横に結合するにはcolspan属性を指定します。ここではcolspan属性を説明します。 セルを横に結合するには テーブルは隣り合うセルを結合して、1つのセルにすることができます。セルを連結するとも言います。 横方向に隣り合うセルの内容が同じであれば、結合の一番左になるセルのtd要素またはth要素にcolspan属性を指定します。 たとえば、<td colspan=”2″>…</th>という形です。 結合するセルの数を指定する colspan属性では結合したいセルの数を数値で指定します。上の例では”2″になっていますが、任意の数のセルを結合することができます。ただし指定できるのは”2″以上の数字のみです

コードやテンプレートに縛られずに、 誰でも自由自在にデザイン可能。 作成したサイトは、1クリックで世界に公開。 そう、必要なのはSTUDIOだけです。

CSSで表現できる、ユニークなボタンデザインをまとめています。一部、jQueryなどプラグインが必要となりますが、CSSのコピー&ペーストで利用できるサンプルやテクニックを、WEB制作のためのコードコミュニティサイト、Codepenよりピックアップしてご紹介します。 コードを見ながらサンプルを確認することができるので、アニメーションを得意とした最先端のデザインテクニックを、今後のウェブデザイン制作に活かしてみてはいかがでしょう。 コピペで実現！思わず押したくなるCSSボタンエフェクトまとめ Button Hover Effect マウスをホバーすると、重なるようなぬるりとした動きを楽しむことができるナビゲーションメニュー。 See the Pen Button hover effect by Comehope (@comehope) on CodePen. rémi’s pop-up 立体

PHPプログラミングも快適に！ VS Codeの二大拡張機能：Visual Studio Code＋PHPの可能性を探る（1/3 ページ） VS CodeとPHPでWebアプリ開発はどこまで簡単になるのかを探る新連載。今回はVS Codeを利用したPHPによるアプリ開発に必須の拡張機能を2つ紹介する。 連載「Visual Studio Code＋PHPの可能性を探る」 本連載では、Visual Studio Code（以下、VS Code）を使ってPHPプログラミングする際の基本事項を紹介していく。ただし、PHPの構文や文法については取り上げない予定だ。これらについては、＠IT内の連載「Web業界で働くためのPHP入門」やPHP公式サイトの「PHP マニュアル」などを参考にしてほしい。また、VS CodeのGUI構成や、基本的な使い方については「Visual Studio Codeの使い方

SNS X Facebook Ｂ! はてブ Pocket 当記事の内容および記事中のリンクには、広告目的や当サイトが収益を得るためのものが含まれており、これらの収益によってuzurea.netは運営されています。 webサイトでトリガーとなるボタンなどをクリックするとウィンドウが浮かび上がる『モーダル ウィンドウ (Modal window)』機能。 年齢制限やシステムのアラート、用語解説、外部サイトの動画表示や画像読込など、さまざまなシーンに利用できるこのモーダルウィンドウですが、設定の簡単さとオプションの充実度、さらにお手軽に格好良いアニメーションが実装できる点からお勧めしたいのが今回解説するjQueryプラグイン『iziModal』※です。 ※おそらく『イージー・モーダル』と読むのだと思います。 今回はこの設置手順とサンプルを交えた使い方、そして各種オプションの詳細を動作デモを交えて

ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時（メニューが展開しているときなどのアクティブ時）のエフェクトをCSSで実装したサンプルをまとめました。 よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。

ヘッダでロゴを左寄せにしたり、検索窓を右寄せにしたり、画像をページの中央に配置したり、ページ上のあらゆる要素を揃え整列させるFlexboxをベースにしたスタイルシートのスニペットを紹介します。 サイトやブログの全体で利用できるユーティリティのclassとして、保存しておくと便利なスニペット集です。 Speed up alignment in CSS with Flexbox utility classes by CodyHouse 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSで面倒なのは要素を整列させること Flexbox以前 Flexboxで簡単に CSSで面倒なのは要素を整列させること CSSで面倒なのは、要素を整列させることでした。しかし、Flexboxが登場して、理にかなった方法で整列させることが可能になりまし

2019年2月3日 CSS 要素の四隅の角を丸めるためのCSSプロパティー「border-radius」。ボックスや画像などの要素に対して適応でき、角丸にしたりまん丸にしたりと、様々な表現が可能です。このプロパティーが使えるようになってから、どれだけコーディングが楽になったか…！今回はそんなborder-radiusの基本的な使い方と、応用表現を紹介します！ ↑私が10年以上利用している会計ソフト！ 無難で王道！正円の円弧を使った角丸 border-radius は「border」とついているものの、border プロパティーの指定がなくても大丈夫。background によって与えられた背景や、img 要素で指定された画像の四隅も丸まめられます。 四隅に同じ値の丸みを与えるなら border-radius: 10px; と記述すればOK。半径10pxの正円の円弧をベースにした角丸を実装で

CSSで三角形を作るといえばborderを利用したものが有名だけどサイズの計算とか扱いとかがちょっとめんどいので普通のdivとかの背景を三角形にしたくなった。した。 普通にwidth/heightを設定するだけでかってに伸縮してくれるのがいいところで、底辺が100%の三角形とか、width:autoのような挙動をする三角形を手軽に作れる。 .bottom{ background: linear-gradient(to top right, rgba(255,255,255,0) 50%, #f00 50.5%) no-repeat top left/50% 100%, linear-gradient(to top left, rgba(255,255,255,0) 50%, #f00 50.5%) no-repeat top right/50% 100%; } .top{ backgrou

Posted by NAGAYA on Sep 7th, 2017 こんにちは。めぐたんです。 今回からCSSのborderプロパティだけで作る三角形について、全2回に渡ってお届けします。 「borderプロパティだけ」、つまりブラウザの種類やバージョンに依存しないのでもしかすると前々から使われていた手法なのかもしれませんが、CSS3の登場以降CSSだけで色々な表現に挑戦する方も増えたのではないでしょうか？私も最近使う機会がよくあると感じるのでまとめてみました。 .triangle{ border-right: 50px solid transparent; border-bottom: 86.6025px solid #b2ce54; border-left: 50px solid transparent; } なぜこのように「borderだけで三角形ができるのか」を理解するには、bor