![2021年にCodepenで話題!コピペ可なHTMLスニペット ベスト100発表](https://cdn-ak-scissors.b.st-hatena.com/image/square/72566d44c4c04bc118d03d8637150cb8325a649d/height=288;version=1;width=512/https%3A%2F%2Fphotoshopvip.net%2Fwp-content%2Fuploads%2F2022%2F01%2Fbest-of-codepen-2021-cover-1.jpg)
デザインと1pxのずれもなく、HTMLとCSSで実装することを「ピクセル パーフェクト」と言います。このピクセル パーフェクトは必要なのか、現在の制作で求められているのは何か、ルックアンドフィールに合わせた実装を紹介します。 The State Of Pixel Perfection by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ピクセル パーフェクトとは 2010年頃のWeb制作 ルックアンドフィール コード化された結果がパーフェクトかどうかの判断 バリエーションとコンテキスト 現在の状況 モダンCSS CSSフレームワークの影響 好き嫌いではなく、期待通りに デザイナーに役立つアドバイス デベロッパーに役立つアドバイス 終わりに はじめに 「ピクセル パーフェクト」という言葉を最
最新のBootstrap 4をベースに、ランディングページやスマホアプリのプロモーションページなど、縦長ページでよく見かけるさまざまなUIコンポーネントを備えたHTML/CSSテンプレートで構成された無料のUIキットを紹介します。 もちろんレスポンシブ対応で、非常に軽量に構築されているので、快適に利用できます。 Shards Shards -GitHub ShardsはMITライセンス、個人でも商用のプロジェクトでも無料で利用できます。 Shardsのデモ ShardsのUIコンポーネント Shardsの使い方 Shardsのデモ ダウンロードファイルには、すぐに利用できるデモページも含まれています。 まずは、プロダクト・サービス向けの縦長ランディングページ。
最近のUIは、気持ちいいアニメーションが多く取り入れられています。アニメーションはある程度予測できながらも、いい意味で少し期待を裏切るくらいがちょうどいいなと思います。 アニメーションを使ったインタラクションやデザインが素晴らしいナビゲーションの実装例をまとめました。各デモは全て、HTML, CSS, JavaScriptなどをオンラインで編集することができます。
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
画像を使用せずに、多階層のリストをツリー状にデザインするスタイルシートのテクニックを紹介します。 ピュアCSSなので、リストのアイテムは増やしても減らしても、ツリー状のスタイルを適用できます。 Parent child vertical list menu コードはこんな感じです。 HTML リストは階層ごとに入れ子を使用します。 コードは、CodeのjQueryまで。 <nav class="nav"> <ul class=list> <li> <a href="#">Home</a> <ul> <li> <a href="#">Lab</a> <ul> <li> <a href="#">Code</a> <ul> <li> <a href="#">Html</a> </li> <li> <a href="#">Css</a> </li> <li> <a href="#">Jquery<
これは二番目のヘッダとサイドバーで、スクロールすると一番目と同様に上部に貼りつきます。 Auto Fix Anythingの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.autofix_anything.js"></script> <link href='autofix_anything.css' rel='stylesheet' type='text/css'> </head> Step 2: HTML サイドバーをスクロールに合わせてポジ
Custom event: タブの切替時の前後にイベントを設定します。 Tabsletの使い方 Step 1: 外部ファイル </body>の上あたりに、jquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script type="text/javascript" src="javascripts/vendor/jquery.tabslet.min.js"></script> Step 2: HTML タブをul要素で、各コンテンツをdivで実装します。 タブのアンカー(#tab-1)とコンテンツのid(tab-1)は対応するように設定します。 ラッパーのclassに「tabs」を指定し、機能を選択
CSS3初心者でも簡単に利用でき、上級者でも実装のヒントになる、ページでよく使うパネルやボックス、ボタン、バーなどをbox-shadowを使って実装するスタイルシートのスニペットを紹介します。 10 Creative Techniques Using CSS3 Box Shadow 10個のスニペットは、Apple, Pinterest, Facebookなどで使用されているエレメントのHTML/CSSを簡略化したものです。 1. スクロールしてもバーを常に最上部に表示 2. サブナビゲーションのドロップダウン 3. シャドウを使った光沢が美しいボタン 4. 吹き出しスタイルの通知パネル 5. Appleのページラッパー 6. Appleのコンテンツボックス 7. Appleのフィーチャーリンク 8. 画像にさりげなくシャドウを添える 9. フォームの入力を目立たせる 10. エラステック
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く