この記事では、2021年に公開された便利なWebオンラインツール・ベスト100個+をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2021年にかけて合計338個の新しいツールやサービスを紹介してきました。 その中でも、特にWebデザイン制作に便利なツールを選りすぐったコレクションで、「無料で利用できるツール」を揃えています。 これらのツールやサービスを活用すれば、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. CSSツール（11個） 2. パターンツール（3個） 3. イラスト系ツール（9個） 4. デザインツール（17個） 5. 配色ツール（7個） 6. グラデーションツール（12個） 7. SVGツール（9個） 8. スクリーンシ

皆さん、プライベートで何か開発していますか？「何か作りたい」という気持ちはあるものの、いまひとつ何から始めたらいいのか分からず、動けないままの人も多いと思います。 そんな皆さんのために、仕事以外にも休日に個人で気軽に何かを作ってみよう！ という企画をスタートします。今回は、OSをインストールしたてのクラウドサーバを、プログラムが実行できるWebサーバとして動かすまでの手順を解説します。 個人で開発するときの実行環境を選ぶ 個人開発ならばクラウドがおすすめ IaaS（Infrastructure as a Service） PaaS（Platform as a Service） SaaS（Software as a Service） クラウドサービスの選び方 IaaSのサービスを選んで、サーバを構築しよう サービスを選ぶ際にチェックしたいポイント IaaSを提供しているサービスの例 アカウン

Bootstrap 4ではそのインストール方法をはじめ、グリッドの単位やレスポンシブ用のclassが変わり、そしてカードやツールチップなどの新しいコンポーネントやレイアウトにFlexboxも利用できるようになりました。 Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点をまとめたリストを紹介します。 How to Migrate from Bootstrap Version 3 to 4 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Bootstrap 4で変わった点 Bootstrapのファイル構造 Bootstrap 4のインストール グリッドシステムのアップデート リセットは、「normalize.css」から「reboot.css」に classの変更とアップデート タイポグラフィ テー

[レベル: 初・中・上級] Googleは、ウェブマスター向けガイドラインを大幅に改定しました。 この記事では、主だった変更点を抽出して解説します。 認識しておきたい変更点が数多くあります。 新しいウェブマスター向けガイドラインの主だった変更点 セクション分け 以前は、次の3つのセクションに大きく分かれていました。 デザインとコンテンツに関するガイドライン 技術に関するガイドライン 品質に関するガイドライン 現在は、2つに分かれています。 一般的なガイドライン 品質に関するガイドライン 内容が減ったわけではなく、「デザインとコンテンツに関するガイドライン」と「技術に関するガイドライン」の2つが、「一般的なガイドライン」にまとめられた感じになっています。 「一般的なガイドライン」はさらに次の3つのサブセクションに分かれています。 Google がページを検出できるよう手助けする Google

こんにちは。sunnyと申します。運用企画チームというところで、サーバ監視運用部隊の運用をやっています。趣味はジョギングでマラソン大会にも出場しますが、一向にスリムになる気配がありません。知ってる方はつまらないけど、知らない方にとって「へー」となりそうな緩めの記事を書きます。よろしくお願いします。 AWSを学ぶ 今日は、AWS初学者にオススメの学習ノウハウのお話です。 何かをきちんと学ぶには本やドキュメントなどを読むという方法が一般的かと思いますが、私はどうも文字が苦手なので（もちろん必要な時は読みますが）、実際に手を動かしたり動画で学べるものが無いかと探しました。それで効果的だと思ったものをまとめましたので、書いていきたいと思います。ちなみに幸いなことに「AWSを勉強したい」と会社に言ったら、AWSのアカウントが貰えました。ありがとうございますありがとうございます。 注意 : AWSは日

プログラミング未経験の非エンジニアのために「Webプログラミングで勉強すべき10のこと」を紹介する記事。未経験からプログラマーに転身した現役エンジニアに話を聞いてまとめました。学ぶとWebサービスを作ることができます。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査 まったくのプログラミング未経験の非エンジニアだと、「いったい何を勉強をすればいいのか」がわからないということもあるでしょう。そこで今回は、現役のエンジニアから、Webプログラミ

