知識がなくても簡単にレスポンシブWEBサイトが作れる


最近、自動化が当たり前になってきていますね。
今回は、そんな知識が無くてもレスポンシブサイトをカンタンに制作できて、webにアップすることのできるサイトを紹介します。

それがこのサイトです。
https://webflow.com/

サイトにアクセスしてユーザー登録してテンプレートを選んでサイトを作成するだけです。とてもカンタンですね。
後から、編集画面でWEBサイトのデザインを編集することができるので、テンプレートだけでなく自分の好みのサイトにカスタマイズできます。

webサイトの開発経験が無くてもデザインを見ながらコーディングできるので非常に便利ですね。

「パスワード管理」

スマホのLINEやSNS、アプリなど、いろいろなサービス利用しているかと思います。サービスを利用するに当たって、必要となるのがユーザーIDとパスワードですよね。
いろいろなサービスを利用しているとたくさんのアカウントとパスワードが必要となります。

個人で10個のウェブサービスを使うのは現代では普通のことで、利用しているサービスが増えるとアカウントやパスワードを管理するのが大変となり、パスワードの使い回しをしている人もいるかと思いますが、アカウントやパスワードの流出すると大変です。

使い回している場合、ひとつが流出してしまうと、ほかのサービスでも乗っ取られてしまう可能性が高くなります。

こんなことにならないように、今回はパスワードの管理ツールについて紹介したいと思います。
それが『1Password』です、ログインIDやアカウントパスワードの管理のみでなく、クレジットカードの情報、ソフトのライセンスなど、さまざまな個人情報を一括管理できます。

ウェブ魚拓


ウェブサイトのアーカイブを記録するためのサービスとして昔から存在している、「ウェブ魚拓」。
2017年でオープンから12年もたっている古いサイトです。
ネットの進化とともに利用ユーザー数を伸ばしてきました。

ウェブ上で公開されたサイトを、アーカイブとして残すことのできることとして、とても便利なサイトになっており、保存したりできるので、いつでも見たいときに見れるようになるので便利ですね。

Googleフォーム

Googleフォーム

フォームを設置してみたいけど、難しいと感じている人もいるかもしれません。
ですが今回は初心者でも簡単に設置することのできるフォームを紹介します。

それはGoogleが提供しているGoogleフォームです。それは、誰でも無料で直感的にフォームを作れるサービスとなっています。アンケート調査に使われることが多いですがお問い合わせフォームとしても使えます。

使い方としては、「Googleフォームを使う」ボタンをクリック→フォームの作成画面→右下の「+」ボタンをクリックして新しいフォームを作成します。

作成が終了すれば、「回答をスプレッドシートに表示」ボタンをクリックすれば自動的に回答内容がスプレッドシートに入力された状態で保存されます。

Googleアカウントさえあれば誰でもカンタンに制作できるので、興味のある方はチャレンジしてみてください。

cssアニメーションをまとめている Animate.css

cssアニメーションをまとめている Animate.css

css3のアニメーションは非常便利でjqueryを使用しなくてもカンタンに実装できるところが非常に魅力的ですね、
今回はそんなcss3を使ったアニメーションをまとめているサイトをご紹介したいと思います。

Animate.cssは、フレームワーク配布サイト、というのでしょうか。
Animate.cssを利用すれば、簡単にアニメーションが加えられて、
どのような動きを加えられるのか、確認しながら、cssを記述できます。

このようなサイトはコーディングの時間短縮や、デザインの参考になるので積極的に利用していきたいですね。

WordPressで活躍するプロパティ

WordPressで活躍するプロパティ

WordPressなどの、ブログ構築サイトなどで、多くのウィジェットを使ったサイト構築を行うことがあります。
そんな時に役に立つのが、containプロパティです。

なぜこのプロパティが役に立つかといいますと、コンテンツや指定されたDOM要素が、ドキュメントツリーの他の場所と独立していることを ブラウザに知らせます。
要するに、containプロパティによって、Webコンポーネント・Reactコンポーネントをたくさん組み込むことで、独立したウィジェットの高さや横幅を、他のDOM要素に影響させずに変更したりすることができます。

プロパティの値には、none、size、layout、style、paint、strict、contentがあります。

マイナーだけど便利なCSSプロパティ

マイナーだけど便利なCSSプロパティ

今回はあまり有名ではありませんが、知っておくと便利なcssプロパティについて紹介をしていきたいともいます。

紹介するのが、font-displayです。

font-displayというプロパティは、Webフォントがブラウザ上で読み込まれる前にどのように処理するかや、読み込みが失敗してしまったときの動作を指定する CSSプロパティです。

ウェブフォントが読み込まれるまで、 なかなか画面が表示されないことがあります。
ページの読み込み速度が遅ければ、 ユーザーはページから離れてしまうため、ユーザビリティが低下してしまいます。

テキストが表示される時間は ブラウザにもよりますが、およそ2秒程度です。
2秒は短い時間かもしれませんが、Webを閲覧している ユーザーにとっては極めて長く感じてしまうものです。

このプロパティには、次の5つの値が用意されています。
auto、block、swap、fallback、optional

特に、swapでは、フォントが読み込まれる間に代替フォントが表示されるので、お勧めです。

TinyPNG

WEBサイトを制作する時に、便利なサービスを活用するととっても役に立つサイトを紹介します。
今回は画像圧縮のツールを紹介したいと思います。

画像を軽くするのは、読み込み速度を早くするだけでなく、ユーザビリティも向上するので、積極的に行っていきたいですね。

そこで紹介するのは、画像関連のツールで、画像の圧縮をしてくれる「TinyPNG」です。

ドラッグとドロップするだけで一度に20枚の画像ファイルを圧縮してzipでダウンロードできます。
1つのファイルのサイズは最大5MBまでのようです。
PNGだけでなく、JPGも対応してくれています。

https://tinypng.com/

Chrome Canary

Chromeには4つのバージョンが存在しています。

Chromeは安定版、開発版、Canary版の3つがあります。開発版には「dev」、Canaryには「canary」がバージョンにつきます。

Chrome Canaryだけが、安定版であるChromeと同じPCにインストールできるようになっております。
なので、開発時のチェックとして使えます(最新のブラウザでWebページがきちんと動作するか、同時にスマホとパソコンの見た目を見たりすることができます)

本実装はされていませんが、検証に利用できる、試験運用的な機能がたくさんあります。
これらの機能は、本機能として実装される可能性もありますが、機能自体が消去されたりします。

検証に便利ではありますが、高確率でバグに遭遇したりすることがあり、描画がうまく表示されないことや、画面が落ちたりなど)。ですが、最新のバージョンで改良されたエンジンや、最新のデザイン、それに最先端のWebのAPIを体感できます。

CSS3ジェネレーター

CSS3をweb制作に取り入れたくても、cssを書くのが難しいと感じるときもあるのではないでしょうか。
そんな場合はCSS3ジェネレーターを利用してみてはどうでしょうか?

視覚的にcssを確認できるので、自分の行いたい調節も簡単にできます。
自分の作りたいデザインを作成して、コピー&ペーストでスタイルシートに貼るだけです。
ジェネレーターを使って、CSS3で制作してみてください。

CSS3 Generator

多くのCSS3のスタイルを作成できます。
数値を指定していくだけで作成できるジェネレーターです。
css3のスタイルのborder-radius, box-shadow, text-shadow, RGBA, @font face, multiple columns, resize, box-sizing, outline, transition, transformを生成できます。