サイトには欠かせないアイコン。 
実装は様々な方法がありますがサイズとカラーを変更できる手段としては、インラインでSVGを設置する方法やSVGアイコンをwebフォント化して取り扱う方法などがあります。 
但し、これらは記述が長くなったり、アイコンを加工する手間があったりします。 
そこで今回はcssで手軽に実装できるmaskを使った実装方法を紹介します。

サイズ、カラーをcssで変更可能！maskで扱いやすいSVGアイコンを実装する

Three.jsは、ユーザーにとって没入感のある視覚的な要素を追加することのできる3Dグラフィックスライブラリです。
この記事では、Three.jsとはどのようなもので、ブラウザ上でどのように活用できるのか、活用パターンをご紹介していきたいと思います。

Three.jsを使ったインタラクティブなウェブページの可能性

近年、アクセシビリティ対応がますます重要視されており、タブ切り替えの実装においてもアクセシビリティを考慮した設計が求められています。 
私自身、過去に何度かアクセシビリティ対応をしたタブ切り替えを実装する機会がありましたが、アプローチの仕方がいくつもあり、毎回悩まされていました。 
この記事では、アクセシビリティ対応がなされたいくつかのウェブサイトを調査し、タブ切り替えの実装方法について探求していきたいと思います。

タブ切り替えはどう実装するのがいいのか

コンパクトで理解しやすく、再利用可能なマークアップを作成できるとWEBサイトの品質維持がぐっと簡単になります。 
本記事ではCSSカスタムプロパティとHTMLカスタムエレメントを利用して使いやすいグリッドシステム、見通しの良いマークアップを実現する方法をご紹介します。

CSSカスタムプロパティとHTMLカスタムエレメントでいい感じにマークアップする

2022年6月15日にInternet Explorer 11のサポートが終了し、2023年2月14日にはInternet Explorer 11が完全無効化され、Microsoft Edgeへリダイレクト表示されるようになりました。 
そのことから、Internet Explorerで表示が難しかったCSSプロパティやCSSの機能が積極的に使えるようになりました。 
今回はCSSプロパティ「scroll-behavior」を使ってアンカーリンクのスムーススクロールを実装する方法と注意点をご紹介いたします。

CSSのみでアンカーリンクのスムーススクロールを実装

Webサイトやアプリケーションは、セキュリティ設計上のミスやプログラムの不具合により、欠陥が発生してしまうことがあります。これを脆弱性と言います。 
近年、脆弱性が外部から狙われてしまい、攻撃を受けた結果、情報漏洩などの被害が発生しています。 
そのような被害を防ぐために、Webサイトのセキュリティ対策を何か始めたいと考えている方、でもどこから手を付けたらいいかわからない。といった方に向けて、どのような脅威があるのか、脆弱性の検査ツールについてご紹介します。

Webサイトのセキュリティ対策 はじめの第一歩

フレームワークを使った開発からHTML・CSSでの運用まで、さまざまな条件のプロジェクトに共通して役に立っているVSCodeのおすすめ拡張機能をご紹介します。

構築から運用まで VSCodeおすすめ拡張機能

SVG（Scalable Vector Graphics）は、Webに適したベクターファイル形式です。PNG、JPEGなどのピクセルで作られているラスターファイルに対して、ベクターファイルは、画像の塗りや曲線の情報を数式で表現したファイルになります。数式はXMLコードで記述されているのでテキストエディタで編集することが可能ですので、StyleやJSの追加で動的な動きをつけることが出来ます。 
今回は、お客様のご要件でよく見かける、イラスト上のリンク箇所をマウスホバーしたときに変化をつける仕様をSVGをつかって実装する方法をご紹介いたします。

SVGの使いどころ！イラスト上にホバーを設定してみよう

アクセシビリティの実装で、見落としがちなポイント、詰まるポイントとその対処法をまとめてみました。

アクセシビリティ実装で見落としがちなポイントと対処法

iOSのアドレスバーはスクロールによって表示されたり非表示になったりするため、初期表示時とスクロール後で画面サイズが変わってしまいます。 
そのせいで、コンテンツを全画面表示にしたいときに上手く高さをあわせられない。という問題に直面したことはありませんでしょうか？ 
今回はそういった問題を解決できる新しい単位「svh、lvh、dvh」を紹介します。

スマートフォンのアドレスバーを考慮して高さいっぱいに表示する新しい単位「svh、lvh、dvh」

今回は普段使用しているVSCodeでVimのプラグインを入れてる私の環境ではどのような操作をしているのかをご紹介します。

VSCodeにVimプラグインを入れてVimのキーバインドで作業してみよう

昨年、コーディングファクトリー（以下CF）のサイトをリニューアルしました。 
今回はCFサイトのリニューアルに使用した開発の技術構成やリニューアル後の運用の構成をご紹介したいと思います。

Next.js + Vercel + Headless WordPressで作るWEBサイト

MovableTypeの実装を行う場合、「こんな時はどうやったらいいんだろう...?」という場面に遭遇することがあります。 
そういった場面におすすめのプラグインのご紹介と具体的な活用例をご紹介いたします。

