これならかなり簡単!Bootstrap 3, 4 betaに対応、テンプレートをカスタマイズして利用できる -Bootstrap4 Editor

2017年8月にBootstrap 4はようやくベータ版がリリースされました。
そんなBootstrap 4に早くも対応した、Bootstrapのさまざまなテンプレートを簡単にカスタマイズして利用できるオンラインサービスを紹介します。

Webサイト、ランディングページ、ブログのテンプレートをはじめ、ナビゲーションやカード型コンポーネントなど、さまざまなテンプレートを利用できます。

日本人クリエイターによる国産のツールで、先日Bootstrap 4 betaにも対応されました。

サイトのキャプチャ

Bootstrap4 Editor

続きを読む

人工知能もついにここまで!ロゴのデザイン、Webサイトのスタイルガイドを作成できるオンラインサービス -Brandmark

今年になって人工知能、AIが取り入れられたWeb制作関連のサービスがどんどんリリースされています。フォントの組み合わせをAIでカラーの組み合わせをAIでサイトのリデザインをAIで、自動化することができ、自分にはない知識を引き出して効率的に作業することができます。

今回紹介するのはサイトのブランド、ロゴやスタイルガイドを数クリックするだけで作成できてしまうオンラインサービスです。そのまま使ってもよし、カスタマイズも可能なので、ベースとしても利用できます。

サイトのキャプチャ

Brandmark

続きを読む

Web制作者が揃えておきたい、macOSのデスクトップ用のGUIが揃った無料のデザイン素材

ユーザーフローを構築する場合でも、Macのインターフェイスを構築する場合でも、現在利用できるデスクトップのGUI素材はほとんど見かけません。

macOSのインターフェイス、Safari, Chromeなどのブラウザに含まれるUI要素をはじめ、メニューバーやドロップダウン、カーソルまで、デスクトップ用のGUIが揃った無料のデザイン素材を紹介します。

サイトのキャプチャ

Desktop Kit -Facebook Design

続きを読む

かっこいいフォント、かわいいフォントが満載!商用でも安心して利用できるフォントとデザイン素材のセット

Webデザインやアプリでも、同人誌やポスターなどの紙でも、動画やプロダクトのデザインでも安心して商用利用できる有料フォント43種類とグラフィック素材13種類、計56種類の総額約100,000円分のセット全部をコリスのビジター限定にプレゼントします。

有料フォントとグラフィック素材をプレゼント

The Irresistible August Bundle

続きを読む

[JS]これなら簡単!シンプルなHTMLで、Masonryレイアウトを実装できる超軽量スクリプト -Macy.js

画像やカード型コンテンツをレンガ状に敷き詰めて配置する、レスポンシブ対応のMasonryレイアウトを簡単に実装できる超軽量(4kb)スクリプトを紹介します。

jQueryやCSSなど、他のファイルは一切不要で、単体で動作します。

デモのキャプチャ

Macy.js
Macy.js -GitHub

続きを読む

こんなにも違う!同じ被写体なのに、アマチュアとプロのカメラマンでどのように違って写真が撮影されるのか

何気ない日常の中でも、別の視点から見ることで、印象が変わります。

同じ被写体をアマチュアとプロのカメラマンで、どのように違って見えて、写真が撮影されるのか、印象的な写真を撮る秘訣を紹介します。

アマチュアとプロはこんなに違う写真

Phillip Haumesser Photography
Amateur Vs. Pro

続きを読む

文字や写真、背景や飾りをかわいくキラキラに仕上げる!ラメやスパンコールのような珍しいデザイン素材

文字や写真に、そして背景や飾りに、簡単に利用できるキラキラのパターンとテクスチャが揃った、珍しいデザイン素材を紹介します。

素材のキャプチャ

続きを読む

[JS]これなら簡単で便利!要素がビューポートに表示されているかを判定できる -Intersection Observer

スクロールした際にヘルプや広告を表示したり、無限スクロールでコンテンツを読み込ませたり、画像の遅延ロードなど、要素がビューポートに表示されているかをトリガーにするのには、なかなか面倒なJavaScriptが必要でした。

例えば、スクロールやサイズ変更のイベントを取得し、getBoundingClientRect()などのDOM APIでビューポートからの相対位置を手動で計算します。

この今までの方法は面倒で非効率的でしたが、主要なブラウザに実装されているIntersectionObserver APIを使用すると、非常に簡単に取得することができます。

要素がビューポートに表示されているかを判定

Intersection Observer comes to Firefox

続きを読む

 1 2 3 4 5 ... 728 729 Next

top of page

©2017 coliss