元ネタ Easing Function http://easings.net/ja イージングアニメーションの種類がたくさんライブラリ化されていて、JSで使用できる。 Compass Ceaser プラグインを入れればSCSS上で ceaser($easing名) として呼び出すことが可能。 SCSS変数にした Ceaserプラグインを入れなくてもSCSS上で呼び出せるようにしたいと思って、 SCSSの変数として移植させていただいたのが下記。元ネタ のeasing名とcubic-bezier値をまま移植しています。 /* * Easing function * Original：http://easings.net/ */ $easeInSine: cubic-bezier(0.47, 0, 0.745, 0.715); $easeOutSine: cubic-bezier(0.39, 0

先日このブログのデザインをリニューアルしたときに、メディアクエリの記述が結構手間だったので、記述のしやすさ、メンテナンス性の良さ、また、最終的なCSSファイルの最適化の3つの観点から、便利な書き方と最適化の方法をまとめてみました。 目次 モバイル・ファーストCSSで書く 要素ごとに、Sassを使って記述する Gulpを使ってメディアクエリの整理する まとめ モバイル・ファーストCSSで書く メンテナンス性の良さや重複の少ないよりシンプルなCSSの記述を目指すと、モバイル・ファーストCSSで書くのが良いです。デスクトップ・ファーストCSSで書く場合、小さい画面向けにはスタイルを追加するというより、消していく（または、上書きして帳消しにする）作業が多くなってしまいます。 このブログはモバイルからのアクセスが1割程度なので、今回のデザインのリニューアルでは、

久しぶりにWordpressを触っています。忘れている事だらけで大変です！ さて、Wordpressの検索ですが昔は投稿のみが対象だったと記憶していますが 新しくなって固定ページも検索結果に含まれるようになったっぽいです。 固定ページを検索結果から除外したい で、固定ページは検索結果から外したいと思いググると 下記のようなpre_get_postsでqueryを書き換えるやり方が多く出てきました。 <?php /* functions.php */ function SearchFilter($query) { if ($query->is_search) { $query->set('post_type', 'post'); } return $query; } add_filter('pre_get_posts','SearchFilter'); しかし、上記の方法だと、 どのキーワー

workerでもなくwokerでもなくwockerです。 wockerでWP開発が劇的に楽になるという話を聞いて使ってみました。すっごいいい子です。 http://wckr.github.io/にあるような感じで導入は凄くシンプル $ vagrant plugin install vagrant-hostsupdater $ git clone https://github.com/wckr/wocker.git && cd wocker $ vagrant up http://wocker.devでサイトが確認可能。 http://wocker.dev/wp-admin/で管理画面が確認可能。 (ログインパスワードは admin/admin) 概要 wockerは複数のwordpressをコンテナと呼ばれるまとまりで扱い、 複数のWordpress環境を瞬時に切り替えたりできるシステム。

2017年4月11日、Windows Vistaのサポートが終了しました。 これによりIE9のサポートは必要なくなり、今まで躊躇していたHTMLやCSSを利用できるようになりました。 Flexboxでコンポーネントはどう実装するのだろう、バグの対応方法はどうするなど、これから困った時にどんどん利用していきたい、HTMLやCSSのリソースを紹介します。

EditorConfigでエディタの設定を統一する EditorConfigとは様々なエディタの設定を統一するための設定ファイルです。 EditorConfigとは？ たとえば複数人で実装を行うプロジェクトで、実装者がそれぞれの実装箇所でインデントを1タブだったり2スペースだったり4スペースだったりと自分勝手なインデントルールで行なっているとマージの際に様々なインデントルールがミックスされたファイルが出来上がってしまいます。 多くのプロジェクトではそれらを防ぐためコーディングルールなどの共通ルールを設けてコードの品質を均一化しようとしているのではないかと思います。 とはいえ、このコーディングルールというものだけでは守っているつもりだけど抜けてしまう箇所などがでてきてしまったりと実装者に依存してきます。 EditorConfigはプロジェクト共通の設定ファイルを用意しておくと、様々なエディタ

Stay organized with collections Save and categorize content based on your preferences. The Google Hosted Libraries is a stable, reliable, high-speed, globally available content distribution network for the most popular, open-source JavaScript libraries. Google works directly with the key stakeholders for each library effort and accepts the latest versions as they are released. Libraries To load a

モバイル中心の動きが高まっている中、ホームページのレスポンシブ化はもはや避けて通れないものとなっています。 今回は、無料で使用できる商用可能なレスポンシブデザインのテンプレートサイト12選をご紹介します。 テンプレートサイトは英語表記のものが多いですが、今回紹介するサイトはどれも日本語で書かれているものばかりですので、使いたいテンプレートがあればすぐに使用することができます。 なお、ご利用の際は必ず利用規約を一読するようにしてください。 このニュースを読んだあなたにオススメ CSSの基本～スタイルシートとは レスポンシブデザインのメリット・デメリットを解説 ノンデザイナーでも分かりやすい！Webサイトを作成する際に知っておきたい主なレイアウト6選を解説 無料で利用できるHTML・WordPressのレスポンシブ対応テンプレートサイト12選 1.無料ホームページテンプレート.com http

実装方法を教えてもらったので、復習も兼ねた備忘録です。 WordPressで記事を表示する際に、特定の件数時にclassを付けたり表示する内容を変更させる方法です。 やろうと思えばスタイルの調整とかclass付ける程度であればCSSやjQueryで疑似classを使って実装することも可能ですが、中身をガラッと変えるときや特定の件数後に何かを表示させたいというときなどに非常に便利です。 最初とそれ以外とでclassを変更する たまに実装しているブログを見かけることもある、記事一覧などで最初の記事だけ背景色や文字サイズを変更するといったことをやりたいときに便利な方法です。 実装にはまずfunctions.phpへ下記のように記述します。