MovableTypeの事例別のおすすめプラグインと活用方法

コンテンツエリアは幅1000pxだけど背景はウインドウ幅いっぱいに伸びているようなデザインってことよくありますよね。 
そんな時に使えるCSSのテクニックを3つ紹介したいと思います。

こんなときは！背景をウィンドウ幅100%に広げる3つのCSSパターン

ウェブコンポーネント、Fetch API 等ブラウザ標準の API が発達してきたことに伴い、javascript フレームワークを使用せずとも少ない記述で高度な表現が可能となってきました。 
ただ、フレームワークを使用せず javascript から html を挿入するためにテンプレートリテラルを使用すると、エディター上ではただの文字列となってしまい、「見通し悪く、補完・フォーマットが効かない」状態で作業しづらくなりがちです。 
実はちょっとした工夫で javascript のテンプレートリテラルを html ファイル上での操作感に近付けることができます。 
javascript(typescript)内で快適にマークアップするための VS code と npm ライブラリーの設定をいくつかご紹介します。

フレームワークなしでテンプレートリテラル内のhtmlをいい感じの見た目にする

前回の「Webサイト解析ツールの紹介」記事に続き、今回はCSSの最適化に役立つツール紹介をしたいと思います。 
速度改善をする際、不要なCSSを減らすことはとても有効な手段の一つです。 
複数の制作者が制作・改修をして運用されたページは特に、不要なCSSが増えていきがちです。 
しかし、他の人が書いたソースを調査するにはとても労力がかかります。 
今回は、そんな時に試してみたいツールを3つ、具体的な使い方とあわせてご紹介したいと思います。

試してみたくなる！便利なCSS最適化ツールの使い方

新規制作、既存改修どちらのプロジェクトでもサイトパフォーマンスを気にされるお客様が増えてきています。 
スケジュール内でデザインと仕様に沿ったWeb制作をすすめるだけでは初期表示速度（LCP）やレイアウトシフト(CLS)、操作可能までの時間(TTI)など近年要求されるサイトパフォーマンスを高水準に達成するのはなかなか難しいものです。 
そこで今回は、現状のサイトのパフォーマンスを解析するのに役立つツールと使用方法をご紹介します。

サイトパフォーマンス最適化のためのWebサイト解析ツール3選

社内のナレッジ共有は、みなさんどのようにされていますか？
様々な案件の対応をする中で、各人に溜まっていくナレッジを、社内でどのように管理してシェアするか、なかなか大正解がない永遠の課題だと思います。
そこで今回は、モノサスタイランドで導入している「Slite (スライト)」というサービスをについて、選定ポイントやおすすめの機能とあわせてご紹介します。


ナレッジ共有ツール「Slite (スライト)」とは？

皆さん、WebPの画像を使用されていますか？ 
今後IE11のサポートの終了に伴って、本格的にWebPを使える場面が増えてくるかと思います。今回はそんなWebPの概要と具体的な使い方をご紹介します。 
「高画質な画像が使いたい（でもWebサイトが重たくなるのは嫌だ）」「ページの表示速度の改善対応でPage Speed Insightがよく提案するWebPが気になっている」という方に、特に参考となれば幸いです。

次世代画像フォーマットWebPを使ってみよう！

今回は、コーディング作業中やセルフチェックの際によく使用しているChromeの拡張機能を5つご紹介します。 
いずれも必要充分なシンプルな拡張機能で、使い方の工夫次第でいろんな場面で役に立つので、ぜひ導入を検討してみてください。

コーディングのセルフチェックに大活躍！Chrome拡張機能5選

最近は、Webデザインの素材としてPhotoshopやIllustratorよりも、XDやFigmaといったUI/UXデザインに特化したツールでご提供されることが多くなっております。今回はXDからコーディング用に画像を書き出す際の倍率などの設定はどの様にしたら良いのか、また画像が劣化してしまう原因について解説いたします。

Adobe XD 画像の書き出しで起きやすいトラップを回避する

「WebサイトにCMSを導入したい」という要望を叶えるには一昔前はWordPressやMovable Typeが主流でしたが、最近ではmicroCMSやstrapiのようなHeadlessCMSと呼ばれる新しい考え方のCMSも登場しており、私たちも実装を担当する機会が増えてきました。今回は、普段Movable Type実装案件を多く担当するエンジニアから見たJamstackとHeadlessCMSを利用したCMS実装のメリット・デメリットをご紹介します。

Movable Type実装者から見たJamstack・HeadlessCMSという選択

制作の現場では、サイトマップやディレクトリマップの情報をまとめるのに、エクセル、スプレッドシートなどの表計算ソフトがよく使用されています。このような資料はひとつにまとめておきたいところですが、今回はスプレッドシートを二重管理せざるを得ない場合、データの不一致を防ぐためにできる限り項目を共通化する数式を紹介します。

便利な数式でスプレッドシート二重管理の手間を減らす！

Movable Typeを利用してサイト制作を行っていると必ずと言っていいほど悩む「お問い合わせフォームをどうやって実装しようか」という問題。この問題を簡単に解決できる「A-Form」というプラグインがあります。今回はA-Formプラグインを利用してみて感じたメリット・デメリットや使いどころを紹介します。