ものすごいWordpressテーマが出たなーという事でこちらでもご紹介。北米圏で様々なテンプレート販売を行っている大御所と言えばTemplate Monsterが大御所かと思いますが、ここから（現時点では）究極と言って良いんじゃないかというレベルのWPテンプレート「Monstroid」が登場しました。 今までこのブログでは有料WPテーマの紹介等はしたことが無かったのですが、巷で結構ニュースになっていたのでこちらでも共有させて頂ければと思います。 とにかく、ありとあらゆる機能が実装 驚くべきはその機能面／選択肢の充実度です。145種類に渡るページテンプレート、120を超えるPSDファイル、50を超えるライセンス付きのイメージ画像。 バックアップは勿論、当たり前のようにレスポンシブデザインにも対応し、スキン変更も自由自在、E-Commerce機能にSEO対策済みで、Analytics実装、サー

最近のWebデザインに、ベクターデータの存在は欠かせないものになってきました。 アイコンやロゴなどをSVGで使用したり、Webページやアプリのデザイン・UI設計といった制作のワークフローをベクターで作業している人も増えてきました。 今までPhotoshopでデザインをしていた人には、IllustratorやSketchを使うとそんな事もできるのか！ と目からウロコかもしれません。 IllustratorのWebデザインならではの使い方、Sketchの詳しい使い方を知りたい、SVGの効果的な使い方をマスターしたい、そんなWeb制作者に絶対オススメの一冊を紹介します。 IllustratorやSketchで扱うベクターデータには、マルチデバイス対応のWebデザイン・実装にとって大きなメリットがたくさんあります。

正月休み明けの話を今頃はてなダイアリーに書くのも何ですが、開始時にここで紹介しましたので終了についても書きます。 本当の基礎からのWebアプリケーション入門――Webサーバを作ってみよう http://kmaebashi.com/programmer/webserver/index.html 1年半ほどかかりましたが、一応完結いたしました。1年半のうち1年ほどは放置状態でしたけれども。 上記のリンクを見ていただければわかるように、この記事は、以下のような構成になっています。 TCPサーバ/クライアントを作る Webサーバを作る 落ち穂拾い(その1) 落ち穂拾い(その2) POSTメソッド へなちょこサーブレットコンテナもどき「Henacat」を作る Cookieに対応する セッションに対応する 最初は簡易的なWebサーバを作っていますが、最終的にはへなちょこなサーブレットコンテナHenac

日本版Codeacademyのようなサービス「Progate」「Codeacademy（コードアカデミー）」というオンラインプログラミング学習サイトがありますが「Progate」はまさにCodeacademyを日本向けに作りなおしたようサービスです。 Codeacademyと比べると現在は「HTML」「PHP」「jQuery」の3つのコースしかありませんが、日本語の画面で基本的なHTMLやPHP、jQueryの学習を無料で行うことができます。 「Progate」を開発しているのは東大工学部の学生2人。既にEast Venturesからの支援も受けているようで、まさに「Codeacademy（コードアカデミー）」のエピソードと重なる部分も。（参考：THE BRIDGE） 資料を見るだけでなく、実際に手を動かす演習形式プログラムの学習は手を動かさないと覚えないという点がありますが、「Proga

WordPressには、いくつかのプログラム言語が利用されています。 主に使うものといえば、以下のような言語です。 WordPress関数（PHP） PHP HTML CSS JavaScript（jQuery） ただ、これだけの言語があると、初めてWordpressに触れる人には、覚えるのが大変なのではないかと思います。 というか、ある程度プログラム経験がある僕でも、揮発性の高い脳を利用しているため、全く覚えられません。 ということで今回は、Wordpressで「これどうすればいいんだったっけ？」「あれなんて関数だったっけ？」なんて時に見ると便利なカンニングペーパー（チートシート）の紹介です。 WordPressチートシート WordPressで重要な部分の覚え書きというか、これだけ覚えておけばある程度Wordpressを使えるようになるチートシートです。 日本語版 WordPress

シャワー後の水切りでヘドバンしてたら頸椎を痛めてしまいました。あれは絶対やめた方がいいです。と周囲に広めているたきゃはしです。急に本題ですが今回はPHPで簡単にできるWebスクレイピングをご紹介します。 ◯ Webスクレイピングとは Webサイトからデータを抽出するソフトウェア技術のことです。 RSSやWebAPIが公開されていないサイトからでもデータ抽出が出来るようなイメージです。 早速クローラーの Goutte（グットゥ） を使って紹介していきたいと思います。 Goutte は Symfony や Twig、Pimple等の開発者として知られるFabienが手がける人気ライブラリです。 ◯ インストール

