去年からフロントエンドのパフォーマンスについて断続的に学んでいるが、自分の頭のなかにある知識はどれも断片的で、まとまりを欠いているような感覚があった。 知識と知識がつながっておらず、各施策が何のために行われるのかも、必ずしも自明ではなかった。何となく「パフォーマンスに効果がある」と言ってしまうが、それが何を指しているのかは実は曖昧だった。 このような状態では新しい知識を得ていくのが難しいというか、効率的に行えないように思えた。議論の背景が分からないし、文脈や問題意識を上手く掴めないから。何の話をしているのかよく分からない、という状態になりがち。書かれてあることの意味は分かっても論旨を掴めているわけではないから、自分のなかに定着しない。 そこで、現時点で自分が知っていることを整理して、自分なりに分類しておくことにした。 当たり前だが、どのテクニックがどの程度有効なのかは、状況によって違う。

Instagramに使用されているCSSのテクニックを紹介します。 世界で多くのユーザーが利用し、閲覧する環境もさまざまなデバイスに対応する必要があります。下記のモックアップをどのように実装しますか？ Inspect Element As A Way To Feed Your Curiosity by Ahmad Shadeed はじめに Instagramに使用されているCSSのテクニック レイアウトにCSS GridやFlexboxを使用していない Instagramのアンケートに使用されているCSSのテクニック 終わりに はじめに フロントエンドのデベロッパーにとっての最高の贈り物のひとつは、Webページを調べるだけで何がどのように実装されているのか、CSSが裏でどのように機能しているのか確認できることです。Webページを見ている時に気になるレイアウトやエフェクトがあり、どのように実

おすすめ配色サイトまとめ https://t.co/z1N35xsj1u

「SEO に強い HTML の書き方」というツイートがそこそこバズっていて、その内容に対して駆け出しエンジニアの方たちが「参考になった」などと称賛の声を挙げていたのを見かけて思うところがあったのでこの記事を書きました。 元ツイの概要は次の通り。 body > main > article > sectionに h1は 1 ページに 1 つ（要キーワード） 見出しタグは毎度 section で囲む ヘッダーメニューは nav で囲む 画像に適切な alt を設定する title / description を書く 階層を意識して書く div はあまり使わない 画像は p で囲む この記事は元ツイおよび元ツイの投稿者を批判する意図で書いたものではなく、あくまで挙げられている内容に対する個人的見解をまとめたものです。 正しいか正しくないかをそれぞれの項目のはじめに書いていますが、あくまで僕個人の

はじめに faviconを表示させたいことがあったのですが、ブラウザごとの挙動の違いによって以外と苦しめられました。この記事ではタイトルの通り、faviconが表示されない時に確認することを記載します。 はじめに faviconって何？ 確認したブラウザとそのバージョン faviconの表示方法 確認1：読み込む画像ファイルを疑う 問題の切り分け 確認2：キャッシュを削除してみる 確認3：絶対パスで記述する（IE,Edge） 確認4：証明書まわりを疑う（IE,Edge） 補足：IEとEdgeだけでいいからfaviconを表示したい時 確認5：faviconに関するファイルを削除してみる 補足：何に使われるファイルなの？ おわりに faviconって何？ faviconとはwebサイトのアドレスバーやタブ部分に表示されるアイコンのことです。付けておくことで複数タブを開いた際やブックマークした

CSSアニメーションCSSアニメーション サンプル集の続編です。 1日1個30分、CSS3でアニメーションパーツをひたすら作り続けるというもの。 前回の記事からサンプルが増えてきたので、第二弾としてまとめました。 Rainbow Ring LoadingローディングアイコンはCSSアニメーションの練習テーマとしてベスト。 mix-blend-mode と fliter を駆使して、虹のような表現ができる。 See the Pen OnlyCSS: Rainbow Ring by Yusuke Nakaya (@YusukeNakaya) on CodePen. mix-blend-mode は、フロントエンドエンジニアとデザイナーの摩擦を改善する、超画期的なプロパティ。 もう乗算でもスクリーンでもなんでも来い！ Night Rider Loading往年のナイトライダー風CSSローディング

