[CSS]Webページのこれからのレイアウトテクニック！FlexboxとCSS Gridは一緒に使用してこそ価値がある
Webページのレイアウト、一昔前まではfloat、最近のプロジェクトではFlexboxが主流だと思います。CSS Gridはどうでしょうか？ CSS Gridは主要なすべてのブラウザにサポートされ、採用を検討している、また既に導入している人も少なくないでしょう。 注意しておきたいのが、CSS GridがあればFlexboxはいらないという考え方です。 これからのレイアウトは、FlexboxとCSS Gridを一緒に使用することで、それらの性能を効果的に利用できます。 Flexbox and Grids, your layout’s best friends by Eva Ferreira 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 FlexboxとCSS Gridは一緒に使用することでパワーを発揮する 神話は崩された Fri
![[CSS]Webページのこれからのレイアウトテクニック！FlexboxとCSS Gridは一緒に使用してこそ価値がある](https://cdn-ak-scissors.b.st-hatena.com/image/square/222e57e0cb617f5924de9e159879efca2a68aa3e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201704%2F2017111110.png)
これからは今まで以上に、jQueryが必要なくなるかもしれない
3, 4年前あたりから、jQuery無しでこう記述するとか、jQueryの一部の機能を代替する軽量スクリプトなどが出始めました。 2017年も半年が過ぎ、その状況はさらに変わり始めています。 (Now More Than Ever) You Might Not Need jQuery 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 現在のブラウザ事情 jQueryに替わる、JavaScriptの選択肢 マイクロライブラリの台頭 IE9への対応はポリフィルで NodeListの反復 jQueryは遅いのか？ jQueryについて私が嫌いなもの $なしでは生きていけない？ 現在のブラウザ事情 jQueryが2006年にリリースされてから、DOMとブラウザのAPIは飛躍的に向上しています。2013年に「You Might Not Ne
Intersection Observerが簡単で便利！要素がビューポートに表示されているかを判定できる
スクロールした際にヘルプや広告を表示したり、無限スクロールでコンテンツを読み込ませたり、画像の遅延ロードなど、要素がビューポートに表示されているかをトリガーにするのには、なかなか面倒なJavaScriptが必要でした。 例えば、スクロールやサイズ変更のイベントを取得し、getBoundingClientRect()などのDOM APIでビューポートからの相対位置を手動で計算します。 この今までの方法は面倒で非効率的でしたが、主要なブラウザに実装されているIntersectionObserver APIを使用すると、非常に簡単に取得することができます。 Intersection Observer comes to Firefox 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様にライセンスを得て翻訳しています。 「IntersectionObserver()」の基本的な
Photoshopで一手間加えるとこんなに違う！思い通りのかっこいいノイズを加えたグラデーションやテクスチャの作り方
Photoshopにはノイズを加えるために、フィルタ「ノイズ」があります。しかし、そのまま適用するだけでは思った通りのノイズを作成することができないかもしれません。 一手間加えて、思い通りのかっこいいノイズを加えたグラデーションやテクスチャの作り方を紹介します。 How to create noisy by Stefan 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ノイズを加えたグラデーション その1: モノクロ2階調のシェードとグラデーション その2: ノイズを伴った、リソグラフのようなグラデーション その3: メゾティントでノイズを作成 ノイズを加えたグラデーション InstagramとBehanceにアップロードした私の作品は人気が上昇するにつれ、数多くのメッセージとそれをどのように作るのか質問を受けました。 これはR
[CSS]レスポンシブ対応のテーブルを実装するシンプルで、賢いアイデア
Webページをレスポンシブ対応にする時、悩ましいコンテンツの一つがテーブルではないでしょうか。単にセルの幅を狭くするだけでは、一行に一文字しかない妙に縦長なテーブルになってしまいます。 省略したり、プルダウンを利用したりなどいろいろなアイデアがありますが、もっとシンプルで簡単に、そして実用的な賢い実装アイデアを紹介します。 Responsive table layout レスポンシブ対応のテーブルのデモ レスポンシブ対応のテーブルの実装 レスポンシブ対応のテーブルのデモ デモでは4x5のテーブルで、さまざまなデバイスのスクリーンサイズでコンテンツが最適になるよう実装されています。
![[CSS]レスポンシブ対応のテーブルを実装するシンプルで、賢いアイデア](https://cdn-ak-scissors.b.st-hatena.com/image/square/756f0468957ea28ca57928b50217267f6ec350ab/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016101105-01.png)
[CSS]レスポンシブ用にフォントのサイズと行の高さを可変で指定する極上テクニック -The math of CSS locks
CSS lockはレスポンシブWebデザインのテクニックで、フォントのサイズなどを指定した2つの値の間でスムーズに移行させることができます。レスポンシブのテクニックは通常、指定した値でフォントのサイズが急に変化しますが、常にビューポートの現在のサイズに依存して変化します。 レスポンシブ用にフォントのサイズと行の高さを可変で指定するテクニックを紹介します。 「math」とあるように、もう完全に数学です。 The math of CSS locks 下記は各ポイントを意訳したものです。 検証やスタディ部分は省略しているので、元記事をご覧ください。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS lockとは px単位のブレイクポイントを使ったCSS lock em単位のブレイクポイントを使ったCSS lock CSS lockまとめ CSS lockとは ビュー
![[CSS]レスポンシブ用にフォントのサイズと行の高さを可変で指定する極上テクニック -The math of CSS locks](https://cdn-ak-scissors.b.st-hatena.com/image/square/aa274fa204c0989fce8a28f04876115be7ee34a7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016100201.png)
CSSの単位（em, rem）を使った、これから取り入れていきたい実装テクニックのまとめ
CSSの相対的な単位（em, rem）を使って、Webページで使われるUIコンポーネントのさまざまなサイズを変化させるスタイルシートのテクニックを紹介します。 em, remは文字の大きさだけでなく、画像やアイコンのサイズ、背景、フォーム、ボタン、配置など、さまざまな指定に利用できます。 Building Resizeable Components with Relative CSS Units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 フォントのサイズを変化 縦と横の比率を維持したボタン 縦と横の比率を維持した画像 box-shadowを使ったボーダーの幅と高さ アイコンの幅と高さ、そして間隔も キャプション付き画像 装飾された背景 アイコン付き検索フォーム チェックボックスで実装されたトグル ブロックの一行の長さ ボタ
変態的 CSS トリック
多少複雑なデザインでも、画像や JavaScript には頼らず、CSS で実現させる。そこにはもはや手軽さなどは存在しない。あるのは男のロマン。
パフォーマンスを意識して正規表現を書く - Shin x Blog
正規表現を書く際、どのようなパターンにマッチさせるか、どこをキャプチャするかという視点で記述することはあっても、パフォーマンスを考えて記述するというのはある程度知っている人でなければ忘れがちな視点です。 このエントリでは、バックトラックをメインに正規表現がパフォーマンスに及ぼす挙動について見ていきます。 対象の正規表現エンジン ここでは、従来型 NFA を対象としています。具体的には、PHP の preg_ 関数で利用している PCRE や mb_ereg 関数が利用している鬼車です。Perl や Ruby、Python、Java、.NET でも従来型 NFA を採用しているので、似た挙動となるでしょう。 「従来型 NFA」や「バックトラック」などの用語については、「詳説 正規表現 第3版」のものを用いています。 バックトラックによるマッチ探査 正規表現エンジンでは、指定された文字列が、パ
jqueryのattrとprop（とdataとvalとhtmlとかつまり属性とかの取得）の使い分け一覧 - Qiita
最初に attrとpropの使い分けがわからないと言われたので、誰でも使い分けができるようになる一覧を作りました。 基本的にはpropで取得できるものはpropで、そうじゃないものはattrで、と思っていたのですが、data-*やvalueまでそれで取得していたので、思ったよりもが根が深いなと思った次第です。 （追記）data属性に対する扱いについて data-*属性には、用途が2種類あります。 HTML5としてのカスタム属性（とそれを利用した関連技術） jQueryのdata()メソッドのための初期値 前者はそれを利用した有名どころではBootstrap（TwitterBootstrap）がなどがありますが、 CSSの属性セレクタとしても使えるので、別にBootstrapに限った話ではなく、普通に使用している人もいるかと思います。 問題は後者の方で、ここで「初期値」と書いたり、追記前の記
ituore.com - ituore リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
CSSでコンテンツが少なくてもフッターをウィンドウ下部に表示する方法 - NxWorld
特に何も考えず組んでいると、コンテンツの内容が少ない場合に本来ウィンドウ下部に表示されてほしいフッターコンテンツなどが中途半端な位置に表示され、その分フッターとウィンドウ下部の間にある領域に大きな空白ができてしまうことがあります。 これをCSSや場合によってはJavaScriptで解決する方法があるのはご存知の方も多いと思いますが、最近では特に古いIEの対応がなくなってわざわざJavaScriptを使わなくてもよくなったり、CSSも以前よりシンプルな記述で実装できるようになっているので、自分が最近利用した実装方法を備忘録も兼ねていくつか紹介します。
CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法 - NxWorld
特にレスポンシブやスマホサイトで見かけることが多い、どんなウィンドウサイズでも縦横比を維持しつつ横幅いっぱいに画像を表示している見栄えですが、imgであれば画像を配置してwidth:100%;とheight:auto;辺りを指定しておけば簡単に表示させることができても、その見栄えを背景画像を利用してとなると先述した方法では実装できません。 背景画像でも同じように縦横比を維持しつつ横幅いっぱいに画像（背景画像）を表示させたいときは以下の方法で実装することができます。 実装には背景画像を表示したい部分に下記のようなCSSを記述することで縦横比を維持しつつ横幅いっぱいに背景画像を表示させることができ、以下のサンプルは表示させたい画像が「横幅：1000px 高さ：300px」の画像だった場合のものになります。 .background { width: 100%; height: 0; paddin
WordPressの記事一覧に件数を指定してアイキャッチ画像を表示する方法
先日、このブログのトップページにアイキャッチ画像を追加したので、その方法を備忘録として書き残しておきます。 このブログのトップページの記事一覧では、最初の15件の記事でアイキャッチ画像が設定されているもののみ表示するようにしました。以下がその方法です。 1. functions.phpでアイキャッチ画像を有効にする まずはアイキャッチ画像を有効にするために、functions.phpに以下を追加します。 add_theme_support( 'post-thumbnails' ); 2. 記事をカウントする変数を追加する 記事一覧を表示するLoop内に、記事数をカウントする変数を追加します。 <?php $postcount++; ?> 3. 条件式を追加してアイキャッチを表示させる 今回は以下の2つの条件を満たす場合のみ、アイキャッチ画像を表示するためのHTMLコードを挿入するようにして
初心者向け、コンサルタントが教えるエクセル（Excel）入門 - 戦略コンサルによる転職ブログ
こんにちは、戦略コンサルタントです。 今回は私の「社会人であればこんくらいは最低限出来てよ」というフラストレーションをぶつけた「これだけ最低限知ってろ」です。非常に長い記事ですが、目次をうまく活用しながら自分に必要な部分を読むようにして下さい。 エクセルで出来ること あるべきフォーマット/作ってはならないフォーマット 初心者でも知っておくべき頻出ショートカット alt + e + s(alt系は順番に押す) ：形式を選択して貼り付け 範囲選択のshift,ctrl フォーマット用) alt+w+v+gで罫線非表示 shift+ctrl+1でカンマ表示,shift+ctrl+5で％表示 ctrl+1でセルの書式設定 関数：兎にも角にもvlookup! vlookup ピボットテーブル 分析結果を伝える・グラフ作成 データだけでは意味を成さない、比較を行って初めて意味がある 簡単な分析設計をや
WordPress：カスタムフィールドの値で改行入力した際、そのまま表示したり任意のタグで括って表示する方法 - NxWorld
WordPressでカスタムフィールドの値入力欄で改行入力した際、単純に表示させるだけでは改行は反映されずに表示されます。 それをしっかり改行も反映させて表示させたり、改行された各行を任意のタグで括ってから表示させたりする方法です。 紹介している内容は下の入力イメージのように入力欄がテキストエリアの場合で説明しています。 ここではいずれもget_post_meta( $post_id, $key, $single );を利用する形で紹介します。 また、エスケープしたり値有無のチェックを行うなどの記述は省いているので、その辺は必要に応じて追記してください。 単純に表示する 例としてキーがfooだった場合、表示する方法としてよく見るひとつが下記のような記述になります。 この方法で表示しようとした場合、例えば上に合った入力イメージのようにカスタムフィールド入力欄で「あいうえお（改行）かきくけこ（
メンテナンス性に優れ、拡張性を備えたCSSを書くために -メンテナブルCSS
メンテナンス性に優れ、拡張性を備えたCSSを書くための「MaintainableCSS」を紹介します。 あるスタイルを修正する際に他に影響を与えてしまわないか、せっかく書いたコードが先祖帰りしないか、似たページをつくる時にコードを再利用するのに問題はないかなど、全部はもちろん個々でも非常に参考になると思います。 MaintainableCSS 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 メンテナブルCSSにすることのメリット 1. はじめに 2. セマンティック 3. 再利用 4. ID 5. コンベンション 6. モジュール 7. ステイト 8. バージョニング メンテナブルCSSにすることのメリット モジュール化、カプセル化 スタイルはあなたの許可なしで、他のスタイルの影響を受けません。 どんなデザインの要件でも あなたの必要
【簡単】2023年Photoshop切り抜きおすすめテクニック15選 完全ガイド
コンテンツ目次 「被写体の選択」機能 「選択とマスク」機能 「選択とマスク」（複雑な背景バージョン） オブジェクト選択ツール レイヤースタイル「ブレンド条件」 消しゴムツール 自動選択ツール クイック選択ツール 多角形選択ツール ペンツール チャネル設定 色域指定 レイヤーマスク クリッピングマスク 境界線を調整 さいごに、 1. 「被写体の選択」機能 もっとも簡単な、最新の切り抜きテクニック。 ボタンをクリックして、数秒待つだけで完成という、嘘のようなホントのはなし。 試しに、こちらの写真の女性を選択してみましょう。 元の画像をコピー（Command/Ctrl+J）したら、プロパティパネルの「被写体を選択」をクリック。 たったこれだけで、女性モデルのみを選択することができました。 選択範囲をレイヤーマスクとして適用したら、完成です。 Adobe Stockで「背景の削除」も一発完了 実は
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Snippets - NxWorld
Tumblr