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

miracle1998 id:miracle1998

miracle1998のブックマーク (1,486)

自然に見える画像の枠線を求めて - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
miracle1998 2022/09/17
リンク
iOS・macOSと同時に大型アップデートがSafariにも到来、新たな「高さ」の基準やカスケードレイヤーが追加される
2022年3月14日にmacOS Monterey 12.3およびiPadOS・iOS 15.4がリリースされ、同時にSafariが新しいバージョン「15.4」にアップデートされました。Google ChromeやFirefoxに先行搭載されている多数の機能が追加されたほか、動的に変化するビューポートのサイズに応じて要素の高さを決める「dvh」という新たな指定方法などの機能が他のブラウザに先駆けて搭載されました。 New WebKit Features in Safari 15.4 | WebKit https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/ ◆img要素にlazy loading機能が搭載へ img要素に「loading="lazy"」属性を付与することで、「付近にスクロールするまで画像を読み込まない
miracle1998 2022/03/16
リンク
16歳の身体地図 - モリエサトシ | 少年ジャンプ＋
JASRAC許諾第9009285055Y45038号 JASRAC許諾第9009285050Y45038号 JASRAC許諾第9009285049Y43128号許諾番号 ID000002929 ABJマークは、この電子書店・電子書籍配信サービスが、著作権者からコンテンツ使用許諾を得た正規版配信サービスであることを示す登録商標(登録番号第6091713号)です。
miracle1998 2021/05/31
リンク
CSS見出しデザイン21選 | MxGrain - デザイン制作
CSSで実装できるシンプルな見出しデザインを21パターンご紹介します。汎用性が高くテイストに縛られず現場ですぐ使えるデザインなのでストックしておくと便利に使えます。あなたの現場でぜひご利用ください。 CSSのみで実装するシンプルな見出しデザイン21パターン蛍光ペンのような線をひいたCSS見出しデザインラインを使ったCSS見出し HTML <h2 class="heading01">ラインを使ったCSS見出し</h2> CSS .heading01 { display: inline; font-size: 26px; background-image: linear-gradient(rgba(0,0,0,0) 70%, rgb(252,81,133) 70%); } 蛍光ペンで線を引いたような見出しデザインです。display: inlineで複数行にも対応させています。 2色を重ね
miracle1998 2021/04/10
css

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

seo
リンク
Web FontによるCore Web Vitalsへの影響と使い続ける方法｜平大志朗
だれかWebのチョットワカル人、「(日本語など大容量の)Web FontのCore Web Vitalsへの影響使い続ける方法とその是非」を記事に書いてほしい。。。 preload頼りでいいんだろうか。どのくらい失敗するんだろうか…… — 辻正浩 | Masahiro Tsuji (@tsuj) January 20, 2021 私自身も、WebフォントがどれくらいCore Web Vitals影響するのか、影響を回避しながらWebフォントを使う方法がハッキリ分かっていなかったので、調査してみました。本投稿はWEB上から入手できる情報源をもとに内容をまとめています。情報の正確性には留意していますが、私の独自の解釈・予想も含まれています。以上から、本情報はいち見解として捉えていただきますようお願い致します。WebフォントによるCore Web Vitalsへの影響とはCore Web
miracle1998 2021/01/26
あとで読む

フォント

seo
リンク
2021年のウェブ標準とブラウザ | gihyo.jp
2021年になりましたね。矢倉眞隆（myakura）です。ウェブ標準やブラウザに興味のあるウェブ開発者です。gihyo.jpでは2009年に「Web標準とその周辺技術の学び方」という連載をしていました。今回は昨年の泉水さんに代わり、2021年のウェブ標準やブラウザの動向を占おうと思います。2020年は世界もブラウザもそれなりに大きな出来事がありましたので、2020年の動きをまずおさえ、そのうえで2021年はどうなるのかを考えてみました。 W3Cのプロセス改訂でLiving Standardライクな仕様の改訂が増えていく W3Cは2020年9月に、新しいプロセス文書と特許ポリシーを公開しました。新しい文書プロセスはW3Cの組織の定義や標準化の流れ、意思決定などについて定めた文書です。ここ数年は毎年更新されていますが、2020年はこれまでと比べて最大級とプレスリリースでもうたわれています
miracle1998 2021/01/08
ie
リンク
オウンドメディアに関する27の質問に2万字で回答します | knowledge / baigie
2019年はコンテンツマーケティング関連のイベントでお話しする機会が何度かあり、その中でたくさんの質問をいただいたのですが、すべての質問にお答えすることができませんでした。そこで改めてこの場を借り、質問に回答させていただこうと思います。私の経験則にもとづくものも多いですが、参考情報としてご覧いただければ幸いです。目的・意義・戦略 Q1. オウンドメディアの重要性を経営層に理解してもらうにはどうすればいいですか？いわゆるオウンドメディアについては、成果が出るまでに時間がかかることが多く、必ず成功すると事前に言い切れません。そのため、経営者や事業責任者が、オウンドメディアの力をそもそも信じているということは、推進する上での重要なポイントになります。逆に、否定的な人を説得して始めるのはなかなか難しい施策ともいえます。こういった前提があった上での回答ですが、オウンドメディアの目的を、一つ
miracle1998 2020/12/31
オウンドメディア
リンク
【鈴木謙一が選ぶ】2020年のグーグルSEO 10大トピック見逃してないかチェック!【SEO情報まとめ】 | 海外&国内SEO情報ウォッチ
miracle1998 2020/12/29
seo