Movable Typeでお問い合わせフォームを実現する「A-Form」

ついにこの時がきたか。IEのWindows10（LTSB／LTSC以外の通常版）でのWebブラウザアプリのサポートが終了することになりました。インターネット黎明期に世界に多大なる貢献を果たしてきたIEには感謝しかありませんが、現代においては彼と我々は非常に難しい関係にありました。
今回はそんな偉大なIE無き世界に本気を出すCSSを4つご紹介していきたいと思います。

IE（Internet Explorer）無き世界で本気出すCSS4選

Webディレクションの仕事は納期、品質、費用の3軸をコントロールしながらプロジェクトを成功に導くことと言われます。実際の業務内容は、進行管理、ファシリテーション、折衝、要件整理、時にワイヤーを引いたり、それぞれの作業者のマネージメント要素まで含まれることあり、非常に多岐にわたります。今回は、実際に制作現場でディレクションをする中で役に立つこと（TIPS）の中から3つご紹介したいと思います。

円滑にWeb制作ディレクションを行うためのTIPS3選

コーディングしたテーブルを読み上げソフトで確認してみると、思っていたよりも問題なく読まれることもあれば、意味が通じにくくなってしまう場合もあります。
今回は、どのようなテーブルだと上手く読み上げられるのか、反対にどのようなテーブルだと問題が発生するのか、そのパターンと解決方法についてご紹介していきたいと思います。（検証環境は、Windows NVDA＋Firefoxとなります。）

音声読み上げ対応でテーブルのアクセシビリティを改善！

前回（4月号）はpugの変数とmixinを活用して、制作環境やコンポーネント設計の足がかりをご説明しました。今回は、テンプレートエンジンの強力な機能であるイテレーション（反復処理）を使った、リスト要素の管理方法をご紹介します。

始めよう!テンプレートエンジン ～Pugから学ぶマークアップ管理～ その2

静的、動的、フレームワークの有無を問わず、Web制作では情報（コンテンツ）、構造（マークアップ）、見た目（スタイル）、作用（スクリプト）の4つの柱を適切に管理することが大切です。サイトを構成するHTML、CSS、JavaScriptファイルを直接編集・作成してしまうと、反復される要素すべてを記述する必要があるなど、4つの柱を管理することが難しくなります。そんな時は、マークアップにテンプレートエンジン（meta言語）を用いて、資材管理を容易にしましょう。今回はHTMLのテンプレートエンジンの一つであるPugを用いた具体例を挙げて、構造からWeb制作をコントロールする方法をご紹介します。

始めよう!テンプレートエンジン ～Pugから学ぶマークアップ管理～ その1

複数の作業者でコーディングしていると、変更箇所以外がGitに差分として表示されてしまうことはありませんか？それは、プロジェクトのGitリポジトリとご自身の開発環境の改行コード設定が異なっていることが原因かもしれません。改行コードは、WindowsではCRLF、MacではLFが標準で利用されます。そのため、各作業者のOS、エデイター、Gitの環境設定の違いによって、開発中のプロジェクトのGitリポジトリとの間で思わぬ差分が発生してしまうことがあります。今回はコマンドを利用して、改行コードの確認・変更を行う方法をご紹介します。

複数人作業の意外な落とし穴　改行コードの設定を再確認

動画でのコーディング学習には「再生時間があるので学習に必要な時間が計りやすい」「実際の画面・プログラムの動きを見られる」など様々なメリットがあります。
今回はJavaScript（以下・JS）にテーマを絞り、1日1時間・約1ヶ月で脱初級者を目指すのにおすすめの学習方法を紹介します。

初級者向け 動画で JavaScript おすすめ学習方法

インバウンド（訪日外国人客）の増加やビジネスのグローバル化が進むなか、弊社のお客様の中でもWordPress構築サイトを多言語化したいというご要望が増えています。WordPressは様々なカスタマイズが可能なため、多言語サイトを作る方法がいくつかあります。今回は、多言語展開するときの方法と、よく利用している多言語用プラグインの「WPML」について紹介します。

WordPressの多言語対応について

Webサイトに実装された、JavaScriptの動きや操作時の挙動をクライアントに伝えるとき、言葉や文章で表現するのが難しいことはよくあります。そんなときに、動画を使って相手に内容を確認することも多いのではないでしょうか。今回は手軽に利用できる録画ツールをPCとスマートフォンそれぞれでご紹介します。

ディレクションや検証に役立つ！お手軽録画ツール

Webサイト作成時に、CMSを導入して制作の効率を上げつつ、運用までを見据えたサイトの制作を行うことがあります。WordPressやMovable Typeなど、色々な種類のCMSがありますが、最近ではHeadless CMS導入の相談や実装も増えてきました。今回はHeadless CMSの特徴と使いどころをご紹介します。
※記事内のHeadless CMSは、Strapiを使用しています。

Headless CMS（Strapi）の特徴と使いどころ

