2020年11月のログ
目次
急にブラウザが落ちたときにも自動保存してくれる「Session Buddy」
投稿者:土佐
いつも使っているSession BuddyというChorome拡張機能紹介します!
サイトをたくさん開いてる時に、一括保存できたり急にChoromeが落ちた時に自動保存してくれている機能です。
個人的な使い方ですが、案件ごとに参考サイトなどをまとめて保存したりしています !
https://www.e-f.co.jp/blog/30406/
CSSの見出しまとめサイト
投稿者:川目
繁忙期、中ページの制作は「ほぼやっつけ仕事」と化し、見出し等の見栄えに悩んでいる時間も惜しくなると思います。修正・検品・公開の各作業も出てきますし…。
で、「サルワカ」の「CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選」をご紹介します。というか、既に皆さんこのあたりのサイトは見てらっしゃると思いますよね…自分もパクりまくりです!…すみません。(今回のナレッジはこれでお茶をにごしちゃいますが…)
https://saruwakakun.com/html-css/reference/h-design
事例(※後日オリジナルテンプレに入れます)
http://hero11605.xsrv.jp/test_k/medical/
http://hero11605.xsrv.jp/test_k/medical/general.html
それで上記や他のトコを参考にして、雑ですがこのようなのをまとめてみました。
モノによってちょっと手を入れて頂くこともありますが、コピペでいけると思います。
あとは各自、制作するサイトの感じや文字量やレスポンシブの状態を見ながら、行間や字切りなどを調整して頂ければと思います。
CSSでリボンを作る
投稿者:尾高
直近でリボンの見出しをコーディングする機会があったので、CSSで作るリボンの見出しの紹介です。
サルワカさんの「CSSで作る!綺麗なWeb用リボンデザイン22選」を紹介します。
こちらも皆さんご存じかとは思いますが、見出し作りの参考になればと思います。
https://saruwakakun.com/html-css/reference/ribbon
Core Web Vitals(コアウェブバイタル)について
投稿者:豆成
ご存知の方もいらっしゃるかと思いますが、
2021年5月から本格的にSEOの指標として始まるといわれている、
Core Web Vitals(コアウェブバイタル)について共有いたします!
https://ka-holidayrefresh.com/core-web-vitals-kaizenn/
結論……
●ファーストビューは遅延読み込みを行わずにbodyの最初の方に記述
●ファーストビューに関係の無いJavaScriptは最後に読み込むか、htmlの最後の行に直接記述
●ユーザーの動作に関係する記述は全て非同期で読み込む。もしくは優先的に読み込み
●ユーザーが操作しようとしたときにページ要素が移動すると、UXが低下するため、
極論では一切動作の無いページが良好になりやすい。
などなど。
他にも、サイトに書かれています!
※これから5Gも普及し始めますし、要素を動かすよりも、
背景を動画にするなどして、動いて見せたほうが良い時代が到来する?笑
<河鰭さんから関連コメント>
広告をブロックしてくれるChromiumエンジンのブラウザ「Brave」なるものが最近?出たようです。
動作やセキュリティ面が気になるところですが…。
https://brave.com/ja/
画面を簡単にスクショできるFireShot
投稿者:東江
「FireShot」という拡張機能をご紹介します。
ホームページのスクリーンショットが保存できる拡張機能なんですが、画像形式だけでなくPDF形式でも保存できるので、結構便利に利用できるのではないかと思います!
https://onoredekaiketsu.com/fireshot-for-taking-screenshots-of-entire-web-pages/
カラーパレットサイト
投稿者:河鰭
前職からお世話になってるカラーパレットサイトをご紹介します~。
https://mycolor.space/
個人的な使い方としては、システムオリジナルのデザインに頭を抱えた時に使ってます(色から連想してモチーフを決めたりする事があるので…)
ロゴなどに使われているアクセントカラーのカラーコードを入れると、それに合いそうな色を提案してくれます。
提案される色味はくすみ系が多い?印象なので、参考程度に…。
◆補足
今風なグラデーションを作るジェネレーターもあります。
PhotoShopなどでグラデを作ると中間色が濁った色になってしまうので、それを回避していい感じにしてくれるらしいです。
グラデーションを作る時は右上メニューの「GRADIENT(2色選ぶ)」「3-COLOR-GRADIENT(3色選ぶ)」から作れます。
CSS・HTMLの参考サイト/医療英語まとめ
投稿者:有元
最近cssやhtmlなどで参考・復習したサイト共有します。
医療英語pdfが一番参考になりました(笑)
◆縁取り文字・白抜き文字ジェネレーター
https://webparts.cman.jp/string/outline/
◆shadow系ジェネレーター
https://www.bad-company.jp/
◆HTML5でのタグの入れ子のルールを徹底まとめ
https://webliker.info/46840/