グーグル

まとめ
リンク
動くWebデザインアイデア帳
サイト閲覧方法 1ウェブサイトへアクセス https://ugokuweb.coco-factory.jp/ugokuweb/ 新サイトはこちらから 2【ユーザー名】と【パスワード】が求められますので、以下の情報を入力してください。【ユーザー名】：ugokuweb 【パスワード】：指定のページ数を【半角数字3桁】で入力（例）30ページの場合は 030 と入力 ※黄色本をご購入の方：7-2「検索」の表紙ページ数 ※ピンク本（実践編）をご購入の方：9-4「SVGアニメーション」の表紙ページ数を【半角数字3桁】で入力してください。 3閲覧制限が解除され、サイトを閲覧できるようになります。ブックマークをしてご利用ください。 ※掲載されているコードは、2021年に出版された時のものをそのまま掲載しています。（jQueryのバージョン、プラグインのソースコードの書き方を含む）ソースコードの書
miracle1998 2020/12/29
アニメーション

CSS
リンク
【図解で納得】レスポンシブデザインのブレイクポイントの細かすぎる新解釈 [2022年更新版] - webのあれこれ
※前回の2020年12月からベゼルレスのiPad mini6（8.3インチ）が出たので更新しています。記事の詳細の内容はiPad mini6が入っていない内容です。 MacBookもM1チップでProじゃなくてAirで十分みたいになっていて、大きさやスペックが大きければいいみたいな時代は終わって、自分に合ったものを選ぶ人がより増えてきたように感じています。前回が2019年5月にレスポンシブデザインのブレイクポイントの記事を書いて、今でもたくさんのアクセスがあり、たいへん嬉しく思っています。そこで今回2021年に向けて内容を見直しました。最近発売されたベゼルレスのiPad AirやiPhone12 miniなど新しいサイズも増えて、より複雑になった印象です。 iPadのSplit Viewを気にしない人は、去年と同じ560px/960pxでも問題はないです。 hashimotosan
miracle1998 2020/12/09
css

レスポンシブ

ブレイクポイント
リンク
CSSのスゴ技！美しいグラデーションのボーダー、角丸や半円のテクニックを使用したチケットを実装する方法
CSSで実装された美しいグラデーションのボーダー、さらにはそれを角丸し、半円を加えたチケットを実装するスタイルシートのテクニックを紹介します。グラデーションのボーダーは割と簡単に実装できますが、角丸にするのは目から鱗でした。また、簡単なJavaScriptで3Dも再現されています。 Gradient borders with curves and 3d movement in CSS by Medhat Dawoud 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに 1. チケット自体の構築 2. グラデーションのボーダーを実装 3. 左右の半円を実装 4. カーソルの動きに応じたアニメーションを実装この実装で学んだことはじめに 2020年10月27日にNext.jsの初のグローバルユーザーカンファレンスが開催され
miracle1998 2020/11/17
css
リンク
【Photoshop入門】Webデザインをはじめよう！第1回デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog
The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。
miracle1998 2020/11/17
ui

デザイン

考え方
リンク
スマホで見られないページは2021年にグーグルから消える!? MFI強制移行で【SEO情報まとめ】 | 海外&国内SEO情報ウォッチ
2021年3月以降、あなたのサイトはグーグル検索から消えてしまうかもしれない ―― グーグルが来年以降に予定しているMFIへの強制移行で、スマホからアクセスできないサイトはインデックスされなくなるという。幸いなことに「スマホ最適化されていないサイト」ではないので、どんな形でもスマホからアクセスできれば消えることはないはずだが、官公庁・自治体などのサイトや、非常に古いサイトなどは状況を確認して対策するほうがいいかもしれない。ほかにも、今回は特にグーグル SEO関連のネタが多い。SEOに詳しい人向けの情報もあれば、SEOと広報の連携に関するトピック、多国語サイト向けの情報、ローカルSEOの話題などなど、SEOに携わる人なら知っておきたい情報をまとめてお届けする。コアウェブバイタルが悪いページはサイト内の別ページにも悪影響を与えるかもコメントアウトしたURLでもGooglebotはクロールす
miracle1998 2020/11/03
MFI

