ブログBLOG

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

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

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

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

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

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

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

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

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

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

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

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

フッターデザイン【レスポンシブサイトのサンプルソース】

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

HTMLコーディングの検証ってどこ見るの？チェックポイントとよくある不具合をまとめました

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

Webフォントとは？メリット・デメリット・使い方など 完全ガイド初級編【まとめ】

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

HTMLをWordPress化！やりやすいコーディング方法をレクチャー【手順付】

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