背景 自前のサービスでhttps通信をサポートするには、SSL証明書が必要になります。 自分で使用するだけなら、SSL証明書も自前で作成するいわゆるオレオレ証明書を用いても良いのですが、外部に公開するサービスの場合そうとも行きません。 SSL証明書というと値段が高い印象がありましたが、StartSSLというサービスで無料でSSL証明書の発行を受けられると言うことで試してみました。 StartSSLにユーザー登録する 証明書の発行を行う前に、StartSSLにユーザー登録する必要があります。 StartSSLから、"StartSSL Free (Class1)"を選択します。 Certificate Control Panelを選択。 Sign-upに進みます。 名前、住所、メールアドレスなど 個人情報の登録を行います。 登録したメールアドレスに本人確認のメールが届くので、受信したメールのa

あぁ, 罪だ... 気づいてしまった... 『ドットインストール』と『runstant』の相性の良さに... 先日, 公開した runstant ですがこれは HTML, CSS, JavaScript を編集, 実行できます. ドットインストールにあるWeb系のレッスンは, 大抵この３つを扱えれば事足ります. そしてなんといってもどちらもログイン不要で使うことが出来ます!! これは組み合わせて使うしかないでしょ! 今までにこれほど気軽にプログラミングを実行しながら学べる環境があったでしょうか？ いやなかったです!(あったらコメントください!) これはもう, ごはん×明太子, 牛乳×バームクーヘン, 風呂上がり×ガリガリ君, 夏×TUBE, 原田社長×ベネッセ以来の革命かもしれない... ってことでどう使うかまとめてみました. 参考になれば幸いです. 試しに作ってみた AngularJS

最近よく聞く、、、わけではありませんが、なんとなく自分の中で「Webスクレイピング」について知りたくなったので、ググったりして調べてみました。 「Webスクレイピング」とは Webスクレイピングとは、WebサイトからWebページのHTMLデータを収集して、特定のデータを抽出、整形し直すことである。Webスクレイピングを行うことで、Webページを対象として、あたかもWeb APIを利用しているかのようにデータを効率的に取得・収集することが可能になる。用途の例としては、部分的にコンテンツを取り出して携帯電話向けのコンテンツを生成したり、小見出しの一覧を生成したり、といった使い方あある。Webスクレイピングは様々な手段で実現可能であるが、PHPやPerlといったスクリプト言語を使用して行われることが多い。なお「スクレイピング」（scraping）とは元々「削る」や「こすり落とす」といった意味の英

以前『色々信じられないクオリティでWEBサイトが作れるSquarespaceが結構ヤバイ！』という記事を書かせて貰ったんですが、ここが次はロゴマークすらも手軽に作れるツールを作ったようなので、とりあえずご紹介。 とりあえず、物は試しと作ってみたロゴマークがこちら。 なんか、どっかで見たことある感じになりましたｗ でも、基本操作は非常に分かりやすい。 Squarespace Logo — Squarespace ステップ１．名前入力 とりあえずサイトにアクセスしてロゴの名前となる文字を入力。 ステップ２．ロゴマーク、ロゴタイプ、タグラインを設定 もう見たらわかるレベルのインターフェースですね。 ステップ３．作ったロゴをダウンロード 前画面で、左下の『Save Logo』を押すと上のような画面が表示されるので、低解像度の物であれば即ダウンロード。といってもサイトなんかで使うには十分な解像度だし

Takeharu IgariLei Hau'oli Co., Ltd. ー CTO at Lei Hau'oli Co.,Ltd.

プロジェクトマネジメントに挑戦！ 一昨日から自分のプロジェクトを立ち上げて、そのマネジメントを開始しました！ 見よう見真似の勉強中の身ではありますが、自分の目標とする戦略の遅れが甚だしく、なんとか前に進めるためにプロジェクトマネジメントを導入してみました。 プロジェクトマネジメントのスケジュール作成を模倣する - マネー報道 MoneyReport やったこともないのにプロジェクトマネジメントに挑戦(^_^;) 今晩あたりWBSを書いてみるか?！まずは細かい作業の洗い出しとマイルストーンの設定から(^-^)/ プロジェクトマネジメントのWBSに挑戦してみる！「見える化」できて、かなり良いかも！ - マネー報道 MoneyReport 素人がWBSを書いてみました！ ガントチャートって言うのが正式名称なのかな？ 作業を見える化出来たので良かったです(^_^)v 昨日はガントチャートを書いて、