BLOG ブログ

最近ではアニメーションが実装されたWebサイトも多くなり、趣向を凝らしたリッチな演出を取り入れているサイトもそう珍しくなくなってきました。 特に重要な要素を動かすことで興味を引かせたり、飽きずに読み進めてもらうためのきっかけになったり、といったメリットがありますよね。 ただ、アニメーショ ...

こんにちは。コーディング歴半年のエンジニアです。コーディングは、シンプルなサイトなら一人で実装できるレベル感です。 コーディングで気を付けるべきことがたくさんありますよね。でも見た目をそれっぽくするのに精一杯で、そこまで気が回らないときがあります。 コーディングをしているときに、 ...

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

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

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

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

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

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

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

ボタンの横にアイコンを配置することが多々ありますよね。 そんなとき、画像を書き出さなくてもアイコンフォントを使えば、簡単に設置できるので紹介します！ 【目次】 概要 事前準備 ダウンロードして使う CDNを使う ...

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

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

コーディングを始めたてのころは誰でもPCのサイトを作ることに精一杯になり、スマートフォン用の展開をおこないやすいコードを書くことが頭から抜け落ちてしまいますよね。今回の記事では、レスポンシブサイトでよく見かけるフッターを、どのようにレスポンシブ化するかを理解していただくことが目的となっていま ...

コーディングの検証は見る場所やブラウザ・端末も多く、チェックが大変ですが重要な作業です。 特にヘッダーなどの共通要素、TOPページのチェックは重要です。 確認すべきポイントは多岐にわたりますが、明文化されていないことが多い作業でもありますよね。 担当者によってチェックするポイントが違っ ...

最近、ブランディングのためにWebフォントを使用しているサイトを多く見かけますよね。 そんな中、「Webフォントってよく分からない…」「Webフォントって重いんじゃないの…？」「使いたいフォントがWebフォントにない…」と思っている方は多いのではないでしょうか？ この記事では「Webフォ ...

無料で使用できて、コンテンツの管理が簡単にできる上に、カスタマイズ次第でなんでもできるWordPress。なんでも全世界のサイトの4分の1はWordPressが使われているとかいないとか。 弊社でもWordPressの案件は多く、リニューアルから新規作成など多岐にわたります。 中でもHT ...

ウェブデザインを製作する際、「ページを更新した時、順番に下から出てくるアニメーションを付けて欲しい…。」など、言葉で挙動の説明は難しく、伝えるためにアニメーションをデザイナー側で用意するのも大変…。 デザイン・コーディングどちらも自分が担当できる場合であれば融通が利きますが、チームでの作業 ...

コーダーの皆さんはコーディングする際に使うCSSはある程度決まっているのではないでしょうか。 僕自身、使いどころは異なっていても、使用するプロパティなどは大体いつも同じものの組み合わせであることが多いです。 そこで、今回は少しだけ視点を変えて普段あまり触れる機会は多くないけれど、 うま ...

軽くて拡張機能も豊富で、日本国内でも世界でもトップシェアを誇るブラウザ・それがGoogle Chrome。 Chromeの検証ツール（ディベロッパーツール）のお世話になっているサイト制作者は多いはずです。 この記事ではサイト制作のプロであるサイト制作会社の人でも意外と知らなかった知られざ ...

みなさん、HTMLメールを作成したことはありますか？ テキストだけで作ったメールよりも凝ったレイアウトにすることができ、画像を使って華やかに見せることもできるので、よりユーザーの目を引くことができますよね。 華やかなメルマガなどが送られてくると、ついつい見てしまう方も多いのではないでしょ ...