サイト構築 -実装

フォント好きの心をくすぐる素敵なフォント「Futuracha Pro」はデザインするのが楽しくなる!

Post on:2017年6月5日

素敵なフォントに出会えると、とても幸せな気持ちになれます。 先日ようやく本リリースされた「Futuracha Pro」もその一つ。 @colisscomでもつぶやきましたが、改めて記事にして紹介します。 Futurach […]

[JS]スマホにも対応!ページをスクロールした際、要素をアニメーションで表示する軽量スクリプト -t-scroll

Post on:2017年6月5日

スマホやタブレットに対応、もちろんデスクトップにも対応、ページをスクロールした際に、要素にさまざまなアニメーションを簡単に適用できる単体で動作する軽量(4KB)のスクリプトを紹介します。 jQueryなど、他のスクリプト […]

リセット用CSSはもういらない、ブラウザのバージョンに適したスタイルを適用して標準化 -PostCSS Normalize

Post on:2017年6月1日

ブラウザごとに異なるデフォルトのスタイルを整える時、リセット用CSSやノーマライズCSSを使用して、すべてのブラウザに共通のスタイルシートを適用している人が多いと思います。 定義したブラウザのリストに基づいて、norma […]

[CSS] object-fitの使い方: レスポンシブ対応、動画や画像をブラウザいっぱいに表示するCSSのテクニック

Post on:2017年5月31日

HTML内にインラインで配置した動画や画像を、背景画像のようにブラウザいっぱいに表示するCSSのテクニックを紹介します。 レスポンシブに完全対応、スマホでもデスクトップのあらゆるサイズのスクリーンでも最適なサイズで表示さ […]

CSSで面倒なコード、HTML5の新要素やスニペット、FacebookのOGPやTwiterカードなどのコードを生成できるオンラインツール

Post on:2017年5月30日

CSSで面倒なコード、アニメーションやグラデーションやボックスシャドウなど、実装の結果を見ながら値を調整してコードを生成でき、HTML5の新要素やよく使うスニペット、FacebookのOGPやTwitterカードやmic […]

ローディングのアニメーションの次の段階、インターフェイスプレビューに対応するための軽量スタイルシート

Post on:2017年5月29日

Webページやスマホアプリを読み込む際に、ローディングのアニメーションを表示するのをよく見かけます。しかし、最近ではFacebookやSlackなどでインターフェイスプレビューとして、表示される予定のコンテンツをプレース […]

ファミカセ展は見ておかないと!クリエイター達のすごいアイデアとデザインが沢山あって楽しめる!

Post on:2017年5月26日

昔懐かしいファミコンが大好きな日本をはじめ世界のクリエイターが、こんなゲームがあったら、と作成した「わたしのファミカセ展」を紹介します。 突然インド人が右に現れたら、そりゃよけるしかないでしょw わたしのファミカセ展

日本語のフォントを使って、ロゴやタイトルをデザインする時のアイデアとすぐに役立つデザインのテクニック

Post on:2017年5月25日

日本語のフォントを使って、ロゴやタイトルをデザインする時のアイデアとすぐに役立つデザインのテクニックをAdobeから紹介します。 手持ちのフォントに一手間加えるだけで、素敵なデザインに変わります。

[JS]スマホやタブレットにも完全対応!垂直・水平方向にパララックス スクロールさせる軽量スクリプト -paroller.js

Post on:2017年5月24日

ページいっぱいの背景、コンテナいっぱいの背景、要素の背景などを垂直水平方向にパララックスさせるスクリプトを紹介します。 モバイルにも完全対応しており、全体をパララックスさせたり、カード型コンポーネントをずらしながら表示さ […]

紙のサイズのまとめ!A判、B判、新聞や写真や名刺など、250種類以上の紙のサイズが日本・国際規格ですぐ分かる -PaperSizes

Post on:2017年5月24日

Web制作をしていても、紙のサイズが必要な時があります。 A3って何x何mmだっけ? 日本のJIS規格だといくつ? 写真用紙のサイズは? 名刺は日本と世界で違うの? などが分かる、紙のサイズがまとめられたPaperSiz […]

top of page

©2026 coliss