時短には、作業の面倒な動作を減らす「短縮」、ルール化して作業効率をあげる「整頓」、ミスを減らして時間損失を回避する「ミス防止」の3原則というのがあります。今回はWeb制作現場の「時短」に役立つツールを3つ、それぞれの原則に分類して紹介します。

Web制作現場の時短に役立つツール3選

Movable Type 7が2018年にリリースされ、コンテンツタイプ という機能が追加されました。
コンテンツタイプによって以前のバージョンのMTよりお客様の要望に答えやすい実装が可能となりました。その一方で「昔ながらの方法で実装し続けている」「コンテンツタイプの使いどころがよく分からない」という方もいるかもしれません。今回は、コンテンツタイプのメリット・デメリットと使いどころを紹介します。

Movable Type 7のコンテンツタイプを活用しよう

Webサイトのレスポンシブ対応が当たり前になっている昨今、デバイスの日本市場シェア※はスマホ・タブレットを合わせると4割を超えます。
そんな中、UI/UX、アクセシビリティといった様々な観点からも、充分なタップエリアの確保が推奨されています。しかし、必ずしもコーディングするコントロール要素が充分なタップエリアを確保しているデザインとは限りません。
そこで今回はタップエリアをデザインに影響を与えることなく拡げるCSSのテクニックをご紹介します。
※Statcounter 2019年4月〜2020年4月調べ。

UI/UX改善！タップエリアを拡げるCSSテクニック

昨今では当たり前になりつつある、ウェブアクセシビリティ対応。徐々に基礎的な理解の共有は進んでいるように思いますが、今回は実際の制作現場で頻出している、ついついやってしまいがちなミスと解決方法をご紹介したいと思います。

アクセシビリティ対応でありがちなミスと解決方法

alt属性とは、htmlのimg要素に記載される「画像の代替テキスト」のことです。alt属性が正しく設定されていれば、何かのトラブルで画像が表示されなくてもalt属性に設定した代替テキストが表示されます。また、視覚障害の方が音声読み上げソフトを用いてサイトを閲覧する際も、画像部分はテキストで読まれるため、サイトの情報を漏らさず伝えることができます。
このように、実は重要な役割を持ったalt属性ですが、コーディングをしていると、どのような言葉を設定しようか意外と悩んでしまいます。今回は、その悩みを少しでも減らすため、alt属性を設定するコツをご紹介します。

もう悩まない！ alt 属性を設定するコツ

制作された大量の画像をチェックしなければならないとき、画像のイメージは目視確認となりますが、サイズ、容量、拡張子等を一つ一つエクスプローラーやFinderから確認していくのは作業時間もかかりますし、チェックの際ヒューマンエラーの発生原因となってしまいます。クリエイティビティを発揮する必要のない”作業”は正確さスピードに勝るPCに頼ってしまいましょう！
今回はExiftoolというアプリケーションといくつかのシェルスクリプトを使って画像情報の一覧をcsvファイル化する方法をご紹介します。

Exiftoolとシェルスクリプトで画像情報を一括取得する

「このWebサイトで設定されている全てのリンクURLを自動でピックアップしたい。でもプログラムを組むほどの時間は割きたくない。」
「サイトのリニューアルを検討しているので、現行サイトの全ページタイトルを確認したい。簡単にできる方法はないかな？」というときにオススメなのが、Google社が提供しているオンライン表計算ソフト「スプレッドシート」の「IMPORTXML関数」を利用する方法です。
今回は関数を使った「リンクURL・テキスト」と「ページタイトル」の取得方法をご紹介します。

GoogleスプレッドシートでWebページのデータを自動抽出

何百ページもの大型案件はもちろん、運用時にも重要なものとなるモジュール集。その制作には高い技術力、あらゆる使用ケースを想定して作る想像力が必要とされます。今回は、モジュール集制作時にチェックするポイントとコーディングテストについてご紹介します。

モジュール集制作時のコーディングチェックポイント

Trello（トレロ）とは、「カンバン・ボード」という形式のタスク管理ツールです。各タスクを付箋のようなカードで管理し、大きな掲示板の中をドラッグ&ドロップでカードを移動させて進捗を管理できます。一見して何をするべきか分かるので、作業タスクが細かくあるときや、自分の頭の中を整理したいときなどにとても便利です。
今回は、実際にプロジェクトで使用した際に便利だった点を紹介いたします。

カードで管理するタスク管理ツール「Trello」

インターネットの検索サービスを使うとき、ほとんどの場合は知りたい単語や調べたいことをそのまま入力して検索すると思いますが、「Google検索」は、インターネット上の情報を探す以外にも、様々な便利機能をもっています。今回は、その中でもWeb制作現場で役立ちそうなものをピックアップしてご紹介します。


意外と知らない？Web制作現場で役立つGoogle検索

GitKrakenは、開発が非常に活発なGitクライアントで、毎月のように機能やビジュアルなどがアップデートされます。ツール上でソースの編集を行ったり、タスク管理ができる便利機能の他に、直観的なUI/UXへのこだわり、パフォーマンスの追求など、日々進化を遂げ、使いやすくなっています。今回は、そんなGitKrakenについて特におすすめしたいポイントをご紹介します。

使いやすさと遊び心満載のGitクライアント「GitKraken」

