【2023年】Web制作で使えるVSCodeオススメ拡張機能17選！ - PENGIN BLOG
この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。（個人運営ブログ：https://daib-log.com/ ） 今回はVSCodeで使っている拡張機能を紹介します。 他記事では利用シーンや用途分けがされてないことも多く、とりあえず入れてみたもののどんな機能だったのか忘れた、、、なんてこともよくあると思うので、この記事ではザックリと用途別にカテゴリ分けしています。 基本的には紹介する拡張機能全て入れてしまってもいいとは思うんですが、個人的な優先度を星マークでつけています。導入する順番の参考にしてみてください！
デザイナーとフロントエンドエンジニアに知ってほしいWebのフォント周りのお話
こんにちは。TAK(@tak_dcxi)です。 今回記事にするのはタイトル通り「デザイナーとフロントエンドエンジニアに知ってほしいWebのフォント周り」についてです。以前ツイートしましたが、特に説明もなかったので自分の備忘録も兼ねて。 Androidに明朝体は無い Apple製品しか利用しないデザイナーの方に話したら非常に驚かれるのですが、Androidにはデフォルトで明朝体は入っていないです。 よく明朝体マシマシのデザインを見かけたりするのですが、デバイスフォントだけではAndroidでそのデザインを実現することは不可能だと思っておいたほうが良いでしょう。 ただ、明朝体のWebフォントを利用すればAndroidでも明朝体は表示できるので、デザイン的に明朝体が必須って場合はWebフォントを利用しない手は無いと思います。 個人的見解ですが、デザイン重視なら明朝体はGoogle FontsでN
Google for Jobs対応 求人情報構造化データ JobPostingおさらい
Blog Google for Jobs対応 求人情報構造化データ JobPostingおさらい 2019.01.19 2018.12.30 2019年1月、日本においてもGoogleの検索で仕事や転職に関連したキーワードを入れると、広告と一般の検索結果の間(エンリッチ)に求人情報を表示するGoogle for Jobs(グーグル・フォー・ジョブズ)のサービスがローンチされます。本記事では、求人情報がGoogle for Jobs に掲載できるようになる求人構造化データ(JobPosting)について解説していきます。 Google for Jobsは17年6月にアメリカでリリースされたGoogleの求人情報サービス。アメリカを皮切りに世界100カ国近くの国で、中小企業が運営するWebサイトから、何千何万ものリストが掲載されている求人サイトまでWeb上の膨大な求人情報がまとめられている。
【採用担当必見】Google for Jobsに求人情報を掲載するための方法 | 採用サイト作成・採用ページ制作｜採用Webマーケティングはindeed広告代理店 ネットオン－neton
Googleしごと検索（Google for jobs）とは？ Googleしごと検索（Google for jobs）は、Googleの検索エンジン上で求人や転職などの求人情報を探していると想定されるキーワードで検索された際に、検索エンジンのTOPにあらゆる求人情報が表示される機能です。 次の画像は、Googleしごと検索（Google for jobs）により表示された求人です。 Googleは全世界のあらゆるWebサイトをクロールして、ユーザーが求める情報を検索エンジン上に表示していることはご存知の方が多いかと思います。 そしてGoogleしごと検索（Google for jobs）は、このGoogleのクローラーを活用して求人情報を読み込み、AIやディープラーニング技術をもとに検索ユーザーに最適な求人情報を表示することができます。 特徴の違いはありますが、GoogleでもIndee
ブログにあらゆる外部コンテンツを埋め込めるWebサービス「Iframely」の使い方 | Takumon Blog
なにこれ SNSのコンテンツ、動画といった外部コンテンツを自分のブログに載せる場合、 単純にリンクを張り付けるよりも、以下のようにHTMLの埋め込みコードを張り付けたほうがビジュアル面で効果的です。 ただTwitterやYouTubeなどの埋め込み対応サイトでも、サイトごとに埋め込みコードを取得する方法が異なるため結構めんどくさかったりします。 また埋め込みコードに対応していないサイトも多いのが現状です。 「Iframely」は、そのような問題を一挙に解決してくれるWebサービスです。 実際このブログでもIframelyを使って外部コンテンツを埋め込んでいますが、かなり便利です。 今回は、「Iframelyでどんなことができるか」、**「実際使ってみた感想」などについてご紹介したいと思います。 最後のほうに「GatsbyでIframelyを使う方法」**も紹介しています。 Iframely
Tabulator - これはすごい。HTMLテーブルを高機能に MOONGIFT
テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。 そんな多機能なテーブル表示を実現してくれるのがTabulatorです。多くのニーズを満たしてくれることでしょう。 Tabulatorの使い方 てんこ盛りなデモテーブル。ざっと見てもフィルタ、ページネーション、グラフ表示、ソートなどの機能が確認できます。 インライン編集もサポートされています。 データに合わせて幅を自動調整。 行をクリックして展開する機能。 カラムをグループ化。 カラムを縦に。これはカラムが多い時に便利そうです。 ドリルダウン。 テーブルを入れ子にもできます。 スパークライン表示。 フッターで集計。 HTMLテーブルを変換する機能もあ
ほぼDreamweaverだけでWordPressのテーマ制作をしてる話 | Cherry Pie Web
（2018年11月1日追記：CSSプリプロセッサ―の設定で複数フォルダへの出力方法を追記しました） ※この記事は「WordPress Advent Calendar 2017」の17日目のエントリーです。 2017年の WordPress Advent Calender はQiitaだからか、参加者はプログラマ・エンジニアの方が多いようですね。 私は正直言って半分くらいの記事は内容が全然理解できません・・・私が使ってるWordPressと他の方が使ってるWordPressって本当に同じものなんだろうかと思っています（笑）。 さて、この記事は2017年10月に行った「WordBench京都 in 舞鶴」での私のセッションの後半部分を抜き出して詳しくしたものになります。 WordBenchではDreamweaver愛を語り過ぎましたので、今日は時間が無くなって駆け足になった後半の運用部分を詳し
レスポンシブ Web デザインとイメージマップ（クリッカブル・マップ）
今年も残すところあと数日。 今日が仕事納めというところも多いのではないでしょうか。 気がつけば今月は全然ブログを書いてない。 いかんなぁ〜… ということで最近気づいたことを備忘録を兼ねてメモメモ 〆(._.) レスポンシブ Web デザインでイメージマップを使うとき… このあいだ久しぶりにイメージマップ（クリッカブル・マップ）を使った。 私が関わっている仕事ではあまり使う機会がないんですけど、皆さんはよく使うのでしょうかね？ で、そのイメージマップを使う案件がちょっと前にあったのですが、その時にふと疑問が… その疑問というのは、『レスポンシブ Web デザインだと座標がズレるのでは？』という疑問。 あまりイメージマップを使う機会がないので今まで気がつかなかっただけで、皆さんにとっては周知の事実なのかも知れませんが、ちょっとお付き合いを… 🙂 イメージマップは、画像ファイルの左上を原点とし
インターネットが灰色だった時代
別にインターネットが陰鬱だったわけではなく、初期のほとんどのWebブラウザは、なぜかページ背景を灰色で表示していたなあという話
【プログラミング初心者でもOK】WEB自動化ツール「iMacros」が便利すぎる！
大和正直公式ブログ 脱サラ成功を目指す副業サラリーマンの方やインターネットビジネスに挑戦している方へ大和正直の思考や経験に基づいた有益な情報を厳選してシェアしています。 「iMacros」はGoogle ChromeやFirefox、IEに対応した無料アドオンで、WEB上の操作をプログラミングによって自動操作することができる便利なツールです。 当ブログでは基本的にGoogle Chromeをベースにご紹介していくスタンスですが、今回のiMacrosは自動操作の特性上、僕が普段使っているGoogle Chromeとの競合操作を避けるためにFirefoxを使っていきたいと思います。 アドオンのダウンロード：iMacros for Firefox iMacrosで何が出来るのか？ iMacrosはブラウザ上でのWEB操作を自動化することができるツールです。 ということは、普段のパソコン操作を思い
Chromeが自動提案！Webパフォーマンス最適化 (1/2)
Web制作の「時短」に役立つChromeデベロッパーツールの活用法を紹介する本連載。第6回は、「Network」パネル、「Timeline」パネル、「Audits」パネルでWebページを高速化する方法を説明します。 KISSmetricsの調査によると、ECサイトではページの読み込みが1秒遅れると、CVRが7%下がります。今回は、ページ表示を高速化するために、Chromeデベロッパーツールでページの読み込みが遅い要因を3つの方法で調査します。 HTTPリクエスト数を疑う ページ表示が遅い原因の一つは「HTTPリクエスト数」です。 HTTPリクエストとは、クライアントからサーバーへの要求のことです。たとえば、画像を表示するとき、クライアントからサーバーに「この画像が欲しい」と要求し、サーバーが画像ファイルを送信するやりとりをHTTPリクエスト、その回数をHTTPリクエスト数と呼びます。 画像
分かりやすいWeb入力フォームのための十戒 | POSTD
1. 各々の入力欄に、常に見えて分かりやすいラベルを付けよ 記入する前の入力欄にだけ、フォームのラベルを表示するのがWebデザインの主流になっています。これはユーザネームやパスワードなどを入力する際にはシンプルで使い勝手がいいのですが、それ以上に長い文字列になると少々勝手が悪くなります。 そのため余白があるのであれば、ラベルを表示すべきです 特に、長いフォームの場合では、ユーザは入力したものを見直すでしょう。どのラベルが入力欄と合致するのか分からなければ、間違いがないよう見直すことなどできるはずがありません。 改善前:入力欄中にラベルが記入してあります。今は見やすいかもしれません。 しかしフォームに入力するとラベルが見えなくなってしまい、間違いを見つけにくくなってしまいます。 改善後:それぞれの入力欄に、クリアでいつでも見えるラベルを付けましょう。 2. 十分な大きさのフォントを使用せよ
約４ヶ月「小手先のテクニック」を捨てコンテンツ制作をしてみた感想 - ou’s diary
どうも。王連 (@seo_ou) | Twitterと申します。 ３名の小さな会社組織でアフィリサイトを作って生計を立てている者です。今までＳＥＯで上位をとるテクニックばかりに力を注いでいましたが、今回、巷で言われている小手先のテクニックなどを捨てコンテンツ制作と向き合ってみました。 着手から約４ヶ月、一通り形になりましたので、「サイトの紹介」「制作過程」をご紹介したいと思います。 作ったサイトと概要 ＜今回作ったサイト＞ nurse-colors.jp ＜制作期間＞ 下準備：６カ月くらいふんわりと企画 着手：2014年12月中旬 公開：2015年 4月16日 ＜サイトのコンセプト＞ 「看護師の声を可視化する」 現場の看護師の声を重要視しＷＥＢ上で可視化するというのが大きなコンセプトです。 今のところ「読み物コンテンツ」と「看護師の転職方法をリサーチしたコンテンツ」があります。今後は、地方
制作ガイドライン
本ガイドラインは、バーンワークス株式会社が行う Web サイト制作全般においての品質を保持するために定めたものである。当社は本ガイドラインに基づいた制作を行い、クライアントに対して常に安定した品質のサービス、及び納品物を提供する。 Last modified 2023-10-18 ディレクターはクライアントから指定の Web サイト要件を満たし、Web サイトのビジネスゴールを達成するため、適切な情報提供、提案を行う、また Web サイトの情報設計からプロジェクトの進行管理、プロジェクトメンバーの業務管理、納品物の品質管理を適切に行うものとする。 ディレクターはクライアントを含めプロジェクトメンバー間でのコミュニケーションを積極的に取ることで円滑なプロジェクト進行を心がける。また、クライアントに対しては進捗の報告、情報共有を適時、および明確に行い、信頼関係の構築に努める。 新規 Web サ
Webサイト＆WebアプリのRetina対応方法まとめ
こんにちは。 会社からMacBookPro Retinaディスプレイモデルを支給されました浅海です。 Retinaディスプレイ、非常に快適なのですが、Retinaディスプレイに最適化されていないWebページやアプリケーションでは、ビクセルベースで作られている部分がすこしぼけたように見えてしまいます。 特に文字を画像にしている場合なんかは、かなり気になります。 Retinaディスプレイは既にiPhoneで使われているほか、一部のAndroidもRetina相当の解像度を持っているモデルが登場しており、モバイルWebサイトやWebアプリがRetinaディスプレイを意識した作りになっていることはよく見られるようになりました。 これからもPCなど、Retinaディスプレイ対応のニーズは増えるだろうと思い、対応方法をまとめました。 目次 imgタグ CSS JavaScript Google Map
無料のSSL証明書StartSSLを活用する - Qiita
背景 自前のサービスでhttps通信をサポートするには、SSL証明書が必要になります。 自分で使用するだけなら、SSL証明書も自前で作成するいわゆるオレオレ証明書を用いても良いのですが、外部に公開するサービスの場合そうとも行きません。 SSL証明書というと値段が高い印象がありましたが、StartSSLというサービスで無料でSSL証明書の発行を受けられると言うことで試してみました。 StartSSLにユーザー登録する 証明書の発行を行う前に、StartSSLにユーザー登録する必要があります。 StartSSLから、"StartSSL Free (Class1)"を選択します。 Certificate Control Panelを選択。 Sign-upに進みます。 名前、住所、メールアドレスなど 個人情報の登録を行います。 登録したメールアドレスに本人確認のメールが届くので、受信したメールのa
金の亡者(ほぼ犯罪者)がWEBサービスを滅ぼしていく｜More Access! More Fun!
この間のエントリー 情報商材を１回買うと骨までしゃぶられるの巻 で書いたアフィリエイト・ジャパンっていう情報商材の名簿販売のスパムが超ウザイ。３人限定のはずが、３時間に１回くらい同じ物を送ってくる。すでに億単位で配信してるんじゃないかと思う。完全に犯罪であるが送信サーバがドイツ。クレーム入れても返答もない。 ドメインの所有者調べるとタカノヒデキってなってるがカード決済してるはずだから本名かも。誰か絞め落としてください。お願いします。 こんな感じでインターネットのリソースは、金に目のくらんだ世界中の犯罪者によって大きなダメージを喰らっている。メールに限らず素晴らしいWEBサービスも欲ボケした犯罪者によってダメにされる。 ◆mixiが廃れたそもそもの発端は、出会い業者の暗躍によって青少年保護の見地から足跡機能を廃止した(わざと足跡付けて釣る)ことから始まった。 ◆Facebookも同様。出会い
WebページをRetina対応させるテクニック～実践編
WebページをRetina対応させるテクニック～実践編：jQuery×HTML5×CSS3を真面目に勉強（5）（1/3 ページ） 前回のWebにおけるピクセルの基本的な話を踏まえ、今回はRetinaディスプレイをはじめとした高精細ディスプレイにWebページを対応させるテクニックを紹介する。 前回（WebページをRetina対応させるテクニック～基礎知識編）はWebにおけるピクセルの基本的な話をしました。今回はそれを踏まえた上で、Retinaディスプレイをはじめとした高精細ディスプレイにWebページを対応させるテクニックを紹介します。 CSS Spriteで複数の解像度に対応 最も原始的な対応方法です。一般的なPCディスプレイと同じ要領で作成した画像をRetinaディスプレイに使用すると、にじんだように表示されてしまいます。デバイス上では同じサイズでも、使われているピクセル数のタテ・ヨコが2
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GDPRとは？ Web担当者やWebアナリストはどう対処すればいい？ | 知っておきたい法律関係
「Yaku Han JP」で“約物”を半角に | Swings
