BLOG

【コピペでOK】イメージ別!サイトをリッチに見せるためのCSSアニメーションまとめ【デモ・サンプルコード付き】
投稿日:2021年1月7日

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

初心者がCSSコーディングでつまずく部分を解説【ボタン、文字調整編】
投稿日:2020年11月6日

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

ポップアップ表示のYouTubeでも関連動画を操作したい【Magnific Popup】
投稿日:2020年10月29日

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

360度画像をWebサイトに埋め込む方法6選を徹底解説!【360度ビュー・手順・デモ付き】
投稿日:2020年10月26日

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

Sass(SCSS)を始めよう!「Prepros(プリプロス)」で簡単にSass環境を作ろう!(実践編)
Sass(SCSS)を始めよう!「Prepros(プリプロス)」で簡単にSass環境を作ろう!(実践編)
投稿日:2020年9月15日

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

Sass(SCSS)を始めよう!「Prepros(プリプロス)」で簡単にSass環境を作ろう!(基礎編)
Sass(SCSS)を始めよう!「Prepros(プリプロス)」で簡単にSass環境を作ろう!(基礎編)
投稿日:2020年9月15日

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

【初心者でも簡単!】スタイルガイドジェネレーターの「Fractal」の使い方を徹底解説(実践編)
投稿日:2020年9月15日

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

【初心者でも簡単!】スタイルガイドジェネレーターの「Fractal」の使い方を徹底解説(環境構築編)
投稿日:2020年9月15日

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

【意外と知らない?!】コーディングを速くするために知っておきたいテクニック集
投稿日:2020年9月9日

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

【無料で利用できるWebアイコンフォント】Font Awesome を使ってみよう
投稿日:2020年8月28日

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

目指せデザイン完コピ!!少しでもデザインに近づけるためのHTMLコーディング
投稿日:2020年8月21日

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

スマホの傾き検知、Web制作で使える? or 使えない?
投稿日:2020年6月24日

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

フッターデザイン【レスポンシブサイトのサンプルソース】
投稿日:2020年6月23日

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

HTMLコーディングの検証ってどこ見るの?チェックポイントとよくある不具合をまとめました
投稿日:2020年6月19日

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

【まとめ】Webフォントの使い方!完全ガイド 初級編【2020年版】
投稿日:2020年6月11日

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

【HTMLから】WordPress化しやすいコーディングのすすめ【手順付】
投稿日:2020年5月18日

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

【デザイン段階でも動く?!】Adobe XDのプロトタイプで、デザインに動きをつけてみよう!
投稿日:2020年5月15日

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

覚えておいて損はないCSS一覧
投稿日:2020年2月28日

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

今すぐコーディング爆速化!プロ仕様なChrome検証ツールの使い方
投稿日:2020年2月28日

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

【HTMLメール】デザインからコーディングまで!これだけはおさえておきたいポイント
投稿日:2020年2月5日

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