サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフーTechBlog TL;DR:2022にフロントエンド開発で最も考慮すべきユーザー環境は、パフォーマンスでは低スペックのAndroid端末、標準仕様では2年前のSafari、そしてネットワークでは４Gです。それに対してはJSへの過剰依存などが原因で主にパフォーマンスの面でのウェブ全体の対応がよくありません。 こんにちは！LINEフロントエンド開発室のダバロス アランです。この記事のタイトルを見て「釣りタイトルですね〜」と考えている方がいると思いますが今回に限ってはそれを大目に見てください。それはなぜかと言いますと、2021年から2022年にかけて私たちフロントエンドエンジニアが全体的に考え方を改める必要が出るほど大きな変化がありました。 その変
Free for commercial or personal use by DimaBraven. WebGradients is a free collection of 180linear gradients that you can use as content backdrops in any part of your website. Easy copyCSS3 crossbrowser code and useit in a moment! We've also prepared a .PNG version of each gradient. As a bonus, there are packs for Sketch & Photoshop.
HTML5の内容ではありませんが、IEの仕様でどうしても確認しておきたいものがありましたので検証してみました。 IEの気になる仕様は下記のスタイルシートの制限についてです。 (1) IE9以前で1つのCSSファイル、または1つのstyleタグ内のセレクタは4095個目までしか適応されない。 (2) IE9以前でCSSファイル、またはstyleタグは31個目までしか適応されない。Microsoft サポート http://support.microsoft.com/kb/262161/ja http://support.microsoft.com/kb/262161/en-us 普通にコーディングする分には問題無いように思いますが、SCSSなどを使用した際にうっかり4096個以上のセレクタが指定されてしまう可能性が無いとも言えないので軽視できません。 検証1 早速(1) 「IE9以前で1つ
タイトルの通りですが、アイコンの上にマウスを乗せると吹き出しが現れるサンプルを紹介します。今回は現れる動きが違うサンプルを5つ用意しましたので、気に入ったものがあればうれしいです。Chrome、Firefoxの最新バージョンやIE10だとすべてのサンプルが動きます。CSS3のtransitionやrotateが使えないブラウザでも機能的には問題はないと思います。opacityが使えないIE8以下はちょっと厳しいですが、最後に少し対応法を紹介します。 では、一番上のサンプルを解説します。HTML まずはHTMLから。 HomeTwitter FacebookRSS Setting a要素がアイコンで、span要素が吹き出しです。アイコンはWebフォントで表示します。 続いてCSSです。いつも通りまずは全部載せます。 @font-face { font-family: 'typicon
floatを解除する手法のclearfix と 次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するにはCSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくな
こんにちは、鴨田です。 今更感はすごくあるとは思いますが、 コーダー初心者でも簡単なJavaScript/jQueryのコードで、 ちょっとした運用を楽に出来るTipsを紹介したいと思います。 １．現在見ているページのナビゲーションをアクティブにする JS if (document.URL.indexOf("001.html") != -1) { $("nav a.top").toggleClass("on"); } else if (document.URL.indexOf("002.html") != -1){ $("nav a.list").toggleClass("on"); }
諸事情あって、iframeの中身をフレーム外側のページからJavaScriptでスクロールできるのを作った。 ふつうは別ドメインのページをiframeに読み込むとスクロールできないんだけど、（marginに負の値を入れたりして）iframeごと上下左右に動かしたり、iframeの外側にbox要素2つ付けてはみだした部分を表示しないようにcssでなんか色々やったりしたらそれらしい物ができた。 デモ XFrame.js shokai/xframe.js ·GitHub 使い方は簡単である js読み込んで <script src="xframe.js"></script> XFrameを出したい箱を作って <div id="tv"></div> 読み込む var xframe = new XFrame("div#tv"); xframe.load("http://shokai.org"); あ
CSS おれおれ Advent Calendar 2012 – 19日目CSS 3では色の指定にhsl()を使う事が出来ます。すなわち色相 (Hue; 0-359)、彩度 (Saturation; 0%-100%)、輝度 (Lightness; 0%-100%) による色の指定です。さらに不透明度を加えたhsla()もあります。 グラデーションをlinear-gradient()で実現するとき、このhsl()を使うと綺麗に記述する事が出来ます。 実例 こんなグラデーションを実装します。 #rrggbbを使ったグラデーションの例 まずは#rrggbbで書いた例です。 background-image:linear-gradient(top, #ffffff 0%, #a3daf5 50%, #75c7f0 51%, #19a1e6 100% );
CSS おれおれ Advent Calendar 2012 – 05日目 横幅いっぱいに広げようとしてwidth:100%を指定したら横スクロールバーが出ちゃった、という経験ありませんか？ その原因と仕組み、回避策についてお話しします。 わりとFAQな感じ。これは是非覚えておいてもらいたいです。というか知っておいてください。 はみ出した例 position:absoluteないしposition:fixedを使った際にこうなっちゃう事が多いと思います。 上部から出てきたメッセージ欄、横にはみ出てますね。 でも指定はちゃんとwidth:100%です。「幅いっぱい」を指定しているのに、どうしてはみ出てしまったんでしょうか。 「幅」が意味するところ 実はCSSの仕様が定めるところの「幅」というのが、我々が視覚的に認知している「幅」と異なっているのが原因です。CSSではこんなものを定めています。
1リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
