<link rel="stylesheet" href="jquery.mmenu.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="jquery.mmenu.min.js"></script> htmlの記述 メニューとして表示させたい部分を任意のidを付与して囲います。ここでは　id=”menu”　の部分です。 htmlの記述のポイントは、メニューを表示させるためのボタンと、メニューが同じ親要素（ここでは#wrap）で囲われているかです。 また、その親要素の外に要素があると、メニューを表示した時に下の方に見切れたりする場合があるので、フッターなども含めて囲う要素がありそうです。 <div id="wrap"> <hea

WordPressのテーマによっては最初から蛍光ペン風のマーカーが付いていることがあります。 その場合は設定する必要はありません。 設定されていない方向けに書いています。 蛍光ペンマーカーを設定（CSS） まずはCSSの設定からスタート。 蛍光ペンマーカーのCSSは「linear-gradient()属性」を使います。 linear-gradient(transparent 線の太さ, 線の色 0%) このlinear-gradient属性、グラデーションを使って設定します。 （）内の線の太さと線の色を好みの色と太さに変更するだけでOK。 線の太さと線の色の意味は下の通りになります。 線の太さ 黄色の蛍光ペン(太) .marker_yellow_futo { background: linear-gradient(transparent 0%, #ffff66 0%); } 黄色の蛍光ペン

作成：2014/06/2 更新：2014/11/01 Web制作 > WebデザインギャラリーやWPテーマなどで「見栄えのする」サイトが使っている効果など。今回はCSSのみで実現できる、動きあるエフェクトをメモしておきます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マスク １．マスク・キャプション ２．円形キャプション ３．全画面+オーバーレイ ４．ストライプの背景 フルスクリーン系 ５．スライド＋フルスクリーン ６．全画面背景動画 ７．パララックス ８．フルスクリーンにフィット ９．背景画像をブラウザごとに最適化 １０．メガメニュー 画像可変 １１．画像で枠線を表現する １２．半透明＋フィルタ １３．文字以外を透明にしてレイヤーさせる 図形 １４．ループ＋ローディング １５．3Dボックス １６．矢印ナビ 画像切り抜き １７．六角形 １８．卵型＋星形

投稿日：2015年5月17日 更新日：2021年12月22日 CSS, Design 3135文字：約6分 ONZE 株式会社 オンズ ONZE https://on-ze.com/archives/189 今日は「リセット用スタイルシート」について、その概要と私たちの見解、またウェブサイト制作の現場で実際に利用しているオンズ独自のスタイルシート［ONZE Reset CSS］を紹介していきます。 「スタイルシート・リセット」とは？各ブラウザにはデフォルトのCSSが設定されていますが、このスタイルはブラウザによって大きく異なるため、注意深くコーディングをしていかないと後々に各ブラウザ毎の表示の違いに悩むことになり、作業が滞る原因になります。 「各ブラウザ毎の表示の違い」は無視できない重要な問題です。 HTMLとCSSでウェブサイトのデザインを構築していくとき、この相違点を考慮せずに作業がで

サイトデザインをする上で、デザインがワンパターンになったり、煮詰まったりすると思います。そんな時、Instagram を使わない手はありません世界中のインスピレーション溢れるアート系の発信やデザイン系のイメージがたくさん参照できます本記事ではデザインのヒントになること間違いなしの海外のアートデザイン系の Instagram アカウントをご紹介します。

Paste and Indent JavaScript & CSS CDN Suggestions scriptタグやstyleタグを書くと、CDNが使えるJSファイルやCSSファイルの名前を提案してくれ、選んでいくだけでCDN呼び出しタグを書くことができます。これがあると、ネットで探し回る必要ないかも。 Brackets Extension: CDN Suggestions CDN Finder jsDelivrで公開されているCDNを検索し、URLを手軽に取得することができます。 CDN Finder Autoprefixer 名前の通り、ファイルの保存時に自動でプレフィックスを付与する拡張です。 Can I Useの情報から判断して、不要なものは取りのぞいてもくれます。 機能を有効にするには、「編集」メニューから「Auto prefix on save」にチェックをしておく必要があり

コードエディターにはHTML・CSSを効率良く編集する方法でも書いたように、コードの自動補完などの機能が備わっています。これらの機能を使うことで効率良くコードを記述することができるのですが、ここではさらに効率アップできるEmmetを使ってみます。 Emmetを使うとHTMLタグを記述する際に必要な< >などを省略したり、長いHTMK構造をたった数行で書くことができるようになります。慣れるとこれ以外で書くのがめんどくさくなるというデメリットがありますが、とにかく効率良く記述できるのでまだ使ってない人は是非使ってみて下さい。 EmmetにはHTMLとCSSがありますが、ここではHTMLの記述方法を紹介します。 CSS編はこちら -> CSSを効率良く書く！Emmetの書き方・使い方まとめ Emmetのインストール方法 コードエディターにEmmetをインストールする Emmetはコードエディター

こんにちは！YOUKNOWです。 コーディング用フォントは何がいいのかいろいろ試していた所、社内のプログラマさんが良さそうなフォントを共有していたのでご紹介します。 良い情報を先輩方が流してくれるので、情報収集する手間が省けてとても助かってます。 Source Han Code JP（日本語メニューネーム：源ノ角ゴシック Code JP）は、adobeに勤められている服部正貴さんが、個人的に始めたオープンソースプロジェクトフォントです。 日本語も使えてコーディングに適したフォントはないか？という友人の問いかけから、「これはもう作ってしまえ」と考え作られたそうです。 ありがたいことにこのフォントは無償で利用することが出来ます。 Source Han Code JP の使い方まずはこちらからフォントをダウンロードします。 ダウンロードされたsource-han-code-jp-1.002R.z

色の意味が一緒に分かる色相環 色には色ごとにさまざまな意味がありるので、それぞれの色の意味を色相環に重ねてみました。 赤の反対が青緑のように一般的な色相環とは少しずれていますので、そこだけ少し注意して活用していただけるとうれしく思います。 色の印象が一緒に分かるトーンの表 鮮やかな色の相環を、PCCS風のトーンの表にして意味を重ねてみました。 （PCCS：日本色研配色体系 Practical Color Co-ordinate System・トーン：明度と彩度が合わさったもの） 上の色相環の意味とあわせて、色選びの参考や意味づけに深みを持たせるのに活用していただけるとうれしく思います。

シリーズっぽくやってたSassを覚えようですが、今回は今までご紹介したSassに関する知識が有れば、直ぐにでも使えそうな一式をご用意しました。 まぁ、HTMLとかは過去の新規でサイトを作るのに使えそうなの一式。とそんなに変わってないので、SCSSファイルだけ有れば良いと思いますがHTMLとかあった方が確認もそのまま出来るので良いかなーと。 【Sass】新規でサイトを作るのに使えそうなの一式。Ver 1をDL（zip：約50kb） 実際のページを見る ページを見ても、あんまり意味が無いっすね。えぇ。 いつもの新規セットに比べると、ボク自身がSassはまだ全然使いこなせて無いですし、開発中と言うかベータな感じが否めないので、コレをベースにSassを色々試したりするのに良いかなと思います。 なので、一つの参考までにって感じでしょうか。 んでは、続きにて中身の説明なんぞをしていきます。 中身のご説

前回の「破綻しにくいCSS設計の法則 15」は思いがけず大変なご好評をいただきました。ただ書いた当人としては、まとまりに欠けていたように思えましたので、今回はもう少し本質的なところを書いてみたいと思います。 CSSとは実際のところ何か CSSが破綻する理由 破綻しないCSS設計とは 1. CSSとは実際のところ何か CSSはJSONと同様にシンプルなフォーマットで、基本的には以下のような構造になっています。