はじめに CSSアニメーションに関して説明する機会があったため、それらに関してまとめました。 「CSSは書けるがCSSアニメーションがよくわからん!」といった人達向けに書いた記事であり、 CSSアニメーションに関するプロパティを理解できるようになることを目的としています。 デモはCodePen上に置いてあります。編集して変化を見てみると理解が深まると思います。 デモのJavaScriptはjQueryを読み込んでいないと動かないため、ローカル環境でデモを実行する場合はご注意ください。 CSSアニメーションとは 要素をアニメーションさせるCSSの機能。 CSS TransitionとCSS Animationの2つの機能がある。 CSS Transitionとは プロパティに変更があった時に、一定時間でプロパティを変化させる機能。 単純な動きのアニメーションを実装する時に利用する。 CSS

ホームページのことを中心にためになるかもしれないことをいろいろと書いています。 ホームページ制作のことからSEOや広告、マーケティングの話まで思いついたことを語っています。 大阪のホームページ制作YCOMトップ ホームページ運営ブログ 自宅もちょっと作業がしやすい環境になってきて、休日でもブログを書けるようになってきました。 休日は仕事しないって決めてるんだけど、ちょっと空いた時間とかにこうやってブログ書けるのが良い。 iOSではbackground-attachment:fixed;が効かない！？ ちょっとおしゃれなホームページを作ってくれと言われたら、 簡単にできるものとして背景固定のパララックス風のページデザインがあります。 こんなやつです。 Frankie's Sports Bar & Grill よくあるこんな感じの背景を固定して前面の要素だけが動くようなデザインですね。 シンプ

テキスト、ボーダー、背景、アクセント、エラーなど、カラーをCSSでどのように定義すると効率的に管理できるのか、保守が簡単になるのか、そのテクニックを紹介します。 Create your design system, part 3: Colors by CodyHouse 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに カラーをCSSで効率的に管理するために セマンティックにするか、宣言型にするか 基本的なカラーパレットの作成 セマンティックカラーの追加 このアプローチを採用する理由 テーマに使用するカラー はじめに 元々は、近日公開予定の「Web Components」のために作成したものですが、グローバルのCSSとして利用できるので、一足先に公開します。 Web Components|CodyHouse カラーをCS

「配色えらびのベストな方法が知りたい」 「イメージにあった色をもっと手軽に選びたい」 「色がなかなか決まらない」 「配色えらびにAIを活用してみたい」 この記事では、配色えらびが苦手なひとに役立つ無料ツールをまとめてご紹介します。 ２０１６年８月の初投稿から９年かけてわたしが見つけた、実践向けの配色ツールをカテゴリ別に揃えました。 リンクの切れたツールは削除し、新しいデザインツールを追加した最新版にアップグレード。 配色の基本ルールを頭に入れておけば、お気に入りの色を効果的に見つけることができますよ。 コンテンツ目次 普段使いできる便利ツール（17個） ワンクリック、人工知能系ツール（20個） マテリアルデザイン系ツール（4個） Webデザイン・UIデザイン関連ツール（21個） 写真から抽出系ツール（2個） インスピレーション系ツール（14個） グラデーション関連ツール（29個） 配色カラ

前回の記事「CSSで画像の好きな位置を円形にトリミングする方法」では画像の任意の位置で円形に切り抜いてTwitterやLineのアイコンみたいなモノを作ってみました。 こんなの。 ■CSS例 img { width:100px; height:100px; border-radius:50%; object-fit:cover; object-position:-10px; } 元画像がどんなサイズだろうと、5行書くだけで任意の位置を円形でくり抜けるんだから便利ですよねー。 せっかくなので（？）今回はこの写真の横に吹き出しを付けて、より一層それっぽくしてみたいと思います。 角丸な吹き出しの作り方 表示例 ソース <div style="background-color:rgb(113,147,193);padding:1em;"> <p style="border-radius:10px;