ログアウト

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/

◆医療英語
https://www.mofa.go.jp/mofaj/files/000237045.pdf