Google
リンク
【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい
そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400" alt="画像の説明"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般的（？）になっていました。また、widthとheight属性が記述してあってもCSSでwidth: 100%; height: auto;が指定されているとレイアウトシフトが発生してしまっていました。参考： img要素のサイズ属性の記述の有無についてのTwitterのアンケートなんでいまさら？なぜなら、2019年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか
miracle1998 2020/07/18
レスポンシブ

画像
リンク
WordPress 5.5がネイティブLazy-loadをサポート。画像にloading=”lazy”を自動追加し遅延読み込みさせる
[レベル: 中級] ネイティブ Lazy-load を WordPress 5.5 が標準機能として実装します。 <img> タグに loading=”lazy” を自動追加 width 属性と height 属性を追加してある <img> タグには loading="lazy" が記事出力時に自動的に挿入されます。記事作成者（＝あなた）は何もする必要はありません。 WordPress 側のバックグラウンド処理によりネイティブ Lazy-load が実装され、画像の遅延読み込みが実現します。もちろん、過去に投稿した記事にも適用されます。 CLS を防ぐために width/height が必要 loading="lazy" を WordPress が追加する画像 (<img> タグ) には width 属性と height 属性が存在していなければなりません。理由は CLS を防ぐため
miracle1998 2020/07/18
wordpress
リンク
IE First を避ける
まず、去年の実績として、IE のシェアが 9% から 5% になっています。 Browser Market Share Japan | StatCounter Global Stats 世界だと 1.4% です。これは途上国などでは Android Chrome が支配的だからです。 https://gs.statcounter.com/browser-market-share/all 国内で「IE シェア」などでググって出るサイトは 9% と出ていますが、これはデスクトップのみの数字で、モバイルを含めた数字は 5%前後です。日本はさらに Chrome ベースの新 MS Edge の正式リリースがコロナと確定申告の影響で延期されており、リリースのタイミングでさらに減ることが予想されます。去年の実績値でいえば、来年度には 2% 台、再来年には 1%を切っている可能性があります。これは to
miracle1998 2020/06/22
ie
リンク
待ってました、グーグル社員によるオフィスアワーが復活！ | 海外&国内SEO情報ウォッチ | Web担当者Forum
グーグル検索SEO情報②待ってました、グーグル社員によるオフィスアワーが復活！金谷氏とあんな氏は健在（ウェブマスターオフィスアワー 2020 年 06 月 04 日）国内情報金谷氏とあんな氏によるオフィスアワーは一時的に中断していたが復活した。いつもとは異なり、ライブではなく録画の配信であったが特に不満は出なかったようだ。 2 人が回答した質問は次のとおりだ。久しぶりのせいか、今までにないボリュームだ。検索パフォーマンスレポートの見方（0:11:00）各 Google サービスの集計結果が一致しない（0:14:35）FAQ 構造化データの数値の定義（0:16:40）アコーディオンでテキストを隠すのは問題か（0:18:44）検索結果に 1 ページ目までしか表示されない（0:21:50）ガイド付きレシピで謎のエラー（0:21:50）スマホページのみが検索結果に表示される（0:21:5
miracle1998 2020/06/22
google

検索
リンク
全モダンブラウザ対応のCSS機能が爆増。Chromium版Edgeのもたらす次世代CSS表現 - ICS MEDIA
全モダンブラウザ対応のCSS機能が爆増。Chromium版Edgeのもたらす次世代CSS表現 2020年初め、Chromium版のMicrosoft Edge（以下新Edge）がリリースされました。新Edgeは「Microsoft Edge Legacy」（以下Edge Legacy）と比べて多くの機能が使えるようになっており、Chrome・Firefox・Safariのモダンブラウザと遜色ないレベルになっています。先日5月29日にリリースされた「Windows 10 May 2020 Update」では、Edge Legacyの開発が終了することもアナウンスされており（参考記事「Windows 10 features we’re no longer developing - Windows Deployment」）、今後のWindows標準ブラウザは新Edgeとなっていくでしょう。ウ
miracle1998 2020/06/10
css

clearfix
リンク
https://hornnet.me/listener/kenshiyonezu_200201/
miracle1998 2020/01/26
あとで読む

米津玄師
リンク
1 2 3 4 5 6 7 8 9 10 次のページ