HTML・コーディング

昔と違う2021年のHTML制作。アンケート結果から分析するイマドキのウェブ制作

2021/07/19(Mon) 09:55

ウェブ業界の当たり前だと思っていることでも、他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・、この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。

https://ics.media/entry/210715/

最近の実装に合わせた最新版HTMLテンプレート、基本構造に使用するすべての要素とその役割も解説

2021/04/28(Wed) 09:48

最近の実装に合わせた、Webページ用のHTMLテンプレートを紹介します。レスポンシブ用のHTML、ソーシャルメディア用のHTMLをはじめ、高速表示に欠かせないrel="preload"なども含まれています。IEなどの古いブラウザはプログレッシブエンハンスメントで対応しています。

https://coliss.com/articles/build-websites/operation/work/html-boilerplate-by-mmatuzo.html

現在のGoogleのHTML・CSSガイドに沿ったコーディングルール

2021/04/27(Tue) 09:51

コーディングを勉強している方や、普段当たり前のようにコーディングしているけれど、上手く使えているのか不安な方向けにこの記事を書きました。（2021年04月04日更新）色んな方のコーディングを見ていると実に様々です。情報や知識が古いままで、今では推奨されない書き方も散見されます。

https://fueru.info/design/html-css/google-styleguide/

Webサイト制作の時短テク！便利な最新オンラインツール48個まとめ

2021/02/16(Tue) 09:54

2021年に入って公開された新しいツールやサービスが中心で、Webデザイン作業の効率化や作業スピードがアップする便利ツールが揃います。

https://photoshopvip.net/127345

2020年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表

2021/01/18(Mon) 10:21

この記事は、2020年に特に人気の高かったHTMLスニペットをランキング形式でまとめた The Most Hearted of 2020 が発表されていたので、その中でも実用性の高いHTMLスニペットを中心にまとめて紹介しています。

https://photoshopvip.net/126827

Webページ高速化に必須の知識！ブラウザがWebページをどのようにレンダリングしているか、図解で解説

2020/11/12(Thu) 09:56

ブラウザがWebページをどのようにレンダリングしているか、図解でやさしく解説した記事を紹介します。レンダリングの仕組みを理解することで、HTMLやCSSやJavaScriptなど実装時にも気をつける点があります。

https://coliss.com/articles/build-websites/operation/work/how-the-browser-renders-a-web-page.html

シンプルなCSSで実装できる！記事は中央に固定幅、画像は幅いっぱいに、フルブリードレイアウトを実装するテクニック

2020/10/16(Fri) 10:08

記事のテキストが多いサイトで見かけるレイアウト、記事は中央に固定幅、画像は幅いっぱいに表示するフルブリードレイアウトをシンプルなHTMLとCSSで実装するテクニックを紹介します。

https://coliss.com/articles/build-websites/operation/css/full-bleed-layout-using-css-grid.html

知っておくと便利なHTML5の機能、要素や属性のまとめ

2020/10/06(Tue) 10:00

今まであまり使用されていなかったけど、現在の環境では有用であるHTML5の便利な機能、要素や属性を紹介します。

https://coliss.com/articles/build-websites/operation/work/10-useful-html5-features.html

コピペで簡単！シンプルなHTMLとCSSで実装された17種類のヘッダのテンプレート -headers.css

2020/09/14(Mon) 09:57

新しいプロジェクトですぐに利用できるようシンプルなHTMLとCSSで実装された、17+種類のWebサイトのヘッダを実装するテンプレートを紹介します。

https://coliss.com/articles/build-websites/operation/css/blueprint-html-and-css-for-website-headers.html

レスポンシブの確認がこれで快適に！複数のスクリーンサイズで同時に確認できる無料ツール -Responsively App

2020/06/24(Wed) 10:02

Windows, macOS, Linux対応で、しかもオープンソース、快適にレスポンシブの確認ができるResponsively Appを紹介します。5つのデバイスを同時にすれば、制作時間は5倍速くなります。無料とは思えないほど高性能で、すべてのWeb制作者にお勧めです！

https://coliss.com/articles/build-websites/operation/work/responsively-app-for-confirming-responsive.html