サイト構築 -実装
CSS GridとFlexboxで役立つチートシート、各プロパティの役割がぱっと見てすぐ分かる簡単便利
Post on:2019年9月10日
CSS GridとFlexboxの各プロパティに値を指定した際、それぞれがどのようになるかまとめられた簡単便利なチートシートを紹介します。レイアウトとコードがまとめられたシンプルなチートシートで、あれ何だっけ？ という時 […]
UIデザイン用に最適化されたおすすめのフリーフォント！小さいサイズでもくっきり綺麗で、読みやすい -Inter
Post on:2019年9月9日
以前、当ブログで紹介した「Inter UI」が名を改め、さらにくっきり綺麗に表示されるよう進化したUIデザイン用のフリーフォントを紹介します。 特に、小さい文字サイズと中くらいの文字サイズの読みやすさに重点が置かれており […]
CSSの可能性は無限大！ウゴウゴルーガみたいに文字をジジジと波打つように震わせる -Squigglevision
Post on:2019年9月6日
若い人は知らないかも、、、昔ウゴウゴルーガで見たような、文字をジジジと波打つように震わせるアニメーションを実装するCSS+SVGを紹介します。 この動きの名称は何かなと思って調べてみたら、「Squigglevision」 […]
CSSのメディアクエリには頼らず、コンテンツベースで実装するレイアウトの最近の方法 -Relearn CSS layout
Post on:2019年9月5日
CSSのレイアウトは最近ではFlexboxが主流となり、それまでの考え方や実装方法とは大きく異なります。@mediaのブレイクポイントやハックを使用せず、CSSの性能を活かした、コンテキストに依存しないコンテンツベースで […]
イラストを使わずに、Webページに斜めから俯瞰したアイソメトリックをつくりだすCSSライブラリ -IsometricSass
Post on:2019年9月4日
アイソメトリックの斜めから俯瞰したイラストなどをよく見かけますね。そのアイソメトリックをWebページにつくりだすCSSのライブラリを紹介します。 HTMLは非常にシンプルで、要素をアイソメトリックにしたり、斜めのグリッド […]
HTMLでhtmlタグやheadタグを省略してもいい場合がある、必須ではないHTMLのタグ・属性値のまとめ
Post on:2019年9月3日
<html>や</html>や<head>や</head>がないページを見たことはありませんか？ 開始タグ<html>は最初の内容がコメントでなければ省略でき、 […]
これはすごい！形やカラーをアニメーションで変えられる、コードによって作成されたフリーフォント -Leon Sans
Post on:2019年9月2日
フォントでいろいろなデザイン、表現をしたい人にぴったりなLeon Sansを紹介します。フォントを書くアニメーションだけでなく、さまざまなアニメーション、エフェクト、シェイプを自由に作成でき、インスピレーションが刺激され […]
line-clampプロパティの効果的な実装方法、CSSで文末を3点リーダーで省略表示する
Post on:2019年8月30日
テキストを省略表示する際に、文末を3点リーダーにするline-clampプロパティの効果的な実装方法を紹介します。数行のスタイルシートで、簡単に実現できます。 line-clamp
Webページの構成を取得し、ページ全体を把握できるマップを自動生成するスクリプト -pagemap
Post on:2019年8月28日
Webページ内のコンテンツの構成を取得し、ページ全体を把握できるマップを自動生成するスクリプトを紹介します。マップはページ内リンクにも対応しています。 pagemap pagemap -GitHub
入力した時の反応速度が遅いとイライラする！ユーザーインタラクションでどの程度の遅延だと煩わしく感じるか
Post on:2019年8月28日
フォームにテキストを入力した時など、ユーザーインタラクションにおいてどの程度の遅延だと煩わしく感じるかを検証するためのデモサイトを紹介します。 当然きびきびと操作できるのがベストですが、実際にどの程度の遅延が許容範囲なの […]
sponsors
