SVGは、Illustratorで制作する図形のようなベクトルグラフィック形式の一種です。そのためベクトルグラフィックを制作する際に一般的に気をつけなければいけないことは、SVGにも当てはまります。 この記事では、Illustrator CCを使用してSVGを書き出す際にやった方が良いこと、やらない方が良いことについてまとめています。 なお、この記事の内容は 世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書 という書籍のLesson 03の内容を一部抜粋し、この記事用にリライトしたものです。 やったほうがよいこと 曲線のアンカーポイントを減らす ブラシツールで描いた曲線などは、そのままではアンカーポイントがかなり多くなってしまうことがあります。アンカーポイントが多すぎるとファイルサイズも大きくなるのて

いつもお世話になっております。 今回は2019年リリース予定のa-blog cms Ver. 2.10 に搭載予定の「目次作成機能」を一足先にライブラリ化したものを紹介するものになります。 公式ページ GitHub 概要 見出し生成機能を ブログコンテンツ や マニュアル系コンテンツ などで使用したいと、多くの方にご要望をいただいており、 a-blog cms Ver. 2.10 で搭載するために開発することになりました。 ただせっかくなので、a-blog cmsユーザーでない方にも利用していただけるように、オープンソースライブラリとして公開するようにしました。 JavaScriptのライブラリですので、特にCMSなどのシステムに依存はなく、どなたでも簡単に導入していただけれるようになっています。 仕様 文章のアウトラインを ul/ol でマークアップしたものを出力 アウトラインアルゴリズ

2018年も、CSSの進化がすごかったです！ CSSを使ったアニメーションはより快適なものが増え、JavaScriptを使用しないと実装できなかったものがCSSだけで実装できるようになったり、vwやvhやcalc()などを効果的に使用したり、レイアウト、ナビゲーション、カードなどもより洗練されて実装されています。 さまざまな素晴らしいアイデアが取り入れられたスタイルシートを使ったテクニックを紹介します。 各デモはCSSのみで実装されたものもありますが、JavaScript併用もあります。 動作を見るには、「Run Pen」をクリックするか、クリック後に右上「Edit on Codepen」をクリックしてください。 まずは、ダイナミックなアニメーションが楽しいソーラーシステム。動きが斬新で、スライドなどに応用してもよさそうです。ベストビューは、Operaです。

jQueryのmouseoverメソッドとmouseenterメソッドの違い このエントリーはjQuery Advent Calendar 2013の 2日目のエントリーです。(Advent Calendarとは様々なテーマを12/1〜12/25までリレー形式でブログなどに執筆する企画です。) 1日目ではJavaScriptのイベントデリゲートやイベントバブリングについて解説をしたので、それを踏まえて2日目はjQueryのmouseoverメソッドとmouseenterメソッドの違いについて解説します。 mouseoverメソッドとmouseoutメソッド mouseoverメソッドとmouseoutメソッドはその名のとおり、要素のマウスカーソルが乗った場合やマウスカーソルが外れた際に発火するイベントです。次のように記述するとdiv要素にマウスカーソルが乗った際に横幅、高さが200pxに拡

使おう、CSS Grid 第2回 CodeGridの著者一覧：CSS Gridの自動配置で書き直す CodeGridの著者一覧ページはもともとメディアクエリーとFlexboxを用いてレイアウトしていました。それをCSS Gridで書き直してみることに。するとさまざまなメリットが見えてきました。

Adobe MAX Japan 2018の開催に伴い、Creative Cloudの有償メンバー向けに日本語フォント環境がアップデートされました。新作フォント「貂明朝テキスト」、新ゴ・ロダンも含まれた日本語パックなど、CCユーザーは完全無料ですぐに利用できます。 Adobeのフォントはすべて、商用でもクライアントのプロジェクトでも利用できます。ロゴの商標登録、電子書籍への埋め込みなども可です。 ご利用の前に必ず、ライセンスページをご確認ください。 Adobe フォントのライセンス アドビの新作フォント「貂明朝テキスト」 アドビフォントの日本語パック 源ノ角ゴシックのバージョンアップの注意点 アドビの新作フォント「貂明朝テキスト」 まずは、新作フォント。 昨年リリースされた「貂明朝」のより長文に適した本文用のフォントです。 カラーのSVGフォントも含まれており、かわいい貂をはじめ、十二支、太

