ブログBLOG

ポップアップ表示のYouTubeでも関連動画を操作したい【Magnific Popup】

YouTubeの動画をサイト内に埋め込むとき、関連動画を非表示にしたり、同じチャンネルの動画のみを表示させたりしたいといった要望が出てくることも多いですよね。 プラグインを使用してポップアップで表示している場合、そういった関連動画の操作が意外に難しいことがあります。 本記事では、Magnifi ...

360度画像をサイトに埋め込む方法6選！【360度ビューワー・手順・デモ付き】

最近色々なサイトでよく見かける360度画像。 臨場感がありその場にいるような感覚になれるので、是非サイトで取り入れたいと考えている企業も多いのではないでしょうか？ ▼サンプル（こちらは【方法6】Pannellumを使用しております。） こちらの画像はflickr様からお借り ...

Sass(SCSS)を始めよう！「Prepros（プリプロス）」で簡単にSass環境を作ろう！（実践編）

「Prepros」はSassを超簡単にコンパイルすることがきるGUIツールです。 PreprosができることはSassのコンパイルだけではありません。ざっと以下のことが可能です。 Preprosでできること(一部抜粋) 1. Sass（それ以外にもLess、Stylus、Pug/ ...

Sass(SCSS)を始めよう！「Prepros（プリプロス）」で簡単にSass環境を作ろう！（基礎編）

Sassを使い始めるためにはどうしたらよいでしょうか？ 主に以下の２つの方法があります。 エディタの拡張機能を使う Gulpを使う ひとりで案件を進めるであれば１の方法でも問題ないでしょう。 しかし、この方法だとエディタに依存してしまうため複数人が関わる案件の場合は機能しません。 ...

【初心者でも簡単！】スタイルガイドジェネレーターの「Fractal」の使い方を徹底解説（実践編）

この記事では、Fractalというスタイルガイドジェネレーターの実践的な使い方をご紹介します。 ちなみに、この記事は「【初心者でも簡単！】スタイルガイドジェネレーターの「Fractal」の使い方を徹底解説（環境構築編）」の続編になります。 まだ読んでいない方はそちらを読んでからの方がスムーズかと ...

【初心者でも簡単！】スタイルガイドジェネレーターの「Fractal」の使い方を徹底解説（環境構築編）

WEBアプリやそれに近い大規模な案件を進めていくにあたって、共通のパーツってありますよね。 LP（ランディングページ）であれば、そういったものはないのですが、ある程度規模が大きくなるとそういった共通パーツ（モジュールまたはコンポーネント）が何回も登場して、それを組み立ていくというのはよくあるこ ...

【意外と知らない？！】コーディングを速くするために知っておきたいテクニック集

突然ですが、みなさん。 コーディング（HTML,CSS）得意ですか？ 筆者は、「得意です！」と自信をもって言えるほどではありません。汗 「どうやって再現したらいいんだ...」と、頭を悩ませ時間が溶けていくことが多いです。 しかし、コーディングでは「スピード」が求められますよね。 １ページ作成す ...

【無料で利用できるWebアイコンフォント】Font Awesome を使ってみよう

ボタンの横にアイコンを配置することが多々ありますよね。 そんなとき、画像を書き出さなくてもアイコンフォントを使えば、簡単に設置できるので紹介します！ 概要 Font Awesome（フォントオーサム）はアイコンフォントやSVGを提供しているサービスです。 アイコンフォント ...

目指せデザイン完コピ！！少しでもデザインに近づけるためのHTMLコーディング

HTMLコーディングをしていて、見た目では完璧にデザイン通りになっていると思っていても実際比べてみるとすごくズレてる… 皆さんそういう経験あるのではないでしょうか。 まず気を付けないとどれぐらいズレてしまうのか、また努力次第でどれぐらいデザイン通りになるのか比較してみました! まず ...

スマホの傾き検知、Web制作で使える？ or 使えない？

スマートフォンでアプリを使っていると、時々デバイスの傾きで画面内もお洒落に傾く事があるかと思います。 Webでも出来るかなと思い調べたところ「DeviceOrientationEvent」というものが見付かりましたので、簡単なデモを作成してみました。 今回は手軽にwebpackとBabe ...