jackieorangeのブックマーク - はてなブックマーク

モダンCSSによる絶対配置（position: absolute;）の削減

テキストを画像の上に配置、タグを重ねたい、ヒーローセクションで画像の上にコンテンツを配置、画像のアスペクト比を維持させたい時など、CSSの絶対配置（position: absolute;）を使用することがあります。もちろん、それでうまくいく時はありますが、なんらかの制約があったり、テキストが長いと崩れたりします。 position: absolute;が必要だと思われていた実装で、使用しなくても実装できるモダンCSSのテクニックを紹介します。 Less Absolute Positioning With Modern CSS by Ahmad Shadeed はじめにケース1: カードのオーバーレイケース2: カードのタグケース3: ヒーローセクションケース4: display: contents; ケース5: カードアイテムの並べ替えケース6: 中央寄せケース7: 画像のアス

jackieorange 2021/09/28

リンク

[CSS]便利なのが登場！レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる -Tailwind CSS | コリス

既存のページに外部CSSを加えるだけで、最近のWebサイトやブログで見かけるさまざまなコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトをカスタマイズできるスタイルをまとめたCSSのフレームワークを紹介します。 Flexboxを使ってみたい、天地の中央に配置したい、シャドウを加えたい、レスポンシブ対応のナビゲーションを備えたいなど、簡単に利用できます。デザインにも幅広く対応しているので、自分のオリジナルのデザインで利用できます。 Tailwind CSS Tailwind CSS -GitHub Tailwind CSSの特徴 Tailwind CSSの使い方 Tailwind CSSで用意されているスタイル Tailwind CSSの実装例 Tailwind CSSの特徴 Tailwind CSSはMITライセンスで、個人でも商用でも無料で利用できます。ボタン、フォー

jackieorange 2017/11/06

CSS

リンク

HTMLのheadの書き方、head内に記述する要素の総まとめ

HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「<head> cheatsheet」を紹介します。 <head> cheatsheet 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。去年紹介した以前の版からいろいろと変更されています。 head内に記述する最小限の構成 head内の要素 meta要素 link要素ソーシャル関連のhead内の要素ブラウザ・プラットフォーム関連のhead内の要素メモ head内に記述する最小限の構成下記はシンプルなWebサイトで必須となるhead内に記述する最小限のタグです。 <meta charset="utf-8"> <meta http-equiv="x-ua-c

jackieorange 2017/10/06

リンク

「position: sticky;」より便利！スクロールしたらヘッダやサイドバーがぴたっと貼り付くスクリプト -Fixed Sticky

HTMLは汚さずに、ヘッダ、ナビゲーション、サイドバー、ボタンなど、さまざまな要素をスクロールした際に指定した位置にぴたっと貼り付けるスクリプトを紹介します。 IE7+からサポートされており、「position: sticky;」の代替になる便利なスクリプトです。 Fixed Sticky- GitHub Fixed Stickyの特徴 Fixed Stickyのデモ Fixed Stickyの使い方 Fixed Stickyの特徴 Fixed Stickyで貼り付ける要素の位置は、親要素に依存します。つまり、スクロールしてぴたっと貼り付く位置は、常に親要素となるコンテナ内です。基本的な動作を見てみましょう。まずは、要素に「top: 20px;」を指定してみます。

jackieorange 2017/05/12

リンク

[CSS]HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ -Linting HTML using CSS

HTMLは間違って記述されても、重大なエラーになることはあまりありません。そのため、validではないHTML、セマンティックではないHTML、アクセシブルではないHTMLのコードが、ページ内に紛れてしまうことは非常に簡単です。 HTMLの潜在的な問題を見つけることができる、少し高度なCSSのセレクタを紹介します。 Linting HTML using CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。インラインのスタイルリンクのターゲットアクセシブルではない画像ドキュメントの言語指定不適切な文字セットアクセシブルではないビューポート属性ラベルのないフォーム要素空のインタラクティブな要素不必要、あるいは非推奨の属性インラインのスタイルこのセレクタは、インラインのスタイルが適用されているページ上のあらゆ

jackieorange 2017/03/21

CSS

リンク

最近のWeb制作の勉強になる！Webサイトのワイヤーフレームやプロトタイプのまとめ

プロジェクトのメンバーでないとなかなか目にすることができないワイヤーフレームやプロトタイプ、他の人がどのように作っているか気になります。最近のWebサイトやスマホアプリの制作で参考になりそうなワイヤーフレーム、フローチャート、プロトタイプを紹介します。 UXデザインのツールも、Adobe XDが先日ベータ版としてリリースされ、SketchもメジャーアップデートとなるSketch4がリリースされ、充実してきましたね。 Adobe XD Wireframe Kit for UX Designer for Adobe XD まずは年内にWindows版のリリースが予定されているAdobe XDで作成されたワイヤーフレーム用のキット。最近のWebサイトで使用されているコンポーネントが数多く収録されています。