僕たちが日々の仕事で直面する複雑さはますます増えており、疑問があったとしても、それに対する答えはほとんど理解不能だ。特に、モバイルファーストインデックスの導入を受けて、最適化の取り組みをどこに集中させるべきか分からず、途方に暮れている。 最も重要なのはデスクトップか？ モバイルか？ あるいは、テクノロジ業界を席巻している音声の現象についてはどうか？ ほとんどのことがそうであるように、最も重要な要素はオーディエンスへの配慮だ。人々は1つのデバイスに縛られておらず、最適化戦略も縛られるべきではない。 今回のホワイトボード・フライデーでは、ドクター・ピートがマルチプラットフォームの世界に関する不安を和らげるとともに、タッチポイントではなくジャーニーの最適化の必要性に焦点を当てる。 みんな、こんにちは。Mozのドクター・ピートだ。僕はここのマーケティングサイエンティストで、今日は優秀なみんなのため

[レベル: 上級] SEO と相性がいい Lazyload の実装を解説するドキュメントを Google はデベロッパー向けサイトで公開しました。 3つのアドバイス ドキュメントには3つの指針が書かれています。 1. viewport 内で見えるようにする viewport 内にあるコンテンツは、必ず Google にも見えるようにしておきます（viewport は簡単に言えば、スクリーンに表示される領域）。 つまり、重要なコンテンツが viewport に入ったときは確実に読み込ませます。 IntersectionObserver API と polyfill を実装するように Google は指示しています。 2. 無限スクロールでは paginated loading を使う 無限スクロールを採用している場合は、paginated loading を実装します。 paginated

[レベル: 中級] この記事では、英ブライトンで先月末に参加した BrightonSEO 2018 September のキーノートスピーチをレポートします。 スピーカーは、SparkToro の CEO、Rand Fishkin（ランド・フィッシュキン）氏です。 強調スニペットやナレッジパネル、ローカルリスティングに象徴されるように、現在の SEO は競合サイトだけではなく Google とも僕たちは争わなければなりません。 Fishkin 氏は、将来の SEO に勝利するためのヒントは “検索結果の中” にあると考えています。 検索結果の中にある SEO とは一体どういったものなのでしょうか？ ※鈴木注: 具体例は日本向けに一部アレンジしています。 Google との契約 Google と我々（サイト管理者）はある種の契約を結んできた――我々は無料で Google にサイトを検索結果で

フォームのリセットといえばこれ。 <input type="reset" value="リセット" /> しかしこれは各フォームのデフォルト値に戻すだけで、もともと何か値を持っていた場合、空欄の状態にはなりません。 （とあるフォームにて） そこでjQueryで各フォームを空欄・未選択にできるような処理を書いてみます。 その際、hiddenだけは空欄にしないようにしてみます。 $(".clearForm").bind("click", function(){ $(this.form).find("textarea, :text, select").val("").end().find(":checked").prop("checked", false); }); こんな感じになります。 DEMO ラジオボタン が選択されていても。 なにかチェックされていても。 テキストエリアでも。

[レベル: 中級] ページの表示速度が非常に遅いサイトに対して警告を Google は送っているようです。 遅い表示のページを修正するようにとの Google からの指示 サイトの表示速度が遅いことに対して Search Console から通知を受けったサイト管理者がそのメッセージを Twitter で共有しています。 ########## N E W ##########https://t.co/tz1mlmzyuv ########## P O S T ########## PS New Search Console Warning is weird and informative.🕷️🗺️ pic.twitter.com/MFlI8l21oC — Oliver H.G. Mason 📉 (@ohgm) 2018年10月24日 警告メッセージを読みやすいようにキャプチャを拡大し