社内用のドキュメントやガイドライン指示書などに、GoogleドキュメントやWordが利用されているケースはよくありますが、資料を簡単に共有したり、更新性を高めるために「このドキュメントをそのままWebサイト化したい！」と思った事はないでしょうか。今回は、Googleドキュメント上で管理されていたドキュメントをVuePressを使用してWebサイト化する手順を紹介します。

VuePressで、ドキュメントをお手軽にWebサイト化してみよう！

Web制作現場でのGitの普及率は高く、コミット、プッシュ、マージ、プルなどの基本的な操作ができる方は多くいると思います。今回は基本的な操作はできていている方に、さらに便利な使い方を紹介します。

もっとGitを使いこなそう2 〜便利なGitコマンド編〜

近年Webを取り巻く環境や技術も様変わりし、ブラウザで挙動するWebサイトでありながら、アプリのようなUXを実現するシングルページアプリケーション（SPA）という実装手法も出てきました。新しい実装はなかなか導入のハードルが高いイメージがありますが、フレームワークの発展とともに導入しやすくなってきています。
今回は、Nuxt.jsというフレームワークとMovableType（以下、MTと表記）で生成したJSONファイルを使ってSPAサイトを実装する方法をご紹介します。

MovableTypeとNuxt.jsで作る更新性の高いSPAサイト

miChecker(エムアイチェッカー)とは、総務省が無償で配布しているWebアクセシビリティ評価ツールです。主に、Webコンテンツが「JIS X 8341-3:2016」に準拠しているか確認するための「検証支援ツール」として広く知られていますが、Webアクセシビリティに関する様々な知識を学ぶ学習ツールとしても利用することができます。今回は、miCheckerを使って、具体的にどのようなことが学べるのかをご紹介します。

miCheckerを使ってWebアクセシビリティを学ぼう

Webサイトの規模は1ページ、100ページ、1,000ページと大小様々です。制作するのはもちろん大変ですが、それと同じくらい検証にも時間が掛かります。URLを1ページずつ入力したり、スプレッドシートのセルを一つ一つクリックしてページを探すのは結構手間がかかるものです。そこで今回は検証の効率を上げるために検証用のページの使用例をご紹介をしたいと思います。

制作したページを素早く確認できる！検証用ページ制作のすすめ

GitはもはやWeb制作の現場になくてはならないものですが、複数人で作業していると、「間違って違うブランチで作業していた」「マージしてはいけないタイミングでマージしてしまった」など、焦ってしまったという経験は誰でもあるもの。今回はそんな困った時に使える便利なGitの機能を3つ、SourceTreeでの操作とコマンドで紹介します。

もっとGitを使いこなそう1 〜困った時のGitコマンド編〜

CSS3で新しく制定されたﬂexbox。そのレイアウトの組みやすさから、制作の現場で利用する機会が非常に多くなってきました。要素が増えてもレイアウトが柔軟に対応することや、上下中央寄せが簡単に実現するなど、活用方法は様々です。今回は、実践的なﬂexboxの利用について具体的な事例をご紹介します。

よくあるレイアウトをﬂexboxで簡単に実現する

近年、Webブラウザの進化や、それに伴うフロントエンドエンジニアの台頭で、クライアントサイドでもWebサイトの高速化や、ページ全体のパフォーマンスに対する意識が高まっています。サーバーにリソースをただ配置するだけではなく、様々なアプローチでパフォーマンスを工夫する事が必要です。その中の一つにHTTPリクエストを低減する事が、Webサイトのパフォーマンス向上のひとつの手段となっています。今回は、その具体的な方法として、画像データをHTMLやCSSファイル上のインラインデータとして埋め込む「Data URI scheme」をご紹介します。

Data URI schemeを利用して、Webサイトの高速化を図ろう

ツリー形式のサイトマップやフロー図を作るとき、PowerPointやExcelを使う人は多いのではないでしょうか。しかし、サイト構造やタスクに変動があったとき、要素の追加や変更、それらを結ぶコネクタ（線）の修正などに手間をとられることがあります。今回は、ユーザビリティが高く、直感的な操作で簡単にサイトマップやフロー図を作成できる「FlowMapp」というツールをご紹介します。

直感的な操作でサイトマップやフロー図を作成できる「FlowMapp」の活用

Movable Typeで構成されたサイトをリニューアルする際に、既存の記事を新しい環境に移行しなければならないことがあります。記事のボリュームが少ないときは、再登録できますが、数百ページの記事を再登録するのは非効率です。今回は記事のボリュームが多いとき、一括でMovable Typeの記事を移行する方法と手順をご紹介します。

Movable Typeの記事を一括で移行する手順

ページ数の多いサイトでmeta情報をまとめて一括で設定したい場合に、ShellScriptを使うと簡単に設定することができます。今回は「置換リストをExcelで用意」して、「Shell Scriptで作ったツールでmeta情報を一括で設定する」方法をご紹介します。

Shell Scriptを使ってmeta情報を一括設定する

