Macの画像にiPadで書き込める「連係マークアップ」が便利すぎる
Macの画像にiPadで書き込める「連係マークアップ」が便利すぎる Mac上にあるファイルにApple Pencilを使って書き込みたいときに活用できる機能 僕は撮影した写真にApple Pencilで書き込み、アイキャッチ画像として使用する機会が多い。AirDropを使い、MacとiPadでファイルを行き来させることもできるが、「連係マークアップ」を活用すればMacにある画像をiPadから直接書き込むことができる。 本記事では連係マークアップの使い方を解説する。 画像ファイルをQuick Look → 連係マークアップ 連係マークアップを利用したい画像を選択肢、Quick Lookする。右クリックし、表示されるメニューの中にある「クイックアクション」から「マークアップ」を選んでも良い。 Quick Lookし、右上にある「マークアップ」ボタンをクリックする。 マークアップ画面に切り替わる
ReactはウェブやHTMLとは特に関係のないライブラリです - Qiita
みなさんReactやってますか。やってますよね。最近React Native流行ってるし。 んでいきなりなんですが、あのReactとかいうやつ、実は 特にウェブとは関係ないライブラリ なんですよね。ええぇ……。なのでこの記事ではそれについてだらだらと説明したいと思います。 この記事の背景 最近のReact Nativeブームで「React is 何」「React Nativeについて3行で教えてくれ」みたいなアレコレがよく発生するんですが、その際に「Reactはウェブ向けライブラリである」という先入観がだいぶ素直な理解を阻害しているなーと感じました。 「Reactはウェブ向け」って登場初期は全然間違ってなかったんですけど、厳密には2015年には全く違う状況になって、2019年とか2020年になると完全に間違ってると言える状況が発生し出したので、改めて説明させていただこうと思いました。 別に
Vanilla JavaScript and HTML - No frameworks. No libraries. No problem.
Vanilla JavaScript and HTML - No frameworks. No libraries. No problem. Are you using Vue, React, Angular, or Svelte to create web apps? I am, and if you are too, I bet it's been a while since you've written an app that renders content without these fine tools. Armed with only what comes with the browser. Years ago, this is exactly how many of us wrote web apps. While today's tools help abstract th
現役デザイナーが教える！CSSを使った円形サークルの使い方完全ガイド
この記事では、CSSでスタイリングされた円形コンテンツを使うときのポイント、そしてトラブルシューティングを実例サンプルコードと一緒にまとめています。 円形コンテナ、円形サムネイル、サークル型ボタン、円形パスに沿った文字テキストの配置など、かゆいところに手が届くテクニックをマスターしましょう。 サークル円の作成方法について HTMLとCSSで円形を表現する方法はいくつかあり、それぞれ長所と短所があります。ここでは、もっとも一般的なテクニックからマイナーなものまで、実際にウェブサイトで利用したサンプル例を見ていきましょう。 Border Radiusプロパティをつかった方法 もっとも一般的なテクニックは、要素のすべての角を50%に丸める方法です。もっとも手軽に適用でき、各種ブラウザに幅広くサポートされています。プロパティborder-radiusは、境界線や影、要素のタッチ/クリックのターゲッ
【エンジニアも最低限知っておきたい！】構造化データマークアップ入門 - Qiita
こんにちは！エイチーム引越し侍でインハウスSEO担当をしています、@tatechiです。 突然ですが、最近グーグル検索をして、「検索結果がゴージャスになってる！」と思うことはありませんか？ たとえば、「トマトパスタ レシピ」で検索したとき。 検索結果にトマトパスタの写真が出ていて、サイト名にアクセスしなくてもどんなトマトパスタを作るためのレシピがわかるようになっています。 「少し前はタイトルとディスクリプションしか出ていなかったのに…」と思うと、めちゃくちゃ豪華な検索結果になりましたよね？！ このゴージャスな検索結果のことをその名の通りリッチリザルトといいます。 これは全部、構造化データマークアップのおかげです そして近年、SEO界隈ではこの構造化データマークアップが盛り上がっています…！ 今回はエンジニアが最低限知っておくべき構造化データマークアップの基礎を紹介します。 検索エンジンのト
2019年のSEOまとめ | SEO対策の森
2019年にSEOで成功するため方法を書きました。 参考：SEO予測記事 2021年のSEOまとめ 2020年後半のSEOまとめ 2020年前半のSEOまとめ 2018年のSEOまとめ SEOを集客の柱とすべき？ これからSEOを頑張って遅くないか？ 2019年に効果的なSEOのやり方とは？ と言った辺りにスポットライトを当てていきます。 全体的に「考え方」に寄った内容なので、具体的な手法は調べるか、ご質問をコメント頂ければと！ 2019年のSEOで注力しておきたい事2019年も従来通りでOKまず断言しておくと2019年のSEOの柱は、大抵の人にとっては従来通りで十分です。 被リンクの獲得サイト/著者のブランド化サイト設計/記事設計これだけをきちんと考えてやっていきましょう。 2019年のSEOでもそこそこ問題無く戦えるはずです。 むしろ向こう数年はこの手法がずーっと通用するはずです。 こ
2018年9月の、これだけは押さえておきたいWeb関連の動き | Stocker.jp / diary
Webニュース 2018年9月の、これだけは押さえておきたいWeb関連の動き Monday, October 1st, 2018 「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン 追従ヘッダー実装時に使える動作・デザインパターン例 | NxWorld 追従ヘッダーも一般的になってきましたが、こうやって見るといろいろなパターンがありますね。 Adobe macOS Mojave（10.14）対応状況 | Adobe Community 現在、Creative Cloudの最新版とMojave 10.14の互換性があることを確認しております。 と書いてありますが、実際はPhotoshop CCの動作に問題が生じているようです。 また、外観をダー
【東京のWeb制作会社編】WebクリエイターをうならせたWebサイト13選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ 株式会社LIGでWebディレクターのアシスタントとして修行中のきくりんです！ 「一流になるには、一流を知る必要がある」と、どこかで誰かが言っていた気がします。一流のWebディレクターを目指して、グッときたサイトは、なぜグッときたのかも考えながらインプットするよう心がけているのですが、そんななかでふと気になったことが。 「現場経験も長い先輩クリエイターたちはどんなサイトにグッときて、どんな着眼点で見ているんだろう？」 「Web業界でディレクターとして働く身として、他の制作会社さんのどこがどうすごいのかを知っておくべきでは？」 そこで、現場で働くLIGの先輩クリエイターに、グッときたサイトと、どういうところにグッときたのか、そのサイトを制作した会社も含めてアンケートをとって、まとめてみることにしました。 今回は東京にあるWeb制作会社編です！ 見やすくするため、サイトのタイプを
「世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書」という本を書きました | Stocker.jp / diary
Webデザイン 「世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書」という本を書きました Tuesday, September 25th, 2018 タイトルのとおりですが「世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書」という書籍を書きました。 この本は技術評論社から出版されているシリーズもので、私1人の単著ではなく、4人の著者による共著となっております。 Amazonで予約受付中: 世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書 著者は、渋谷で「スマートフォン時代のWebデザインスクール」や「スマートフォン時代のWebコーディングスクール」をやっている私（庄崎）のほかに、Adobe MAX Japanに登壇する黒野さんと森さん、デザイ
HTML要素からHTTP/2優先度を指定する Priority Hints が動いた - ASnoKaze blog
HTTP/2にはクライアントからHTTPリクエストの優先度を指定することができる。サーバはその優先度に基づいてHTTPレスポンスを返す(無視しても良い)。 一般的にはブラウザ自身が判断し、ページのレンダリングを早くするためにCSSなどは優先度を高く、画像は優先度を低く設定している。 一方で、Webサイトを作る側としては、最初に表示される領域(Above the fold)の画像を優先度高くしてほしいと行ったこともあるだろう。 そこで、HTMLからリクエストの優先度を指示できる「Priority Hints」という仕様の標準化が進められている。 例 すでに、Chrome Canary (71)で動作するようなので試す。 importanceに"high"や"low"を指定する <img src="img/1.png" importance="high"> <img src="img/2.pn
Microsoftが「Sketch 2 Code」を公開！AIが、手書きのワイヤーフレームをHTMLに自動変換してくれる新時代に。これはすごい！！｜榊原昌彦
Microsoftが「Sketch 2 Code」を公開！AIが、手書きのワイヤーフレームをHTMLに自動変換してくれる新時代に。これはすごい！！ 流れてきたツイートをみて「なんだこのデモは」といろいろ見てみたところ、Microsoft AI labがすごい技術を公開していたので簡単にまとめます。どういう技術かというと「手書きのワイヤーフレームを適切に修正してHTMLに自動変換」してくれます。 Kabel, Spike Techniques, Microsoftが2018年8月末に公開したSketch 2 Codeというライブラリです。GitHub（ https://github.com/Microsoft/ailab/tree/master/Sketch2Code ）で公開されているので、確認することができます。行っている処理は以下の通り。 1. ユーザはWebに画像（手書きワイヤーフレ
Web制作の参考になるデザインや技術のアイデアがいっぱい！クリエイターの素晴らしいポートフォリオのまとめ
最近のポートフォリオは、デザイン的にも技術的にもどんどん進化しています。JavaScriptのアプリ、WordPress、スタティックなど、さまざまなプラットフォームでデザイン・構築されたポートフォリオサイトを紹介します。
【保存版】Googleの検索順位にも影響があるSEOの基本チェックシート42項目を公開【PDF付き】｜ferret [フェレット]
SEOの効果をあげるためには、やることが多く、慣れていないと考慮漏れが起きてしまいがちです。そこで今回はSEOの基本チェックシートを作成しました。 PDFで無料ダウンロードできるようにしたため、誰でも活用できます。 記事としても項目を記載しますが、項目の説明に関しては資料（PDF）に記載してあり、こちらを読んでいただくと内容が分かるかと思います。 キーワードに関するチェックリスト 検索数の多いキーワードを選んでいるか（同じ意味のキーワードの場合） 自社サイトで提供できる価値にマッチするキーワードを選んでいるか サジェストキーワードをチェックしているか 競合サイトの流入キーワードをチェックしているか コンテンツに関するチェックリスト コンテンツ内容はオリジナルかどうか ページ類似率が高くないか 見出しは内容が分かりやすくなっているか 不自然にSEOキーワードが頻出してい
![【保存版】Googleの検索順位にも影響があるSEOの基本チェックシート42項目を公開【PDF付き】｜ferret [フェレット]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a11b4878b7d0fb24e5503fb37bfe45883cc7c73f/height=288;version=1;width=512/https%3A%2F%2Fferret.akamaized.net%2Fuploads%2Farticle%2F10460%2Fog_image%2Fdefault-4fa8a0465df283d07a68b82c71ad4f20.png)
HTML, CSS, JavaScript それぞれのロード時間が First Paint に与える影響を検証して整理する - Qiita
HTML, CSS, JavaScript それぞれのロード時間が First Paint に与える影響を検証して整理するHTMLCSSJavaScriptGo tl;dr First Paint はウェブページの何らかが描画されたタイミングのこと。これが遅いということは、初回の真っ白な状態が長いということ。 First Paint は Chrome Developer Tool の Audit で簡単に確認できる。 HTML は描画の起点になるので、ロード時間はそのまま First Paint Timing の遅延になる。 CSS は描画に必須なので ロード時間はそのまま First Paint Timing の遅延になる。 JavaScript は同期で読み込むと、ロード時間がそのまま First Paint Timing の遅延になる。 JavaScript は非同期で読み込むと、ロ
いろいろな用途に使えるバージョン管理ツール「universions」がすごい
バージョン管理をすることで、過去の制作物と比較しながら作業を遂行することができるので、Gitをはじめとしたバージョン管理システムは、エンジニアの必須環境となっています。 一方、Webクリエイターの中には、黒い画面にUNIXコマンドを打ち込むのに苦手意識がある方もいるでしょう。バージョン管理をしたいけれど、従来のバージョン管理システムでは難しいと感じている方もいるはずです。そこでオススメなのが、*コラボレーションツール「universions」*です。 そこで今回は、*いろんな用途に使えるバージョン管理ツール「universions」*の概要や使い方をご紹介します。内製のHTMLサイトも、WordPressサイトも簡単に設定できるので、ぜひ使い方を学んでみましょう。 universionsは、*「Webクリエイターのためのファイル管理コラボレーションツール」*を標榜している、直感的に使えるバ
リア充の俺がWeb制作会社に入社してみたら上司の言葉も異世界だった件。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
8888（パチパチパチパチ） どうも、ありがとうございます！ ご好評頂いた皆様に感謝です！ ということで、このシリーズに味をしめた僕は、引き続きオフィスにて飛び交う様々な異世界の言葉に耳を傾けていたところ、「ZIMA、この件について、メンバーにケーティーしておいて！」と上司から指示を受け、勢いで「承知です！」と返答したのですが…… ケーティー？……KT？……コムロテツヤ？ なんすか、その業界用語みたいな意味不明な言葉は……！？ なんてふざけている場合ではない！ 上司からの依頼だし、このままでは、案件に支障が出かねないので、マジで調べないと今度はおれの首が危ない！！！ ということで、上司の使う異世界の言葉を真面目に学んでおこうと思います！ ＊言葉の引用元はみんな大好き：Wikipedia いつもありがとう：Weblio あなたのとなりに：goo辞書 LIGの上司が使うスマートな言葉 KT K
React Component 視点でのアトミックデザインの解釈といくつかの疑問 - mizchi's blog
フロントエンドの中でも、JS書くプログラマと、CSSを書くマークアップと、デザインカンプを作るデザイナで、コンポーネントという概念がズレる。だいたいこれらが一人だったり兼任だったりで1~2レイヤーの開発ステップになるが、完全分業だったり人が多くなると混乱の元になる。 誰かが決定的に間違ってるというつもりはない。正直、どっちかというと本来のデザイナ側の用語定義に倒した方がいい気がしているが、プログラム上の都合もいろいろ混ざってきて、話が簡単ではない。 自分の理解が間違ってる可能性もある。この記事はレビューをもらうために書いている側面もあり、指摘されたら追記していく。 読んだもの。 Atomic DesignとCSS設計 - Atomic Designとは何か | CodeGrid Atomic Designの考え方と利点・欠点 – wkr. Atomic Design の大雑把な理解 基本的
コーディングのスピードを上げる為の6つの方法
2017年7月25日 Webサイト制作, 便利ツール 今より少しでもコーディングを早くできれば、細かいデザインや機能にも時間をかけて取り組めそう…という事で今回はコーディングのスピードを上げるためにできる事を紹介します。便利なツールを使ったり、ちょっとやり方を変えるだけでより早くコーディングができるようになると思います！ ↑私が10年以上利用している会計ソフト！ 1. コーディング手順を簡略化する これは自分のコーディング能力を高めて手順を省く、便利なツールを使って手間を省くという事です。例えば私は昔このような手順でコーディングを進めていました。 CSSのレイアウトをノートに書き出す レイアウト部分（ヘッダー・メイン・サイド・フッター）のHTMLマークアップ CSSでレイアウト部分のスタイリング 表示確認 うまく表示できない箇所の修正 ヘッダー内のHTMLマークアップ CSSでヘッダー内の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Fonts正式版に日本語がやってきた！ | バシャログ。
今が絶好の買い時！Web制作・ディレクション、創作同人作家関連のKindle本が50%オフ以上の特大セールを開催中
