Web制作に役立つ情報一覧

商用利用可能でパス編集可能なラインタイプアイコンを配布している「ICON BOX」

2018/08/23(Thu) 09:52

作者様よりご連絡いただき、アイコンのデザインも個人的にすごい好みだったのでご紹介します。「ICON BOX」は、禁止事項に該当しなければ個人・商用問わず利用可能なフリーのアイコン素材を配布しているサイトです。

https://www.nxworld.net/material/iconbox.html

CSS Flexboxとmargin: auto;の自動マージンがどのように相互作用するか、両端揃え・右寄せの実装テクニック

2018/08/23(Thu) 09:51

CSS Flexboxも、margin: auto;も、よく使用していると思います。しかしよく使用し、なんとなく知っているけれど、本当は理解できていないことがあるかもしれません。

https://coliss.com/articles/build-websites/operation/css/css-flexbox-and-auto-margins.html

こんなに詳しく解説された本は初めて見た！SEOに関する技術的な側面から徹底的に詳しく解説された良書

2018/08/21(Tue) 10:04

SEOに関する技術的な側面から徹底的に詳しく解説された良書を紹介します。サイトの現在状況の把握から、Googleの検索エンジン、サイトの高速化や構造化マークアップ、AMP対応、内部施策と外部施策、施策の効果検証まで、SEOに必要な知識と情報がこの一冊にすべてまとまっています。

https://coliss.com/articles/book-review/isbn10-4839966001.html

[CSS]テキスト要素の先頭行だけline-heightを取り除き、上ぴったりに揃えるスタイルシートのテクニック

2018/08/21(Tue) 09:59

テキスト要素を配置する際、line-heightがあると、テキストの先頭行を上ぴったりに揃えることはできません。先頭行だけline-heightでできた上スペースを取り除き、上に揃えるスタイルシートのテクニックを紹介します。

https://coliss.com/articles/build-websites/operation/css/simple-css-remove-top-space.html

Photoshopで複雑な背景から 髪の毛を切り抜く方法【完結編】

2018/08/17(Fri) 11:13

切り抜きを諦めてしまいそうな背景でも、髪の毛など複雑なオブジェクトをうまく切り抜く方法をご紹介します。

http://photoshopvip.net/new-cropping-final

CSS Snippets #7

2018/08/17(Fri) 11:12

CSSで「〇〇したい」とか「これどうするんだっけ...」というときに使えるものや地味だけど覚えておくと便利だと思う簡易的なスニペットを紹介します。

https://www.nxworld.net/tips/css-snippets-7.html

CSSで長い文章を省略して省略記号を表示させる方法（1行 / 複数行 / mixin）

2018/08/16(Thu) 10:06

CSSを使って文章が長い場合に省略して末尾に省略記号（...）を表示させる方法のまとめです。全3パターンの実装方法と複数行対応させるスニペットを楽に使うmixinを紹介します。

https://www.nxworld.net/tips/css-text-truncate.html

保存しておくと便利！CSS Flexboxでよく使用するコードがまとめられたCSSのスニペット集

2018/08/10(Fri) 09:51

ヘッダでロゴを左寄せにしたり、検索窓を右寄せにしたり、画像をページの中央に配置したり、ページ上のあらゆる要素を揃え整列させるFlexboxをベースにしたスタイルシートのスニペットを紹介します。

https://coliss.com/articles/build-websites/operation/css/alignment-in-css-with-flexbox.html

Photoshop切り抜き新定番！髪の毛など 複雑な範囲も数分で完成するテクニック

2018/08/09(Thu) 09:55

Photoshopの画像の切り抜き方法は、用途によってたくさんのテクニックがあり、当サイトでも「 Photoshop切り抜きをマスターする10個の鉄板テクニック 完全ガイド」でご紹介しています。

http://photoshopvip.net/new-cropping

[CSS]知っておくと便利！スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法

2018/08/09(Thu) 09:54

ビューポートを使った単位（vw, vhなど）は、特にスマホの各ブラウザにおいて複雑です。例えば、vwのスクロールバーを考慮する必要がありますか？ サイトのナビゲーションやページコントロールはどうでしょうか？ それらは計算に含まれますか？

https://coliss.com/articles/build-websites/operation/css/viewport-units-on-mobile.html