見出し画像

面白かった「コーディング・プログラミング」系記事まとめ(2020年5月5週目)

かじさん＠旅するWebマスター

2020年5月5週目に読んだ、個人的に面白かった「コーディング・プログラミング・エンジニアリング」系の記事をまとめました。

CSS・Javascriptの記事が中心です。


1.デザイナーも知っておきたいJavaScriptの基礎の基礎｜さりぃ｜note

「Javascriptとはどういうものなのか」「なぜ必要なのか」「どういう役割をこなすのか」といった、Javascriptの基礎の基礎をまとめられた記事です。

デザイナーに限らず、Webサイトに関わる人は知っておくと役に立つ知識だと思います。


2.CSSのcalc()関数で、レスポンシブ対応のfont-sizeを可変にするスタイルシートを簡単に生成できる無料ツール

CSS便利ツールその1。

レスポンシブデザインには、よく「calc()関数」を使ってfont-sizeを調整するのですが、このツールを使えば面倒な計算や指定を省略して設定することが出来ますね。

もし「font-size」を「calc()関数」で変化させる方法をご存知でない方がいらっしゃれば、ぜひこの機会に使ってみてください。わたしはかなり感動しました。


3.Flexbox Cheat Site

CSS便利ツールその2。

「Flexbox」のレイアウトをクリックすると、そのレイアウトに応じたCSSコードがすぐに出力されます。

普段使わないレイアウトを組む時、結構場当たり的にCSSを書いていって検証するのですが、このツールがあれば楽ちんですね。


4.TwitterのUIデザインで見つけたCSSのテクニックのまとめ

TwitterのUIデザインを分解し、要素ごとのCSSを解説している記事です。

こうして1個1個のCSSを詳しく見ていくと、思わぬテクニックが隠されていたりしていて面白いですね。


5.モバイルサイトにウンコの絵文字が表示されて死にかけた話

記事タイトルで笑ってしまった記事です。

原因は「絵文字の文字化け」というもので、今はどのPC・スマホでもほとんど共通の絵文字があるので化けないのですが、昔は機種依存絵文字もたくさんあり、この事件も同様の原因で発生したみたいですね…

まだ一部は機種依存文字があったりするので、サイト制作者の方々は重々ご注意ください。


以上です。

毎週火曜日は「コーディング、プログラミング、エンジニアリング」のまとめ記事を配信します！

・月：マーケティング系（マーケティング・アナリティクス・ライティング・SEOなど）
・火：コーディング、プログラミング、エンジニアリング
・水：デザイン系
・木：ツール、サービス系
・金：カメラ、写真、映像系　もしくは　通販・EC系
・土：生き方、ライフワーク、ライフハック、旅など
・日：ネタ系

↓Twitter↓


より良い情報を発信していければと思いますので、サポートして頂けましたらとても嬉しいですし、モチベーションに直結します。 いいね・フォローもどうぞよろしくお願いします！🙇‍♂️