jackieorange 2016/11/16

ワイヤーフレーム

リンク

Chrome デベロッパーツールで知っていると、Webサイトやアプリの制作が捗る便利なテクニックのまとめ

先日「Chrome デベロッパーツールの使い方」で華麗に使いこなすテクニックを紹介しましたが、それとは異なるデベロッパーツールの便利な使い方を紹介します。 Webサイトやアプリの制作時に、非常に役立つテクニックが満載です。 ※画像は元記事のものではなく、当方の環境のものを使用しています。デベロッパーツールの便利な使い方タブ「Elements」を選択 DOM要素を選択右パネルのタブ「Computed」を選択「Computed」には、選択したDOM要素に適用されている全てのスタイルが表示されます。そのプロパティの頭にある虫眼鏡アイコンをクリックすると、そのスタイルがあるCSSファイルとそのセレクタの指定を表示します。これは大きなサイトを制作している時に、非常に有用です。

jackieorange 2015/11/01

google chrome

リンク

知ってると便利なCSSのテクニックのまとめ -CSS Protips

リスト要素で実装したナビゲーションの右端のボーダーを取り除くシンプルな方法、flexboxで実装したカラム間の溝の最後の溝を取り除く方法、天地の中央に配置など、知ってると便利なCSSのテクニックを紹介します。 CSS Protips -GitHub CSS Protipsのバージョンアップ版の紹介記事はこちら。 CSSでやりたかったことが数行のコードで実装できるスタイルシートの小技のまとめ -CSS Protips CSS ProtipsのライセンスはMIT Licenseで、個人でも商用でも無料で利用できます。下記のスタイルシートの対応ブラウザはChrome, Firefox, Safari, Edge, IE11です。リスト要素の最後だけボーダーを適用・削除 body要素に「line-height」を加える天地の中央に配置ネガティブなnth-childを使用してアイテムを選択

jackieorange 2015/10/06

CSS

リンク

CSSを書く、設計する時に参考にしておきたいCSSのガイドライン・スタイルガイドのまとめ

大規模なプロジェクト、長期に渡るプロジェクト、複数のメンバーが関わるプロジェクト、そして明日の自分も一年後の自分が見ても分かる、メンテナンス性に優れ、一貫性のあるCSSを書くのに役立つガイドラインやスタイルガイドを紹介します。

jackieorange 2015/07/27

スタイルガイド

リンク