検索システムの実装と聞くと、データベースなどのサーバサイドの知識や、経験が必要ではないかと難しく考えてしまいがちですが、Movable Typeの場合は、Data APIかJSONファイルさえあれば、JavaScriptでも実装できてしまいます。今回は、「Movable TypeのData APIの形式のJSONファイルを作成」して、「JavaScriptで検索を実装する」方法をご紹介します。

Movable TypeのData API形式のJSONファイルとJavaScriptで検索システムを実装する

構造化マークアップとは、決められたルールで情報を記述することにより、人間だけではなく検索エンジンなどのロボットにも、そのテキストがどのような意味を持っているのかを理解できるようにすることです。今回は構造化マークアップをすることのメリットと具体的な設定方法、実装後のテストツールについてご紹介します。

構造化マークアップでユーザーの目を引く検索結果表示に

チェックリスト形式のタスク管理ツールTodoist。シンプルで直感的でありながら、充実した機能性で世界的に人気のあるツールです。今回はTodoistとGoogleカレンダーのリアルタイム相互同期機能を使い、タスクを日々のスケジュールに落とし込む方法を通して、ツールを使うこと、相互管理のメリットをご紹介します。

TodoistとGoogleカレンダーを連携してタスクとスケジュールを相互管理する

近年、様々なサイズのスマートフォンやタブレットのデバイスが増えたことによって、デスクトップデバイスでも高解像度の画像が必要な場合があり、HTMLでのメディアクエリも重要になっています。 
HTML5.1から追加された&lt;picture&gt;タグはメディアクエリが使えるようになりました。&lt;picture&gt;タグの子要素である&lt;source&gt;要素に、表示したい画像とメディアクエリを設定するとCSSのメディアクエリと同じく画像の変更ができます。JavaScriptでも同じく、デバイスに合わせて制御や処理することが増えています。 
今回はCSSでよく使われているメディアクエリをmatchMediaというメソッドを組み合わせてJavaScriptで使う方法を紹介します。

メディアクエリをJavaScriptでも使いこなす

SVG（Scalable Vector Graphics　スケーラブル・ベクター・グラフィックス）とは、計算式によって色や曲線を表現する、XMLベースの画像形式の一つです。 
HTML上にコードとして記述できる為、class名などを指定して、CSSでスタイルを変更できたり、JavaScriptを用いて動的に中身のコードを書き換えたりする事が可能です。 
そのような理由から、近年、SVGがWeb制作の現場で使用される機会が増えてきています。今回は実装例を挙げ、ビットマップ形式とSVGのメリットとデメリットを確認しつつ、SVGの使いどころをご紹介します。

SVGファイルの基礎を理解して、上手に活用しよう。

サイトリニューアルをする際には、ページ毎に旧サイトのページをどのように移行するのかなど、必要事項をまとめた指示書を作成する必要があります。 
今回はExcel VBAを用いて指示書を高速で複製する方法を紹介します。

Excel VBAを使った高速指示書作成術

Chromeアドオンとは、ブラウザ閲覧を快適にする為に作られた拡張機能（プラグイン）です。QRコード作成ツールや、ページキャプチャ、企業独自のオリジナルの拡張検索ツールなど、様々な機能を持つものがあります。ChromeアドオンはJS、HTML、CSSの知識があれば、便利なツールを手軽に自作することができます。 
今回は自作アドオン「search_selector」を例に、作成方法をご紹介いたします。

自作のChromeアドオンで手軽に快適な環境づくり

HTMLソースや長文の原稿などで、検索・置換を行う時により便利にできるのが、正規表現です。記号の羅列は難しいイメージがありますが、マスターすると様々な活用シーンがあり、作業の時間短縮につながります。今回は使用例を3つご紹介したいと思います。

現場で使える正規表現

サイトのスタイルガイド。モジュール1つ1つのソースコードをコピー＆ペーストして手作業で作成しようとすると意外に工数がかかってしまうもの。そんな手間を省いてくれるのがスタイルガイドジェネレータです。今回はその中でもaigisをご紹介します。

スタイルガイドジェネレータaigisを使用したモジュール管理

CMSやフレームワークによって指定されたスタイルを変更したいときや、サイトを運用する際にスタイルの調整が必要な場合、知らないと困るCSSの優先順位。今回は「スタイルシートの優先順位」「セレクタの詳細度の計算方法」とあわせて、便利なツールを紹介します。

CSSの優先順位とセレクタ指定の詳細度

旧デザインから新デザインへのリニューアル案件で、現行ページをチェックするときなど、複数ページをまとめて効率よく解析したいタイミングは意外とあるもの。今回は、そんなときに役立つChromeブラウザ拡張機能をご紹介します。

複数ページの解析に役立つChromeブラウザ拡張機能

Gitを利用してサイト制作を進めていくとき、SourcetreeなどのGitクライアントアプリを使用することもあるかと思います。ただ、制作中にあまり多くのアプリケーションを起動していると、それぞれを閉じたり開いたりするのにも手間がかかりますし、PCの動作が重くなることもあります。今回はそんな手間を省き、かつ軽快にGit管理とFTPアップロードを同時に行える「git-ftp」をご紹介します。

git-ftpでサイトを更新