イマドキのSEOで押さえておきたい基本知識から最新グーグル情報までを22個まとめてお届けする。グーグルのゲイリー・イリェーシュ氏が、最近のグーグルの変化や検索エンジン最適化のために知っておくべきこととして語ったものだ。 ほかにも、今週も次のようなSEOトピックをまとめてお届けする。どれも良い情報だ。 クロールバジェットを最適化しても、ゴミコンテンツはゴミのまま！最近の頻繁なグーグル順位変動はMFIが原因？noindexページが多いサイトは評価が下がるのかグーグルはHTMLのリンクとJavaScriptのリンクを同じに扱うの？HTTPSサイトをドメイン名移転したら、旧サーバーに証明書は必要？CSSやJavaScriptを頻繁に更新すると、グーグルのレンダリングが難しくなるHTTPSサイトなら防げたはずの仮想通貨マイニングのハイジャック見たものをそのまま検索する未来的機能がグーグルスマホに搭載

JavaScriptで国民の祝日を判定 JavaScriptのnew Dateによる日付の処理をしている際に国民の祝日を判定したいことがあります。 たとえば2018年1月1日(月)のような月〜金の曜日でも祝日の場合は(月)のように赤くするなどの処理です。 JavaScriptにはgetHolidayはない JavaScriptには曜日を数値で取得するgetDayはあるが祝日を取得するgetHolidayのようなものはない。 そのため祝日のデータをあらかじめ用意しておく必要がある。 祝日のデータは自分で作成しない 祝日のデータを自分で作成して判定に使用している人をたまに見かけるが、祝日は毎年変わるしデータを自分で作成するのは手間がかかる。 間違った祝日データを作成してしまう可能性もあるので自作は避けたほうがよい。 内閣府から祝日のデータをダウンロード 内閣府のWebサイトには国民の祝日につい

一昨日こんな記事を書きました。 yoshiko.hatenablog.jp そして今日「WWW WATCH」さんからこんなアンサーエントリを頂きました。 hyper-text.org ありがとうございます！！！感謝です🙏 エントリの中で、テーブルの視覚整形モデルについての仕様にリンクがはられていました。 その中に答えと思われる仕様の記述を見つけて「なるほど！！」って思ったので書いてみます！ Tables in the visual formatting model 日本語訳: 視覚整形モデルにおけるテーブルの扱い この参照すべき仕様の場所が見つけられなかったので教えていただけてとてもありがたいです＞＜ WWW WATCHさんでは、 「table の 'width' と 'height' にパーセンテージ値が指定された場合は、"table wrapper box" 自身ではなく、"tabl

[レベル: 中〜上級] URLにスペース（空白）が含まれる場合、そのスペースはどのように表現したらいいいのでしょうか？ URL中の「スペース」と「%20」、「+」はどれを使っても同じか？ SEOフォーラムに投稿されたこんな質問を引用して、GoogleのJohn Mueller（ジョン・ミューラー）氏がGoogle+で回答を投稿しています。 Should you encode spaces in URLs as “%20”, “+” or as a space (” “)? (the answer is not “no” :-)) I run into this question every now and then, maybe this will help someone get it right too :). TL;DR: use “+” or “%20” in the query-

開発用(作業用)のブランチを切って開発している時に、最新のmaterの更新内容を開発用ブランチに反映したい時がある。 Tortoise-SVNとかだと、確か右クリック→更新みたいなことをすれば、すぐに反映できた気がするが、gitでのやり方をメモしておく。色々調べて実践してみたが、どうやらgit rebase masterをして、git push origin 開発ブランチ名などをすると自分のプルリクエストのcommitの画面に他人のcommitが混ざるみたいだ(3回くらいそういうことをやっちまったので良い加減メモに残す) そのため、GtiHubで自分のプルリクエストのcommitの画面に他人のcommitを混ざらないようにして開発用ブランチにMasterブランチの最新コードを取り込むには以下のようにやれば良さそうだ。 ※ もし、作業途中のものでcommit出来るものがあればcommitして

Googleマップを表示させるには APIキー が必要です。 APIキーを取得する場合は 「Google Cloud Platform」で プロジェクトを作成し、プロジェクト内でAPIキーを作成・請求先アカウントを紐づけるという作業が必要です。 ここでは新しくプロジェクトを作成し、APIキー取得と請求先アカウントの設定方法を紹介します。 「Google Maps Platform の提供を開始 : Google マップのビジネス利用がさらに進化 」 https://developers-jp.googleblog.com/2018/05/google-maps-platform-google.html 「Google Maps Platform」 https://cloud.google.com/maps-platform/ 準備 まず以下のものを用意してください。 ①Googleアカウン