イラスト作成もOK！ベクター素材を無料ダウンロードできるWebサイト厳選22個まとめ
無料で利用できるベクター素材は、制作時間のかかりそうなイラストやパーツなどを手軽に利用できる、グラフィックデザインでも重宝するアイテムです。 今回は、さまざまなシーンで利用可能な、高品質なベクター素材を無料ダウンロードできるサイト22個を国内、海外編に分けてご紹介します。 ベクター素材のクオリティが高いのはもちろん、商用利用にも対応したフリー素材が数多く公開されています。制作時間が短縮したいというときにいかがでしょう。 デザイン力で勝負する！ベクター素材を無料ダウンロードできるWebサイト厳選22個まとめ 海外編（全12サイト） unDraw デザイン性の高さだけでなく、豊富なジャンルを網羅したスタイリッシュなベクターイラストを多数公開しています。すべてのイラストのタッチが統一されているので使いやすく、その場で配色を変更、確認することも可能。 Humaaans 着せ替え人形感覚で、人間のイ
2024年に最適なfont-familyの書き方 - ICS MEDIA
ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
【Webエンジニアど素人から３年生ぐらいになるまでに読むと良い本】を段階的にまとめた - Qiita
これってなんなの？ 【ど素人状態＝社会人になって初めてプログラミングを勉強したぜ！（特に新卒）】〜【Webエンジニアの３年生ぐらい】になるまでに読むと良い本まとめです。「どんな目的で学ぶか？」*「いつぐらいまでに読むといいか？」を段階的にまとめました。「これだけ読めばいい！」と、そんな簡単な話ではありませんが、「今いるレベルより少し上の人がどんなジャンルのことを学んでんだろ？」という方の参考になれば嬉しいです。過去の自分に向けてでもあります、自戒。これからWebエンジニアになる人、なって間もない人の参考になれば幸いですm(__)m ※続編 【Webエンジニアど素人】が【3〜4年生】くらいになったら読むといい本を目的別にまとめた ”Webエンジニアど素人から３年生ぐらいになるまでに読むと良い本”の段階的まとめ（一部外部記事あり） ど素人の方々が手を動かしながら１〜６ヶ月以内に学ぼう！ ◆どの
宮澤テクノロジー@ご当地電力を巡る旅⚡️ on Twitter: "これ秘密にしておきたいくらいのライフハックなんですけど、URLを指定するだけでサイトマップを取得してきてくれる超有能Webアプリがあります。デザインの参考にしたり、要件定義したりするのにめちゃ役立ちます。WIREDをキャプチャして… https://t.co/OnfYM4k0zF"
これ秘密にしておきたいくらいのライフハックなんですけど、URLを指定するだけでサイトマップを取得してきてくれる超有能Webアプリがあります。デザインの参考にしたり、要件定義したりするのにめちゃ役立ちます。WIREDをキャプチャして… https://t.co/OnfYM4k0zF
本当は速くならない「Webサイトの表示高速化アンチパターン」10選｜榊原昌彦
ベストプラクティスや「高速化につながる！」と紹介されている記事では、逆効果、もしくは効果があるシチュエーションがあまりに限定的な手法が紹介されていることが多いので、アンチパターンとして紹介します。 本記事は「Webパフォーマンス Advent Calendar 2019」2日目の記事です。 https://qiita.com/advent-calendar/2019/web_performance 本記事はWebパフォーマンス高速化の専門家である株式会社Spelldataの竹洞 陽一郎氏にアドバイスをもらいました。HTTP/2の伝送の画像など一部資料のご提供もいただいております。誠にありがとうございます。 https://spelldata.co.jp/ ほとんどの場合で間違い 1. すべての画像をCSSスプライトその昔、画像をすべて1枚にまとめて、DOMのbackground-image
知っておきたい！新旧ブラウザの見え方を最適化する「プログレッシブ・エンハンスメント」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
※2016年2月末時点 対象環境って？ OS、ブラウザ、バージョンというものがあり、これらの組み合わせで対象環境を定義します。では、そもそも環境が違うと何が違うのでしょうか。 IE8とChrome最新版で見比べてみる 今回紹介するのは、ここ数年ですっかり定着してきたCSS3という技術を使ったときの、対応しているブラウザと未対応のブラウザでの見え方の比較です。具体的には、CSS3が対応しているChromeの最新版と、対応していないIE8で見たときの違いを紹介していきます。 角を丸くして柔らかさを付ける border-radiusを用いることで、角に丸みをつけることができます。 CSS3未対応だと、ただの四角になります。 要素に影をつけてみる box-shadowを用いることで、要素に影をつけることができます。 CSS3未対応だと、影がつきません。 グラデーションをつけてみる linear-g
すべての新米フロントエンドエンジニアに読んでほしい50の資料 - Qiita
はじめに さいきんのWebはSPA技術を中心としたフロントエンドが賑わっていますね💪 従来サーバーサイドを扱っていた人もフロントを触る機会が増えていたり、これからプログラミングを学んでいく人も、フロントエンド領域に興味を持っているのではと思います。 そこで、フロントエンドの経験が浅い方や初学者向けに、おすすめのドキュメントや勉強すべき領域をまとめました。 とりあえず動けば良い段階から一歩進んで、フロントエンドエンジニアとして、良いアプリケーションを作るために必要な知識を浅く広く紹介します。 ※補足 新米と表記しましたが、実際には新卒や未経験でなく、新卒2~3年目の若手フロントエンドエンジニアやフロント分野に苦手意識のあるバックエンドエンジニアの方を対象としています。 数日で目を通せるような内容ではないため、マイルストーンやスキルセットの一つの参考にして頂けると幸いです。 フロントエンド入
2019年版 最先端のフロントエンド開発者になるために学ぶべきこと - Qiita
こちらの記事は、『Learn to become a modern Frontend Developer in 2019』の和訳になります。 本投稿は転載であり、本記事はこちらになります。 はじめに 新年になって以前書いた記事を少し簡潔にして理解しやすいように書き直してみました。この文章に以前私が書いた文章と違ったことが書いてあったり、少し矛盾する内容が見つかってもあまり気にする必要はありません。 昨年私が書いた記事はGitHubで公開しています。 Web開発は絶えず変化する分野です - 今日私たちがWebサイトを構築する方法は、2～3年前のやり方とは全く違ってきています。利用できるツールが沢山あり、新しいツールも毎日出てくるので、ウェブ開発者はいつもどのツールを使えばよいのか迷ってしまいます。 私は、ウェブ開発に係るフロントエンド、バックエンド、または運用を学びたいと思う人を対象にしたツ
ひとりでWeb制作できた！「知識０から学ぶ」すごいスライドやサイト２７
作成：2013/07/22 更新：2014/11/01 Web制作 > 先日、お客さんのところへ提案にいったところ、「サイトを自分でも作りたいので定期的に講習会を開いて欲しい。Wordしか分からない。」と言われました。とはいっても、自分である程度、継続して勉強しておかないと、受講する人は2回目以降の受講内容を理解出来ないし、教える人も基本知識をしっかり身につけておかないと、質問に答えることもできません。 今回はWeb製作をするなら必ず抑えるべきこと、知識「０」から学ぶ、基本的な知識を習得できるスライド・サービス・サイトをまとめました。ディレクションにもOK。メジャーなもの中心です。とはいえ量が膨大になったので、必要な部分だけピックアップして学びましょう。※スライドがないものに関しては、お役立ちリンクをつけてます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ
リクルートテクノロジーズ エンジニアコース新人研修の内容を公開します！（2019年度版） | Recruit Tech Blog
こんにちは。セキュリティエンジニアの平松です。 毎年、大きな反響を頂いているエンジニアコース新人研修の内容を今年も公開します。 リクルートテクノロジーズの新人研修 リクルートテクノロジーズでは、新卒採用の新人向けに3ヶ月間の技術研修「ブートキャンプ」を実施しています。 新人たちは採用時の応募職種によって振り分けられ、各職種に適した内容のブートキャンプを受講します。 今年のブートキャンプは以下の3つのコースで実施しました。 スタンダードコース：プログラミングやWebサービスの構造の基礎を学び、その後1つのスマホサイトを企画からリリースまで行うコース。 エンジニアコース：現場での技術に即した実践的な内容を学び、その後実際のサービスでチーム開発のOJTを実施するコース。 データサイエンティストコース：現場でのデータ解析の実務に即した実践的な内容を学ぶコース。 本記事では、実際に「エンジニアコース
Visual Studio Codeのうれしい機能を使いこなして、初心者を最速で脱出する！《VSCode実践入門》 - エンジニアHub｜Webエンジニアのキャリアを考える！
エンジニアHub > 記事一覧 > Visual Studio Codeのうれしい機能を使いこなして、初心者を最速で脱出する！《VSCode実践入門》 Visual Studio Codeのうれしい機能を使いこなして、初心者を最速で脱出する！《VSCode実践入門》 VSCodeは初版が2015年リリースの新しいエディタですが、インテリセンス、ユーザースニペット、Emmet、マルチカーソル、拡張機能というコーディングにうれしい機能が充実しています。VSCodeを検討中あるいは使いはじめたばかりの若手エンジニアが、いち早く初心者を脱出するための使いこなし方を解説します。 はじめまして、KC（けーしぃ、@kcpoipoi）と申します。技術書典6にサークル参加してたら「キミ、Web執筆に興味ない？？」とお声がけいただきました。Web執筆は初めてなので至らない点があるかもしれませんが、何卒よろしく
これ知ってる？ Web屋が押さえておきたい海外の便利ツール25選
Webデザイナーや開発者など、Webプロフェッショナルの仕事を支援してくれるWebツール＆サービスを厳選して紹介します。 pCloud、xFive、Themifyなど、選出したツールやサービスの大半は高い評価を得たソリューションで、さらに改良が進められています。Goodie、Codesterなど一部は登場したばかりのものですが、すでにすばらしい仕事ぶりです。 1. pCloud 4年前にローンチされた「pCloud」は、さまざまな機能を持つ安全で優れたストレージプラットホームとしての評価を確立しています。コカコーラ、ペプシ、イケア、LinkedIn、Uberなどの大企業を含む、人・企業が利用しています。pCloudはユーザー数が700万人、管理されている情報は7ペタバイト、ファイル数は13億個と、数字を見てもすばらしいツールです。 pCloudは、すべてのファイルとフォルダーを安全かつ確実
新人Webプログラマの学習が捗るリンク集 - Qiita
はじめに この記事は自分のための備忘録も兼ねた、新人による新人のための新人の教材リンク集です。 新年度になりましたので、少し更新をしました。よろしくおねがいします。 ターゲット この記事はこんな人に向けて書いています。 これからWebプログラマを目指す人 Webプログラマになったばかりの人 コーディングだけでなくデザインやマーケティングにも興味がある人 早く一人前のWebプログラマになりたいと思ってる人 つまりわたしのようなへっぽこのこと 1. コーディングを身につける ▼まずはここから 何から始めて良いかわからない！新しい言語を学びたい！という方に。 ドットインストール https://dotinstall.com/ 動画付きで解説してくれる学習サイト。とにかくカバーしている範囲が広いのも特徴。無料プランでも十分勉強になります。早口ながら丁寧でわかりやすく、時々ちょっと間違える田口先生の
保存版！デザインツールの総まとめ -200種類以上の定番ツールから最近リリースされた注目のツールまで
Webサイト、スマホアプリの制作・開発に携わるすべての人に役立つ、200種類以上の有料・無料のデザインツールを紹介します。 定番ツールから最近リリースされた注目のツールまで、便利なツールが揃っています。 Awesome Design Tools -GitHub 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 アクセシビリティのツール アニメーションのツール AR（拡張現実）のツール コラボレーションのツール カラーピッカーのツール デザインのフィードバックツール デザインのハンドオフツール デザインパターンとインスピレーションのツール デザインシステムのツール デザインをコードにするツール エクスペリエンスのモニタリングツール フォントのツール スクリーンショットのツール アイコンのツール イラストのツール 情報アーキテクチャの
ウェブで美しい文字組みを表現する。-ウェブフォントの文字詰め・文字組み- | das. – 株式会社デジタル・アド・サービス
デザイン ウェブで美しい文字組みを表現する。 -ウェブフォントの文字詰め・文字組み- August 5, 2014 美しく、読みやすい文字とはー 何十年も前の古い書物を手にした時でも、その文字の美しさや存在感に圧倒されることがあります。 経年劣化による印刷のかすれや紙のヤケですら、そこに印刷されている文字の美しさを引き立たせるような本に出会うと、内容がどうであれ、それだけで充分な価値があるように思えてきます。 それを考えると、「文字」を取り巻く技術は進歩しても根本的な美しさの基準や価値はまったく変化していないという事に気づきます。 ことウェブにおいても同様で、縦書き表現なども含めウェブサイトでの文字についてはもう何年も前から議論されてきました。 ひと昔前までは、ウェブサイトでのデザイン要素としての文字は画像で補う、というような常識がありましたが、CSS3の登場以降、そんな常識も崩れてウェブ
デザイナー必見！人気のフォントサブスクサービスまとめ【2021年版】 | Web Design Trends
デザインにおいてフォントは欠かせない要素です。フォントの細かな違いによって、デザインのイメージが変化し、大きな影響を与えます。 しかし、デザインを始めたての方はPCにデフォルトで入っているフォントを使っているという方も多いのではないでしょうか？ 今回は、デザインにとって欠かせない要素であるフォントを定額、もしくは無料で利用することができる人気のフォントサブスクサービスをご紹介したいと思います。 2022年版：おすすめのWebアイコンフォントサービス10選 Webアイコンフォントを利用することで、数千種類のアイコン素材をWebサイト上で簡単に表示することができます。 Webサイト上で多くの画像ファイルを読み込むとページの表示速度に影響してしまいますが、W... Web Design Trends Google Fonts Google Fontsは無料で利用できるGoogleが提供するフォン
WebフォントのCSSとライセンス記載例 - Qiita
何かと便利なWebフォント。でもライセンス周りが心配なので、メジャーそうな以下のライセンスの書き方を整理してみました。 無料で使えるからこそ敬意を払って、ライセンスはちゃんとしたいですよね。 SIL Open Font License (OFL) IPAフォントライセンスv1.0 Apache License 2.0 SIL Open Font License (OFL) /*! * "FontName" licensed under the SIL Open Font License * http://www.hogehoge.com/（配布元のURL） */ @font-face { font-family: 'FontName'; src: url('FontName.eot?') format('oldIE'), url('FontName.woff') format('woff'
こんな便利なのがあったとは！Web制作やビジネスに欠かせない無料ツール・サービス・素材 400+種類 総まとめ
こんな便利なのがあったとは！Web制作やビジネスに欠かせない無料ツール・サービス・素材 400+種類 総まとめ +400 Awesome Free Tools To Build Your Business 5つのジャンルに、Web制作やビジネスに役立つさまざまな無料ツール・無料サービス・無料素材がまとめられています。 Business -ビジネス サイト作成・ロゴ作成・請求書作成・法律文書作成・アイデアのマネジメント・かっこいいドメインなど Marketing -マーケティング ライティングツール・ブログツール・サイト分析・SEO・画像最適化・画像編集加工・マーケティング情報・ソーシャルメディア・カスタマーサービス・A/Bテストなど Design & Code -デザイン・コード デザインの無料素材・カラーや配色ツール・デザインのインスピレーション・写真素材・フォント・アイコン・コードやマ
📃 Webページをそのままの状態でローカルに保存するツールを作った話 - Qiita
はじめまして。yamaimo (@yarnaimodev) です。Qiita 初投稿...というかネット上にちゃんとした記事を上げるの自体初めてな気がします。 1998 年生まれで、プログラミングとか Web デザインは独学で 3 年ぐらいやってます。TypeScript / Firebase / Node.js / React あたりが特に好きです。 この前 coliss で紹介された Can't Unsee を試してみたら 1 回目が 7,630 点、2 回目が 7,930 点でした。1 小規模ですが Mastodon インスタンスを管理してます。あと Helix キーボード をこの前組み立てた2んですがキー配列を変えたのがなかなか覚えられなくて死んでます。 開発環境は基本的に WSL + Hyper + fish shell と VSCode です。 今回 Puppeteer を使っ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Icons - Material Design
