そうなんです。 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年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか
最近ではCSS3の対応ブラウザが増えたおかげで、画像を使わずともサイト上で色々な表現ができるようになりました。 CSSでデザインの実装を行う場合、｢カスタマイズやメンテナンスが容易」｢レスポンシブWebデザインとも相性が良い」｢画像を読み込まないのでモバイルユーザーにも優しい」｢Retinaディスプレイなど高解像度の環境で見ても綺麗」等、制作側とユーザーの両方にメリットがあります。 今回は、フラットデザインのWebサイトなどでよく見かける、シンプルな矢印アイコンのCSSをいくつかご紹介したいと思います。 目次： 共通HTML＆CSS シンプルな矢印アイコン シンプルな矢印アイコン シンプルな矢印アイコン（大） シンプルな太い矢印アイコン シンプルな太い矢印アイコン（大） 斜めの矢印アイコン 右上向きの矢印アイコン 右上向きの矢印アイコン（大） 右下向きの矢印アイコン 右下向きの矢印アイコン
【意外と便利！】特定の子要素を持つ親要素にcssスタイルを適用する方法 Web2017年3月27日 「特定の子要素を持つ親要素にcssを適用したい」というケースはしばしばありますが、css3を駆使してもこれを実現するセレクタは存在しません。そこで、jsを使って実現する方法を本記事ではご紹介いたします。jQueryでもVanilla JS（生のjavascript）でもどちらでも可能ですので、サイト環境に合う方法をどうぞお使いください。 サンプルコード html <ul class="hoge"> <li><p>特にスタイルを当てる必要なし</p></li> <li><p>特にスタイルを当てる必要なし</p></li> <li><p class="moge">これの親要素liにだけcssを適用したい</p></li> <li><p>特にスタイルを当てる必要なし</p></li> <li><p
こんにちは、さいとうです。 えー、これからCSSのとってもニッチなことについて語らせていただきますので、 興味の無い方はこちらの写真で和んでから、そっとページを移動してください。 −−− 擬似要素[::before]や[::after]は、指定した要素内の前後に文字を挿入するCSSです。 言葉で書いてもわかりにくいですね。 [html] <p class=“text”>おすすめアイテム</p> [css] p.text::before { content: “【NEW】”; } これをブラウザで表示した結果は、 【NEW】おすすめアイテム といった具合に、表示結果を見ると「おすすめアイテム」というテキストの前に「【NEW】」のテキストが挿入されています。 −−− では、「【NEW】」の代わりに「>」（半角の大なり記号）を入れてみましょう。 「>」はhtmlにおいてタグを指定する時に使用する
本文や見出しなどのフォントサイズをスマホ時やデスクトップ時で変える時、通常はMedia Queriesでスクリーンサイズごとに文字サイズを指定していると思います。 ここで紹介するフォントサイズの指定方法はちょっと新しいアプローチで、最初にベースとなるフォントサイズを設定し、スクリーンサイズが大きくなるにつれ、Viewport Unit（ビューポートの単位）で加算してサイズを大きくします。 Viewport Unit Based Typography 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Viewport Unit（ビューポートの単位）とは？ フォントのサイズ指定のためのビューポートの使い方 他の文字の要素をビューポートで指定 縦のリズムとモジュラースケールをビューポートで指定 フォントサイズの指定の精度をアップする さらに精
NHKの紅白歌合戦2018の出場歌手が発表になり、 出場歌手｜第69回NHK紅白歌合戦 この一覧でジャニーズの「Hey! Say! JUMP」の名前だけが画像だということが話題になった。 第69回NHK紅白歌合戦の出場歌手のページhttps://t.co/Z6lbjpIbMY "Hey! Say! JUMP" の文字がどうも選択できない。 HTML ソースを見た時、NHK の 「"Hey! Say! JUMP" を絶対にテキスト選択させまい！」 とする意地を感じた。 何で？ pic.twitter.com/dil9k9LVCA— nipotan (@nipotan) 2018年11月14日 しかも、ただの画像ではなくてこういうSVGが指定されている。 Web技術が使われててすごい。 なんでこういうことをやっているかというと、どうも a の字形にこだわっているためではないかという。 公式的に
パートタイム・エンジニアの職場で、情報共有のために「サイボウズLive」というサービスを使っています。外部サービスとの連携はなく、割と独立した設計であり、UI設計も含めて正直使いやすいとは言えないのですが、まあ僕が入ったときから使ってて改めて他の探してきて提案するのも面倒なので、使っています。業務連絡が投稿されたとき以外、ほぼ見てませんけど。 で、その「サイボウズLive」にて、去年の11月に「タイムライン」という機能が追加されました。 タイムライン機能を追加しました | チームのためのスマホアプリ サイボウズLive サービス全体の更新情報が、トップページで確認出来ますよという話なのですが、これが……微妙に邪魔。一番上に、画像を転載させてもらっていますが、この右側のフレームが「タイムライン」です。これ、可動式じゃないんです。ここに固定。しかも、幅固定。なので、ウィンドウ幅を小さくしていく
Twitterで「CSSで吹き出し作るのブクマし忘れててどこにあったか忘れた……」とかつぶやいたらe_luckさんがImage-free CSS Tooltip Pointers - A Use for Polygonal CSS?を探してきてくれた。このエントリでは枠線をつけるために入れ子になっていたりちょっとわかりづらかったので、ものすごく単純化して解説してみようとかなんとか。 Pure CSSな吹き出しのサンプル: Speech Bubbles とりあえず、吹き出しの尻尾を左下に出すもの(サンプル内では4つめのサンプル)を例にして説明していく。HTMLコードは以下のようなもので、bubbleというクラス名を振ったdiv要素がコンテナ、bodyというクラス名を振ったp要素が吹き出しのベース、tailというクラス名を振った空のdiv要素が尻尾になる。 <div class="bubble
昨日リリースしたTumblr用ツール「feedpost」で採用している技術を紹介するシリーズ。3回目はサイトデザインを支えるCSS「Responsive Grid System」。その名の通り「Grid System」でありながら「Responsive」であるという特徴を持った……なんだろう、「CSSテンプレート」とでも呼べば良いのかな？ その特徴や導入の仕方などについては、以下のサイトを読んでもらえれば大体わかるので気になる方は読んでみてください。 Responsive Grid Systemの仕様が変更となり、僕のレスポンシブデザインの作り方もちょっと変わりそうなので共有 | バンクーバーのうぇぶ屋 先日、WEB Designingさんに執筆させてもらったResponsive Grid Systemですが、なんと原稿が出来て入稿し、発売間近くらいのタイミングで仕様変更され、めちゃめちゃ
ダンプの結果を綺麗に整形して表示してくれるモジュール「Xdebug」はPHP開発の定番ですが、今開発しているサービスであるタイミングから表示が崩れてしまいました。具体的には改行されなくて1行になってしまう（上画像参照）。 PEAR/PECLの変更も行っていたのでサーバの設定の問題だと考えてあれこれいじっても直らず、結果的にはGridSystem導入によるリセットCSSの影響であることが解りました。なんだそれ。 具体的には、この部分。 xdebugの表示に使われている「pre」タグに「white-space: normal」が設定されてるために表示が崩れてたと。 わかってみれば超簡単なことで、難しく考えすぎてしまってました。問題の切り分けって大事ね。 というわけで 以下の設定を行って、リセットCSSの設定を上書きしてやればOK。 pre.xdebug-var-dump { white-spa
最近ずっと作ってきたものがようやくリリース間近になりました。 と言うことで、その中で勉強したことを何回かに分けてブログに書いていこうと思います。 第1回目は「Webフォント」とその応用である「アイコンフォント」について。 「Webフォント」について 前時代的な発想で言うと、フォントというのはパソコンの中に入っているものであり、Webサイトで使うフォントというのはどんな環境にも存在するフォントを選ぶのが常識でしたが、「Webフォント」という概念が出来て変わりました。「Webフォント」というのはフォント自体はWebサーバ上にあって、それを読み出して表示するという仕組みです。 「タイムラグがあって、そんなの使い物にならないんじゃないの？」実際に使ってみるまではそう思っていたのですが、実際に使ってみると0.2秒以下の速度で読み出し表示には殆ど影響を与えていませんでした。ユーザーの環境を考えずにフォ
CSSにおける色の指定はこれまですべて「#ff0000」形式で統一してきました。 理由は、 「色名指定」では柔軟な設定が出来ない（一段階濃くとか） ブラウザに解釈を任せたくない で、特に設定の柔軟性については、コーディングしている統合環境の補完で「aqua」「black」「brue」などの17色しか表示されないのもそう考える理由の1つになっていました。でも、違うのね、もっとたくさん指定出来る色名あるのね、というのが今回の本題です。いまさらですが知りませんでした。 参考になるサイトはたとえばこちら。 CSS/HTML色見本 全部で140色もの色名が色見本・RGB値と共にリストアップされています。これを見て自分がよく使っていた色が「OrangeRed」とか「DarkRed」で指定出来るんだと解ってちょっと目鱗でした。自分程度の柔軟性なんて、既に設定されている範囲の中でしかなかったです。なんとま
概要 ▶ 様々なフォントがWebで利用できるモリサワのWebフォントサービス《TypeSquare》が話題になっていますね。TypeSquare [タイプスクウェア] 2012年12月末まで無料で利用できるので、Web業界の人や印刷業界の人が試しているようです。 しかし、この Webフォントサービス、試した方からは意外に不評の声もちらほら…。それは本文組にWebフォントを使用して、Windowsのウェブブラ 様々なフォントがWebで利用できるモリサワのWebフォントサービス《TypeSquare》が話題になっていますね。 TypeSquare [タイプスクウェア] 2012年12月末まで無料で利用できるので、Web業界の人や印刷業界の人が試しているようです。 しかし、この Webフォントサービス、試した方からは意外に不評の声もちらほら…。 それは本文組にWebフォントを使用して、Windo
ブログにコードの一部だけを載せたいようなとき、githubのgistにアップしてその埋め込みをブログに貼るというのを良くやるのですけど、このところずっとその埋め込みの表示が崩れて難儀してました。 上の画像にあるとおり、 スクロールバーが2重に出てしまう コードの一番上に隙間が出来る 行番号とコードの行がずれる といった感じに崩れてしまって、コードは読めるものの見栄えがよくない。とはいえ埋め込みってことは通常CSSの管理はサービス側の仕事だし、こっちでやれることはないんだろうな……と思ってたらそうでもなかった。これiframeじゃなくて生のHTMLタグを書き出してるんですね。そうだったのか。だからCSSをこちらで設定してやれば崩れるのを修正出来ると。 調べてみたら対策もきちんと公開されてました。 参考サイト Gistの埋め込みが崩れる(2013/02) – Enjoy*Study gistの
Stream or download 'One Man Acapella': https://linkco.re/h3b1qV3S Connect with Inhyeok: https://www.instagram.com/inhyeok_yeo/ https://twitter.com/InhyeokYeo https://www.facebook.com/InhyeokYeoOfficial https://inhyeokyeo.wixsite.com/inhyeokyeo ► Sound and Video Produced by Inhyeok Yeo ► The Wonderful Chorus Arrangement from the group "Duwende" ► Engineered & Mixed by Global Sound(http://www.glob
「CSS Sprites（CSSスプライト）」についてまとめます。 すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までたくさんヒットしますが、それ故、どの方法が一番ベストなのかってのがいまいち不確かだったので、個人的にまとめ直してみることにしました。 TwitterやFacebookのスプライト用画像 CSSスプライトは、サイトの読み込みを高速化する目的で使われているCSSの小技です。TwitterやFacebookなどでは、ちっこいアイコンとかマークを表示するのに使われてますね（2012.8現在）。 具体的には「サイト内で使用するたくさんの画像（パーツ）をなるべく一枚画像にまとめて、サーバへのリクエスト回数を少なくする」という事をやってます。 画像とCSSだけで高速化が実現できるので大変お手軽なのですが、CSSスプライト用の画像を用意するにはちょっとした工夫が必要
Insert page content here. どうやら「row」クラスに設定されている「margin-bottom:20px」がなぜか上側にも反映されているらしい。問題が起きるのはFirefoxだけで、IE9、Chromeでは全く問題なく表示されました。 （Safariはしらん） 結論：clearfixのheightを0.01pxに変更する clearfixで設定されている「height: 0」が拙いらしい。情報はこちらから。 firefoxでmargin-bottomがmargin-top | 乱雑モックアップ 解決策を示してくれたのはhail2uさん。 @makoto69 http://j.mp/dUeCOu は height: 0.01px; にすると回避できるですよ http://j.mp/hl1k2K — がまなしうきょさん (@hail2u_) 3月 20, 2011 R
CSS frameworks are pre-written CSS files that help web designers and developers create websites faster and more efficiently. They are perfect for those looking to launch projects without getting bogged down in the details of coding CSS from scratch. In this collection, we’re focusing on smaller, lightweight frameworks. These minimalist frameworks all offer a simpler alternative to more comprehensi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く