figure要素には何を入れられるのか figure要素には何を入れられるか、どう使うべきなのかが疑問になったので考えてみました。 発端：リストにタイトルをつけたい このfigure要素について考えるきっかけになったのは、ブログ内で「タイトルの付いたリスト」を作りたいと思った時です。 別に見出し要素の直後にリストを置けば読み手にはそれについてのリストだと認識されるんでしょうけど…場合によってはなんかしっくりきません。 だって画像はfigureで囲めばfigcaptionで、inputにはlabelで、tableにはcaptionでマークアップ的にしっかり関連づいたキャプションがつけられるのに、リストや定義リスト、あとコードにキャプションがつけられないのは変ですよ、変だよなー。と思ってたわけです。 figure要素の説明を読んだ HTML5.JPを読みに行きましょう。すると figure 要

Posted: 2012.03.08 / Category: javascript / Tag: jQuery, アニメーション 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-

ブラウザごとに異なるHTMLの各要素のスタイルの相違を吸収し、各要素のデフォルトのスタイルが定義されたCSSリセット用のスタイルシートを紹介します。 normalize.cssを最近のWeb制作にあうようカスタマイズされたもので、対応ブラウザはすべてのモダンブラウザ、IEは8+対応です。 ress -GitHub 参考: normalize.cssの特徴とコード 2015年、Web制作者が押さえておきたいCSSの各種リセット ressの特徴 ress: html, グローバルセレクタの定義 ress: 一般的な要素の定義 ress: フォーム要素の定義 ress: メディア要素の定義 ress: アクセシビリティ用の定義 ress: ::selectionの定義 ressの特徴 ressは「normalize.css」をカスタマイズしたもので、スタイルシートを始める時のしっかりしたベースな

HTML、CSSを短い文字数で打てるプラグインEmmetを使いこなせば、コーディングの時間は大きく短縮されます。昨今のEmmetでは、HTML 5.1のレスポンシブイメージ(※)を効率的に記述できることをご存知でしょうか？ 本エントリーではEmmetでレスポンシブイメージのコードを効率的に記述する方法を紹介します。 ※ 参考記事「レスポンシブイメージで画像の表示を最適化 〜CSSもJSもいらないHTML 5.1の新機能 - ICS MEDIA」 srcset の記述 レスポンシブイメージでは、デバイス環境に応じた最適なファイルサイズの画像を表示するためにimg要素のsrcset属性を用います。Emmetでは次のように記述します。

【スタイル】は東京都渋谷区でホームページ制作を行うウェブ制作会社です。ウェブサイト制作、SEO対策、ウェブマーケティングなどを承っています。良質テンプレートでの格安ホームページ制作プランもあります。

CSSプロパティの1つである display は、CSSレイアウトに用いるプロパティの中でも極めて重要なものです。よく使われているのは、 block や inline 、 none あたりでしょう。 table や inline-block も、今ではかなり一般的になってきたと言えます。一方、 flex は新たに登場したものです。きっとユーザに気に入られるでしょう。これはレイアウト用に特別に作られたdisplayプロパティです。さらには、この先、 grid がまもなく私たちの秘密兵器となるでしょう（現在、盛んに取り組まれています）。これもまた、レイアウトに特化したプロパティです。 本記事は、当初予定していたよりもずっと長くなりました。ご希望に応じて、自由にサブセクションに飛んでお読みいただければと思います。もし、お時間を割いて全体を読んでいただけるのでしたら、大変嬉しく思います???? 目

実は、WordPressにInstagramを表示するのって非常に簡単なんです。 プラグインや専用のサービスを使えば、サイト上にInstagramの画像を様々なデザインで表示することができます。当記事では、Instagramをサイト上に表示させる最も代表的な方法を3つ紹介していきます。 WordPressとInstagramを連携する方法だけを重視される方は下記のボタンを押して、該当の記事をご覧ください。 連携方法を見る WordPressでInstagramを表示する方法は3つ 一般的にWordPressのサイト上にInstgaramを表示する方法は下記の3つになります。これらは全てコーディング不要で実現できますので、目的のレイアウトに近いものをお選びいただき、導入の参考にしてください。

Smash Balloon Social Photo Feed（旧名称：Instagram Feed）は、インスタグラムに投稿した写真・動画を表示できるWordPressプラグインです。 ショートコードを利用してブログの記事・サイドバーなどに表示することもできます。 インスタグラムに写真・動画を投稿しているインスタグラマー向けのプラグインです。 ブログにインスタグラムに投稿している写真・動画を掲載したい場合に利用します。 インスタグラマーの方は、WordPressで運用するブログにもその写真ギャラリーを表示しましょう。 そうすることでインスタグラムのアカウントの存在をブログ読者にアピールできます。 便利なプラグインなので活用しましょう。 はじめに このプラグインが優れていること インスタグラム（Instagram）の写真・動画をブログの記事・サイドバーに表示できる。 プラグインの設定で「カ

※2014年3月12日更新 「Google マップ」は2月にバージョンアップされています。 操作性が大きく変わっていますので、説明を加えました。 なお、「Google Maps JavaScript API v3」を使用している部分には変更ありません。 このまま使用できます。 ※2014年3月26日更新 bodyのjavascriptの関数を読み込む記述が消えてしまっていましたので、修正しました。 申し訳ございません・・・。 ※2016年8月31日更新 2016年6月22日に「Google マップ」のAPIが変更され、APIキーが必須になりました。 なお、APIを使用せずに埋め込む場合はAPIキーは引き続き必要ありません。 どうも、くーへいです。 最近ではない方が珍しいと思うくらい、「Google マップ」を埋め込んだホームページは多いですよね。 制作会社にいる皆さんは、「サクッ」っと埋め