前回（12月号）、Google AMPの概要についてご紹介しました。今回は「どのようにGoogle AMPを導入すればよいのか？」を、Google AMP構築の際の必要な手順を踏まえてご紹介していきます。

Google AMPについて – 実践編-

最近いろんな場所で「Google AMP」についての話題を目にすることが多くなりました。モバイルでのページ表示を高速化するもので、日本でもGoogle検索結果への正式対応が予定されており今後のモバイルページの主流になることが予想されます。そんな今が旬のGoogle AMPについて概要編と実装編の２部構成でお送りします。今回は概要編として「AMPとは何か」「どのようなメリットがあるのか」を紹介いたします。

Google AMPについて – 概要編 –

データのわずかな違いで、似た処理なのに複数の記述を書いてしまう事があります。その度に違うデータごとにコードを書いてしまうと、ソースが膨大になり、汎用性・可読性・更新性が失われてしまい、修正や運用のフェーズに負担がかかってしまいます。そんなときに、処理をまとめるのに便利なのがextend()メソッドです。今回はextend()メソッドを使ったデータのまとめ方をご紹介します。

extend()メソッドで複雑なデータをまとめる

中規模以上のサイト制作では、ページごとにレイアウトが異なるものだけでなく、ある程度レイアウトが決まったテンプレートページを量産していくケースが多くなってきます。制作に携わる人数を増やして手作業で1ページずつ制作していく方法もありますが、今回はテンプレートエンジンのEJSとCSVファイルを用いてページを一括でHTML書き出しをする方法をご紹介します。

EJSとCSVを使って効率の良い量産をしよう

cssでwidthの値を設定するときに「px」や「%」のような単位を使用することが多いですが、CSS3の便利な機能「calc()」を使用すると、計算式で値を設定することができます。今回は、よくあるカラムレイアウトを、calc()ファンクションを用いて実装する方法を紹介します。

cssのcalc()ファンクションで要素の幅を設定する

いまやどのような規模のプロジェクトであっても、Gitによるバージョン管理が普及しています。その際に大切なのは、正確で明瞭なルールです。今回は、静的なページの作成と、作成したページをCMSへ組み込む作業が並行するプロジェクトでのGitルールの一例をご紹介します。

CMS組み込みまでの案件におけるGitルールの例

Photoshopで画像を書き出しする際、従来のやり方では、画像をスライスし「Web用に保存」から書き出しを行っていたと思いますが、Photoshop CCになり、書き出し機能の種類が増えました。レイヤーから直接画像が書き出せるようになったり、自動で一括で簡単に書き出しができるようになったので、大幅に作業時間を短縮することができます。今回は、便利な機能「画像アセットの生成」を使った書き出し方法についてご紹介したいと思います。

スライス不要の画像切り出し方法

レスポンシブWebデザインで使える表組みのテクニックは過去のコーディングメソドロジーでも紹介していますが、今回は前回とは異なる「カスタムデータ属性」を利用したテーブルの実装方法をご紹介したいと思います。

「カスタムデータ属性」を利用したテーブルの実装方法

一見複雑に見える動きも、CSS3を使うことで簡単に実現することができます。今回は数字が高速で回転しながらカウントアップするアニメーションをご紹介します。

CSS3で作るアニメーション ～応用編～

html5のタグはそれぞれ役割を持っています。きちんとした使い方をすることでWebアクセシビリティの向上に繋がり、幅広いユーザーにより正しい情報を伝えることができます。そこで今回は明日からすぐに使える、Webアクセシビリティを考えたhtml5タグの使用例を5つご紹介したいと思います。

アクセシビリティを考えたhtml5コーディング

SEOの観点から最近はあまり使われなくなってきたクリッカブルマップですが、地図やイラストの一部から他のページにリンクする場合など、まだまだ使用するタイミングは多いと思います。今回はそんなクリッカブルマップをレスポンシブに対応させ、ロールオーバーも同時に実装してみましょう。

レスポンシブ対応 ロールオーバークリッカブルマップの実装

Web制作の現場において、バージョン管理ツールのGitはなくてはならない存在となっています。Gitを使用して複数人で制作を行ったり、1人で複数のブランチを切り替えて制作を行っている場合、競合が発生することがあります。その場合、ソースコードをマージして競合を解決する必要があります。
今回は、SourceTreeでGitを管理しているときに競合が発生した場合のマージツールを、SourceTreeの標準ツールから"WinMerge（ウィンマージ）"に変更する方法をご紹介します。

マージツールにこだわりGitをより効率的に使おう

ユーザーの閲覧環境にとらわれず美しいフォントを再現するために、CSS3の新機能「@font-face」を利用して、ウェブフォントを採用するサイトが増えています。しかし、日本語のウェブフォントは欧文フォントに比べて、ファイルサイズが大きく読み込みに時間がかかるなど、いくつかの問題も同時に抱えています。
そんな中、OS X MavericksとWindows 8.1に標準搭載された「游ゴシック体」と「游明朝体」や、オープンソース化されたAndroidおよびChromeのシステムフォント「Roboto」など、新たなデバイスフォントも登場しています。今回はfont-familyの基本的なルールを振り返りながら、これらのフォントについて紹介します。