[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法

先日の記事「フォントサイズの指定方法（翻訳版）」で、CSSの比較的新しい単位「ビューポートの単位(Viewport Units)」について触れました。この単位「vw, vh, vmin, vmax」はブラウザのビューポートのサイズに基づくもので、これらの単位で指定した実際の大きさはビューポートの大きさによって変化するため、レスポンシブデザインにあった単位と言えるでしょう。これらの単位を使うことは「フォントサイズの指定方法」でフォントサイズに使うことを反対しましたが、レイアウトでは非常に役立つ単位です。 Viewport vs. Percentage Units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。ビューポートの単位(Viewport Units)とは要素を幅いっぱいに指定 (% > vw) 要素を高さいっぱいに指定 (

jackieorange 2015/07/23

リンク

[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ

最近のWebサイトで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。

jackieorange 2015/07/23

アニメーション

リンク

UIの新鮮なアイデアをチェック！デザインやインタラクションの工夫が素晴らしいナビゲーションのまとめ

最近のUIは、気持ちいいアニメーションが多く取り入れられています。アニメーションはある程度予測できながらも、いい意味で少し期待を裏切るくらいがちょうどいいなと思います。アニメーションを使ったインタラクションやデザインが素晴らしいナビゲーションの実装例をまとめました。各デモは全て、HTML, CSS, JavaScriptなどをオンラインで編集することができます。

jackieorange 2015/07/08

UI
CSS

リンク

[CSS]classの命名など気になるテクニックがいろいろ取り入れられているレスポンシブ対応のフレームワーク -Skyline

大規模サイトから個人のポートフォリオやブログまで、さまざまなデザインをサポートするための汎用性に優れたアーキテクチャで設計されたCSSのフレームワーク「Skyline」を紹介します。 Skyline Skyline -GitHub Skylineでは気になるCSSのテクニックがたくさん使われています。 classの命名にはBEM、リセットにはnormalize.css、印刷にはHTML5 Boilerplate、コンポーネントのアイデアはBootstrap、そしてSCSSで書かれたオブジェクト指向のCSSです。「BEM」とは、ブロック（Block）、エレメント（Element）、モディファイア（Modifier）の頭文字をとったもので、各要素を3つのどれかに必ず属するものとして考えます。例えば、ページにはヘッダ・コンテンツ・フッタのブロックがあり、ヘッダブロックにはロゴ・メニュー・検索

jackieorange 2015/01/21

CSS

リンク

2015年、現在のWebデザインを確認しながらこれからのトレンドを探る

Webデザインは常に進化しており、活気にあふれている世界です。現在のWebデザインの状況を確認しながら、2015年の予測されるトレンドを紹介します。 Webデザイナー・ディレクターだけでなく、Web制作に携わる人は知っておいて損はないキーワードばかりです。 Web Design Trends That Will Rule 2015 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。高品質なストックフォト単色の背景動画を使った背景面白いナビゲーションカード・タイル型レイアウト固定配置のブロックパララックスは繊細にいかにスクロールしてもらえるか今までとは違うイラストの使い方ビッグデータ・グラフプロダクトファーストフラットデザインは成長し続けているモバイルファースト人間的な温かみのあるデザイン UXのちょっとした工夫

jackieorange 2015/01/08

リンク

工夫のあるUIがいい！CSSで円・楕円・多角形などのクリップパスが簡単に作成できるオンラインサービス -Clippy

CSSの「clip-path」を使い、円・楕円・多角形などのさまざまな形状のクリップパスが簡単に生成できるオンラインサービスを紹介します。 UIも随所に工夫がある非常に使いやすいデザインになっています。

jackieorange 2015/01/08

CSS
css3

リンク

[CSS]最近のWeb制作でよく使う、Sassのmixinのまとめ

15 essential Sass mixins 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Sassやってみたい、と考えてる人には下記の本をオススメします。 Sassの初心者からもっと使いこなしたい人まで、Sassを確実にマスターできるオススメの本 -Sassの教科書 box-sizing（ボックスサイズ） opacity（不透明度） column-width（カラム幅） circle（円形） font-size（フォントサイズ） box-shadow（ボックスシャドウ） xPos（要素の座標） vertical-align（天地の中央に配置） flexbox（フレックスボックス） flex（モダンブラウザの旧仕様にも対応したflexの指定） flex-order（表示の順番） flex-direction（表示の方向） gra

jackieorange 2014/11/18

“@mixin vertical-align { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }”

css
Sass

リンク

ブックマークしておきたい、スマホUIをコレクションしている海外と日本のサイトのまとめ

iPhone, Androidなど、スマホのユーザインターフェイスの参考になるギャラリーサイトを海外・国内ともに紹介します。まずは、スマホでその操作が楽しいアニメーションを伴ったUIギャラリーから。

jackieorange 2014/10/23

リンク

正式版リリース間近！Web制作の作業が驚くほど捗る『Avocode』最速レビュー

PNG Hat, CSS Hatなど、Web制作に役立つツールを数多く開発しているMadeBySourceが新たにリリースする『Avocode』の正式版のリリースがいよいよ間近になりました！一足先にプレオーダー版が届いたので、さっそくレビューします。ベータ版の機能が限定されている時でも「こいつはすげえ」と思ってましたが、現在の最新版は更にヤバイです。 Avocode と、レビューの前にお得な情報を。 Avocodeはリリース前の早期割引として、キャンペーンを行っています。通常$240が、約70%オフの$69で購入できます。 Avocode: 特徴ページ Avocodeは、Photoshop無しでPSDのプレビューができ、画像の書き出しは.png, .jpgだけでなく、SVGへの書き出しにも対応しています。また、ボタンやエレメントなどのベクターオブジェクトはCSS(Less, Sass

jackieorange 2014/09/16

リンク

[CSS]アイデアがいい！よく見かける普通のアイコンに一手間加えるスタイルシートのデモ

ウェブページでよく見かけるアイコンをクリックやタップした時に、ちょっとしたアニメーションを加えたデモを紹介します。かわいいアニメーションで楽しくなるだけでなく、アイコンをクリックしてどうなるのかが伝わる役目も果たしています。無くても困らないけど、あると嬉しい演出っていいですね。 Animated Shopping Cart Icons デモではフルーツショップのサイトを例に、カートに商品を入れたり、ギフトを選択したり、商品をファボったりした時に、ちょっとしたアニメーションを加えて、ユーザーを楽しませます。たくさんあるデモの中から、少しだけアニメーションGIFにしてみました。

jackieorange 2014/05/19