サイト構築 -実装
[CSS]テキスト要素の先頭行だけline-heightを取り除き、上ぴったりに揃えるスタイルシートのテクニック
Post on:2018年8月21日
テキスト要素を配置する際、line-heightがあると、テキストの先頭行を上ぴったりに揃えることはできません。先頭行だけline-heightでできた上スペースを取り除き、上に揃えるスタイルシートのテクニックを紹介しま […]
最近はもうHelveticaだけではない！2018年、実際に使用されている人気が高い英語フォントの組み合わせ
Post on:2018年8月21日
デザインでよく使用するお気に入りの英語フォントは何ですか？ Helveticaを使っておけば大丈夫と思っても、メジャー過ぎて新鮮味に欠けるかもしれません。 2018年、実際にWebサイトで使用されている人気が高いフォント […]
SVGだから快適！スマホアプリやWebサイトでよく見かけるアイコンをアニメーションで変形させるテクニック
Post on:2018年8月20日
スマホアプリやWebサイトでよく見かける、ハンバーガーメニューやケバブメニューのアイコンをアニメーションで変形させるUI用のスニペットを紹介します。 ケバブってなに？ という方は「スマホアプリのメニューでよく使用されるあ […]
保存しておくと便利！CSS Flexboxでよく使用するコードがまとめられたCSSのスニペット集
Post on:2018年8月10日
ヘッダでロゴを左寄せにしたり、検索窓を右寄せにしたり、画像をページの中央に配置したり、ページ上のあらゆる要素を揃え整列させるFlexboxをベースにしたスタイルシートのスニペットを紹介します。 サイトやブログの全体で利用 […]
コードはわずか384bytes！HTML/CSS/JavaScript対応、ブラウザからすぐに利用できる超軽量エディタ -TinyEditor
Post on:2018年8月9日
CodePenのようなブラウザですぐ利用できる、HTML/CSS/JavaScript対応の超軽量の即席エディタを紹介します。 コードはわずか384bytes！ ブラウザのアドレス欄にコピペするだけで、すぐに利用できます […]
[CSS]スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法
Post on:2018年8月8日
ビューポートを使った単位（vw, vhなど）は、特にスマホの各ブラウザにおいて複雑です。例えば、vwのスクロールバーを考慮する必要がありますか？ サイトのナビゲーションやページコントロールはどうでしょうか？ それらは計算 […]
[JS]実装が簡単で、操作も快適！スクロールに対応したコンテンツを実装できる超軽量ライブラリ -SimpleBar
Post on:2018年8月7日
スクロールバーをカスタマイズしてコンテンツを設置できるJavaScriptのほとんどは、スクロールの挙動が独自だったりします。ブラウザのネイティブのスクロール操作を使用し、快適に動作するコンテンツを実装できるライブラリを […]
コードが非常に見やすくて、使いやすい！Visual Studio Codeでお勧めのテーマファイル -Code Blue
Post on:2018年8月7日
目に優しいブルーの背景に、コードは明るいカラーで非常に見やすいVisual Studio Codeのテーマファイルを紹介します。一般的な言語はすべてサポートされており、HTML, CSS, JavaScriptをはじめ、 […]
Vue.jsとReact.jsを習得するために、どのように学んでいけばよいのか -VueとReactのデベロッパ用ロードマップ
Post on:2018年8月6日
Vue.jsとReact.jsを習得するために、どのように学んでいけばよいのか、次に何を学べばよいのか、その指針となるロードマップを紹介します。 【追記】 Angularのロードマップを追加しました。
[CSS]見出し、本文、リストなど、文字周りをrem指定で簡単に設計できる便利なオンラインツール
Post on:2018年8月3日
Webデザインで使用する見出し、小見出し、本文、リストなどフォントの基本サイズ、行間、それぞれのマージンなど、文字周りのデザインを実際のブラウザで確認しながら設計できる便利なオンラインツールを紹介します。 ルート要素を最 […]
sponsors