font-familyと設定フォントについて

スマートフォンでサイトを見ていると、「PC表示」や「スマートフォン版へ」といったボタンを見かけることがあります。今回は、こうしたレイアウト切替えボタンをレスポンシブ対応のページで実現する方法をご紹介します。

レスポンシブページでレイアウト切替えボタンを実装する

Webサイトを閲覧していると、ブラウザのタブの部分に表示されるかわいいアイコン。ブックマークに登録したときにも表示されるので、favorite icon（お気に入りアイコン）の略で、「favicon(ファビコン)」と呼ばれます。今ではほとんどのサイトで見かけるこのアイコンですが、スマートフォンの普及によりfavicon事情も変わってきていることは意外に知られていません。今回は、faviconを設置するならスマートフォン用に「Webクリップアイコン」も設置しよう、というお話をしたいと思います。

faviconとWebクリップアイコンの設置

近年Web制作の現場では、SassのようなCSSプリプロセッサを使用したり、スライスした画像を圧縮したり、スプライト画像を生成したりという作業を行うことが多くなってきました。オンラインツールやアプリを使用し手作業で変換作業を行うこともできますが、どうしても手間と時間がかかってしまいます。そのような煩雑な作業のサポートを自動的・機械的に行ってくれるのがビルドツールです。その中でも、最近よく耳にするgulp.jsをご紹介します。

Web制作の効率化にgulp.jsを導入しよう

スマートフォンサイトで見かける「ドロワーメニュー」は、メニューボタンを押すとサイドメニューが引き出し（ドロワー）のように出現するメニューです。
JavaScriptのプラグインを用いて実装する方法もありますが、挙動が安定しなかったり、ファイルサイズが重くなってしまう場合があります。
今回はCSS3と最小限のJavaScriptの設定で、ドロワーメニューを実装する方法を紹介します。

スマホでドロワーメニューを実装する方法

JavaScriptを使用せず、CSS3のみで簡単なアニメーション効果を付与する方法をご紹介します。

CSS3で作るアニメーション

営業日やイベント情報の登録が可能なカレンダーを、Excelの機能を利用して更新する仕組みをご紹介します。

Excelで更新できる営業日カレンダー

最近は便利なCSSジェネレーターが増え、自分でCSSを書かなくても多様な表現が可能になりました。ただ、思い通りの形にならないこともあるので、自分で調整できるよう理解しておくことも大切です。 
そこで今回は、画像を使わずにCSSだけで吹き出しを作る方法をご紹介したいと思います。この方法を理解すれば、吹き出しのカスタマイズが可能になるだけでなく、要素に色々なアクセントを付けることができるようになります。

CSSのborderと疑似要素で吹き出しを作る

CSS3からbackgroundプロパティで背景を複数指定出来るようになりました。 
複数の指定が可能になったことで、ソースコードが簡略化され、管理もしやすく、より効率的にコーディング出来るようになりました。 
今回は、パターン1の可変ボックスとパターン2のボタンを例に、具体的な背景指定の方法をご紹介します。

CSS3で複数の背景を指定する

Modernizr.jsは、ブラウザでHTML5やCSS3の各機能の実装状況やJSの有効／無効を検出・判定してくれるJSプラグインです。 
JavaScriptのUserAgentだけでは判定しづらいCSS3／HTML5の細かいプロパティを確認することができ、その判定結果をclass名で出力してくれるのが便利なポイントです。

Modernizr.jsでCSS3やHTML5を条件分岐

Gitはファイルの変更履歴（バージョン）を管理するシステムの一つです。変更履歴を記録するディレクトリを「リポジトリ」と呼び、そのリポジトリが単一ではなく複数用意できることから「分散型」バージョン管理システムとして注目されています。

「TortoiseGit」のよく使うメニューと概要

中大規模のサイトを構築する場合、お客様と並行して作業を進めたり、社内複数人で1つのファイルを編集するケースもめずらしくありません。 
そのような場合、お互いに最新ファイルを上書きしあって、デグレードしてしまうという問題が発生してしまうこともあります。 
しかし、一点ずつ目視で相違点を確認する方法では、ミスや上書き漏れも多い上、膨大な工数がかかります。 
それらのファイルマージ（統合）に関する様々の問題を解決する方法として、WinMergeというツールをご紹介します。

デグレード回避策として、WinMergeを導入しよう

昨今、スマートデバイスへの対応の一つとしてとてもメジャーになってきているMedia QueriesによるレスポンシブWebデザインですが、同じ情報要素を複数のパターンとしてレイアウトすることに悩まされているデザイナーの方も多いのではないでしょうか。 
今回は、それを解決するちょっとしたテクニックをご紹介します。

レスポンシブWebデザイン テーブル小技

SSIとはServer Side Includeの略でサーバー側に予め組み込まれたコマンドを利用する仕組みのことです。ウェブページで共通の部分（ヘッダーやフッター、メニュー等）などを別ファイルに作成して複数ファイルに取り込ませたり、ファイルサイズや更新日時、環境変数などを表示させたりすることができます。

Coding Methodology