みなさん、こんにちは。どんぶラッコです。
本日は私が情報収集している中で気になったWebデザインに関するトピックをいくつかご紹介したいと思います！
ちなみに、私の情報収集方法については別の記事でも触れていますので、そちらを参照してみてください。
それでは早速いってみましょう！
新しいreset CSS “reseter.css”
みなさん、そもそも reset.css をお使いでしょうか？
こちらをあらかじめ読み込んでおくことで、ブラウザ側のデフォルトのCSSスタイルを削除することができます。
なので、 <h1> タグをつけたとしても、デフォルトのように大きなフォントになることがないので自分が好きなようにレイアウトをデザインするときに重宝するあいつです。
reset.css 自体はたくさんの人が作っていますが、それぞれの不足部分を補う形で reseter.css というCSSが作られたとのこと。
公式のGithubに比較表が掲載されています。
特に差が出ているのは BoxSizingの部分でしょうか。また、全てのブラウザに対応していると豪語しています。すごい。
次のWebサイトで使ってみようと思っています！
オートコンプリートの値
入力フォームを自動補完してくれるオートコンプリートの値、よく使うものだけ集めてみた pic.twitter.com/uKDSdSAq1i
— 小林 I Web Designer (@pulpxstyle) April 13, 2021
inputで出てくる自動補完は、実は autocomplete という属性をつけることで、特定の情報をつけることができます。
このスライドがとてもよくまとまっていると思ったのでご紹介です。
組織内の肩書きなんて autocomplete 属性がありますね！流石に知らなかったですw
色々なサイトの ogp画像を確認できるサイト
続いて、OGPの画像を一覧で確認できるサイト、ogp.cardsです (よくドメインが取れたな！と思っています)。
OGPはOpen Graph Protocolの略で、 リンクを掲載するときに一緒に出る画像やサイトタイトルなどの情報を指定することができるやつです。
TwitterやFacebookでリンクをシェアすると大抵画像付きで投稿されますよね？あの部分です。
各企業ごとの色があって面白いですよ！
現行のサイトだと大きなカードのバージョンしか確認できないので、スモールカードの場合のogpが確認できるとより最高です！
Misocaフロントエンドの歴史と未来
最後はデザインとはちょっとズレるのですが、Misoca(現在は弥生会計グループですね)の技術者によるフロントエンド使用技術の変遷に関するエントリー。
その節目節目でどのような意思決定がなされてきたのかがわかりますね。
印象的だったのが、2015年の時点からVue.jsを使い出している点。Vue.jsの初版が2014年2月なのでかなりのアーリーアダプターですね。こういう、新しい技術を積極的に自社のサービスに取り入れていくことができる企業が伸びていくのでしょう。そして、やはり魔法のグローバル関数のようなものが存在してしまうんだなという点にも共感します。
最近このような技術変遷エントリを見かけるのですが、coffeescriptからの移行は近年のトレンドなのかもしれません。
cookpadのエントリにも同様の内容が記載されていました。
coffeescript & Ruby on Rails な構成で作られたアプリが多かったようでうすが、これも流行りですね…。10年を待たずに使用技術が総入れ替えされるあたり、やはりWeb技術の進化の速さを思い知らされます。
このように、定期的に気になったことについて発信していきます！
