« あとで試す。「時間や予算が少ない時、モックアップが必要な時などに便利です。BootstrapやTailwind CSSが使用されているので、勉強用にもいいですね」。
商用でも完全無料、ランディングページ用のHTMLテンプレートがダウンロードできる -Inovatik | コリス
Category Archives: デザイン / UIUX
画像を扱うプロジェクトに役立つ！CSSフィルタのさまざまなエフェクトをコピペで利用できる無料ツール -FilterSS | コリス
« どこかで使う。「画像に適用するエフェクトを見ながら、そのCSSフィルタのコードをコピペで利用できるオンラインツールを紹介します」。
時短してますか？Web制作が変わる最新オンラインツール38個まとめ – PhotoshopVIP
« 面白そう。「みを：江戸時代のくずし字をAIにより認識し私達が使っている現代の書体に変換できるアプリ」「NFTPort Beta：どんな作品でもNFTアートとして販売することができる」。
CSSの変数（カスタムプロパティ）が期待通りに動作しないときの解決方法 | コリス
« 使ってみよう。「CSSの変数（カスタムプロパティ）は、IEを除くすべてのブラウザでサポートされており、実際のプロジェクトで使用している人も増えてきたと思います」。
日本語フォントがGoogle Fontsに大量追加！すべてのフォントが商用利用も無料のフリーフォントです | コリス
« 日本語フォント、ありがとうございます。「まずは、先週Google Fontsに新しく追加された日本語フォントから。※アップデートされたフォントもたくさんあります」。
CSSの新しいプロパティ「accent-color」が便利！今までできなかったフォーム要素のカラーを簡単に変更できる | コリス
« あとで試す。「CSSの新しいプロパティ「accent-color」は、たった1行のCSSで要素にカラーを適用でき、要素にブランドを組み込む方法を提供」。
アドビ、クラウドベースの映像制作コラボサービス「Frame.io」を約1398億円で買収 – CNET
« Adobeさん、着々。「Premiere Pro、After Effects、Photoshopなどの『Adobe Creative Cloud』アプリケーションにFrame.ioのワークフロー機能を実装」。
「便利な時代になったなあ…」写真からフォントが検索できるアプリが神ツールでは？と話題に – Togetter
« あとで試す。「ちなみに無料アプリ！それとAdobeのアカウントでログインすれば表示したフォントを有効化もできます！便利すぎ。ただし日本語は読み取り難しいです…」。
面倒なWeb制作におさらば！便利すぎる新登場オンラインツール48個まとめ – PhotoshopVIP
« あとで試す。「作業の効率化や時短において、限界を感じているひとにこそ刺さる、知っておきたい最新オンラインツール。面倒な作業もあっという間に終わるだけでなく、どれも無料」。
Twitter、新デザインは「目が痛い、頭痛がする」という苦情を受け修正 「今後もフィードバックを」 – ITmedia
« もめとる。「デザイン変更についてフィードバックしてくれた皆さんに感謝します。すべてについて確認・検討していますので、今後もフィードバックを続けてください」。
和文フリーフォント『IBM Plex Sans JP』リリース！「ウェイトがあっても潰れない」「フトコロが広い」既存フォントとの比較も – Togetter
« なんか好評っぽい感じでバズっとる。「行が荒れず静かで、視認性もけっこう良い気がします」「親しみがあるデザインに向いてそう」。
新しいCSSリセットはシンプルで軽量！CSSの新しい機能を使用したCSSリセット -The New CSS Reset | コリス
« CSSリセット、ありがとうございます。「見慣れないCSSがあるかもしれませんが、IE11を除くすべてのブラウザでサポートされています」。
「舎人ライナーが1位！？」「首都圏の鉄道会社が苦境になるわけだ」全国の鉄道混雑率ランキングが新型コロナウイルスの流行で激変 – Togetter
« 信越線…やと…！？「本数を増やせないってのと元々の定員数が通常の鉄道と違うってのはありますね。地方鉄も元々本数が少なく車両数もない」。
レスポンシブ対応のレイアウトやコンポーネントだけを実装するCSSのシンプルなコードのまとめ -SmolCSS | コリス
« メモ。「CSSの実装は年々進化しており、さまざまなプロジェクトで使用できるシンプルで最小限のコードをまとめたスニペットをアップデートしておくと便利です」。
Web制作に役立つ！面倒なCSSのコードを簡単に生成できる便利ツールをまとめました | コリス
« 便利そうなのでメモ。「CSS GridやFlexboxでレイアウトを確認しながらコードを生成、（中略）面倒なCSSのコードを簡単に生成できる便利ツールを紹介します」。
CSSで上下左右の中央に配置する時の「position: fixed;」での新しい記述方法 | コリス
« 良さげ。「古い記述方法では、負のパーセンテージを使用していたり、あまり直感的ではないCSSでしたが、新しい記述方法ではそれらが解消されています」。
-webkit-text-stroke-widthをアニメーションさせるとたのしい – hitode909の日記
« 老眼が一気に進んだのかと…。「最初CSSアニメーションでやってみたら、かくかく動いていたので、こうしてrequestAnimationFrameで動かしています」。
Webの進化が止まらない、コピペ可な最新HTMLスニペット40個まとめ – PhotoshopVIP
« おじさん、ただただ純粋にびっくりしている。「スニペット（英: Snippet）は、ウェブサイトなどのプログラミングで簡単に切り貼り、再利用できる部品、コンポーネントを指します」。
HTML tableの実装がこれまでと変わる！Googleデベロッパーによる変更点の解説 -TablesNG | コリス
« position:sticky が使えるようになったのね。「最も問題となっていたのは、行でposition:stickyがサポートされていないことでした」。
ピクセルフォントが大好物な人に！第1・第2水準漢字まで収録された商用無料のフリーフォント -マルモニカ | コリス
« 漢字も…やと…！？「JIS第1水準漢字2965字、第2水準漢字3390字が完全収録されています。ライセンスも太っ腹で、商用無料、ゲームやスマホアプリへの埋め込みもOK」。
ブラウザで使える超シンプルなオープンソースのコードエディター「Smart Text Editor」 | かちびと.net
« メモ。「JavaScript/html/cssで書かれていますがコードは全てindex.html内に書かれているので1枚のhtmlファイルだけでコードエディターとして動作」。
2020年用、日本語のフリーフォント417種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 | コリス
« 日本語フォント、ありがとうございます。「Webデザイン、アプリ、動画、紙のデザインをはじめ、クライアントのプロジェクトでも販売する同人誌まで、幅広く利用できる」。
gapの余白指定が便利！gridとflexでできる新しいCSSレイアウト手法 – ICS MEDIA
« おさえておく。「CSSのgapプロパティーは余白を指定できる新しめの手法」「今までmarginプロパティーで要素間の余白を調整していたものもgapプロパティーで柔軟に対応できる場面も」。
新・えきねっとは誰のためのシステムなのか？｜長沢めい｜note
« 激しく自戒を込めて。利用される方の方を見ましょう、という。「切符を売る側の駅員さんの思考パターンに沿ってシステムが作られている気がして、客の動きとか客のニーズを起点に作っていない感じがします」。
本サイトのAMP提供の停止とここまでの振り返り | blog.jxck.io
« AMP、好きやったけどなー。個人的には良い仕組みやったと思おいます。「これはAMPがなぜ始まり、なぜトーンダウンしつつあるのか、そしてこれからどうなっていくのか、という流れをまとめるいい機会でもある」。
どうしてHTML5が廃止されたのか | フューチャー技術ブログ
« おさえておかねば。「HTMLの規格策定はW3Cでなく、WHATWGがつくることになりました。それに伴って、HTML5は廃止され、HTML Living Standardがこれからの主流になったという話」。
CSS Flexboxで実装する時に役立つチートシート、高解像度で印刷して机の脇に貼っておくと便利です | コリス
« 便利そうなのでメモ。ガチのヤツ。「チートシートは高解像度版も無料でダウンロードでき、モニターの壁紙や印刷して机の脇に貼っておいても便利です」。
これなら分かりやすい！Webサイトのデザイン仕様書・指示書の作り方 | コリス
« あとで読む。「ブレイクポイントの説明、スティッキー要素の仕様説明、相対サイズの要素の説明方法、ボタンの文字数の説明、アニメーションする要素の説明方法など」。
JavaScriptを使用しないシンプルで高速なWebページを作れるOSS・「imml」 | かちびと.net
« あとで試す。「immlはシンプルで高速なJS不使用のWebページを作れるOSSです。単純にMarkdownライクな記法で書いたものをHTMLでエクスポート、というもの」。
イラレで作る！『醤油ラーメン』の作り方｜しろ｜note
« ためになる。イラレ使いではないけど。「イラレで麺類のイラストを描くのが苦手だったので、ややリアルな麺のイラストが描けるか試行錯誤して描いてみました。他の具材もなるべくイラレの機能で簡単に作れるようにしています」。