ウェブデザインにおけるline-heightについて | Rriver

2021/04/23 369 users ウェブデザイン line-height figma 曲者 挙動

ウェブデザインにおけるline-heightってけっこう曲者で、CSSを理解してデザインしないと「空き」の設計が破綻したりコーディングで苦労することになります。FigmaやAdobe XD、Affinity Designerなどのグラフィックアプリでline heightの扱いが異なるので、使うツールの挙動を理解するのも大切です。 ということで、今回... 続きを読む

【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい | Rriver

2020/07/02 650 users height link jpg width img要素

そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般... 続きを読む

CSS Gridを使うならマスターしておきたいauto-fillとauto-fitの違い | Rriver

2018/02/21 106 users Repeat グリッドレイアウト minmax レイアウト

CSS Gridって本当に便利だなぁと思う今日この頃ですが、そのなかでも特に注目しているのが repeat() と minmax() です。この2つのCSS関数を使うとグリッドレイアウトの構築が楽になるだけでなく、CSS Gridだけで メディアクエリなしでもレスポンシブなレイアウト が実現できます。 今回はその repeat() で使える auto-fill と auto-fit という値につい... 続きを読む

もう、レスポンシブでいいんじゃない？ – Rriver

2016/11/17 466 users ワークフロー レスポンシブ レスポンシブWebデザイン 視点

先月末、 藤井さん の働く 株式会社ザッパラスさん にお邪魔して、レスポンシブWebデザインの基本のキ的なお話しをさせていただきました。 題して「もう、レスポンシブでいいんじゃない？」 いま、改めてレスポンシブWebデザインについて考えるきっかけになれば、という視点で内容をまとめてみました。 4年前に「 レスポンシブWebデザイン 制作の実践的ワークフローとテクニック 」という本を執筆したんですけ... 続きを読む

面倒なレスポンシブイメージの画像作成を自動化してくれる神ツールとブレイクポイントの考え方 – Rriver

2016/10/17 216 users pngquant 手動 レスポンシブイメージ ウェブサイト

レスポンシブイメージ、使ってますか？ ウェブサイトの表示パフォーマンスの最適化をする際に、一番手っ取り早いのが画像の最適化です。そこで、 イメージオプティム とか Mac Automatorとpngquant などのツールを駆使して一生懸命に画像自体を最適化したり レスポンシブイメージ を使って画像を出し分けたりするわけですけども、特にレスポンシブイメージは手動でやるのは正直言ってかなり面倒です。... 続きを読む

印刷したら崩れてた！？印刷用CSSのスタイル確認と修正に便利なChrome DevToolsのエミュレータ機能 – Rriver

2015/05/23 125 users ウェブページ ユーザ 昨今 レイアウト エコ

印刷したら崩れてた！？印刷用CSSのスタイル確認と修正に便利なChrome DevToolsのエミュレータ機能 いつでも、どこでもネットにアクセスできる昨今、ウェブページを印刷する機会は減っているかもしれません。でも、いざ印刷したらレイアウトやスタイルが崩れていて使えないものになっていたらユーザに申し訳ないですよね。紙の無駄使いになってエコじゃないですし。 ということで、今回は自分メモ的にプリント... 続きを読む

デザイナーやディレクターも知っておきたい、ページ表示速度の高速化の基本 – Rriver

2015/05/05 909 users ワークフロー ユーザ エンジニア フロントエンド 規模

スマホからウェブにアクセスするユーザが増え、ウェブサイトの表示速度の高速化がより重要な制作の課題になっています。1ページもののサイトなら、フロントエンド・エンジニアが一人で実装できるかもしれませんが、ある程度の規模のウェブサイトではワークフローやサイト全体の設計にも関わってきます。また、表示速度の高速化の方法を知らなければ、最適化しやすい、より高度なデザインは実現できないでしょう。エンジニアだけで... 続きを読む

なんでもかんでも<picture>要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点 – Rriver

2014/10/06 407 users picture レスポンシブ cloud CSS HTML

なんでもかんでも<picture>要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点 画像表示のマルチデバイス対応をHTMLとCSSのみで実現できる「レスポンシブ・イメージ」ですが、効果的な使い方をするには、いくつか注意点があります。プロダクション・サイトで使えるようになるまでにはもう少し時間がかかりそうですが、基礎と注意点くらいは今から覚えておいても良さそうです。 Cloud ... 続きを読む

Appleがトップページで自動送りカルーセルをやめた理由 – Rriver

2014/09/23 712 users Appl カルーセル ぼっち Apple 世間

世間のみなさんがiPhone 6の発売開始で盛り上がっているなか、Rriverでは、まだAppleウェブサイトで盛り上がっておりますw 先日のiPhone発表後にAppleウェブサイトが刷新されたのはご存知の通りですが、その際、Appleのトップページ では自動送りのカルーセルのみが使われていました。 こんな感じで。どーん！と。 画像の下にあるポッチでカルーセルであることがわかりますね。 Appl... 続きを読む

HTML5やCSS3のブラウザサポート状況を簡単に調べられる「Can I use…」のGoogleアナリティクス連携が便利 – Rriver

2014/07/05 234 users settings ユーザ Googleアナリティクス データ

HTML5やCSS3のブラウザサポート状況が確認できるcaniuse.comのベータ版が2014年6月に公開され、デザインが刷新されました。 このベータ版のデザインの良さにも驚きましたが、なにより驚いたのはGoogleアナリティクスとの連携機能でした。ベータ版の「Settings」から設定を行うと、Googleアナリティクスのデータを読み込むことができ、自分のサイトに訪れるユーザが使うブラウザで、... 続きを読む

Rriver » レスポンシブWebデザインは臨機応変に使うのが良い

2013/04/16 120 users RWD レスポンシブWebデザイン 深度 手法 相性

「レスポンシブWebデザイン」が題に入る本を書いてはいますが、レスポンシブWebデザイン（RWD）という手法を選択しなければならない、絶対にRWDでなければならないという理由はないと考えています。なぜなら、プロジェクトごとに向き不向きはありますし、そもそも発注側の企業文化や制作会社との相性、信頼関係の深度などによっては、RWDという制作の手法が向いていない可能性もあります。 そう考えると、なんでも... 続きを読む

Rriver » レスポンシブWebデザインのサイトに「デスクトップ表示」ボタンが必要な2つの理由

2013/01/23 147 users RWD レスポンシブWebデザイン ボタン レイアウト 理由

レスポンシブWebデザイン（RWD）で作ったウェブサイトを運営しはじめてから気になっていたことが一つあります。それは、RWDで作られたウェブサイトでもデスクトップ版のレイアウトが見られるようにする機能が必要かという疑問です。僕が書いた本でもp.176のコラム「レスポンシブWebサイトでも『PCサイト』ボタンが必要？」で触れた内容ですが、先日のBruce Lawson氏のブログ記事を読んでいて、再び... 続きを読む

Rriver » レスポンシブWebの時代だからこそ見直すべき、3つの「ウェブの哲学」

2012/07/20 110 users 未来 歴史 衝撃 ウェブ制作 基本理念

先日、「A Dao of Web Design」という記事を読んでいて衝撃を受けたので、このブログでもご紹介したいと思います。この「A Dao of Web Design」には、ウェブ制作の歴史と未来が記されています。当時は存在すらしなかった「レスポンシブWebデザイン」やウェブの基本理念である「One Web」にも通じる内容です。 この記事が書かれてから12年以上たっていますが、日本のウェブ制作... 続きを読む

Rriver » 次世代HTMLの新仕様「レスポンシブ・イメージ（仮）」についてまとめてみた

2012/06/30 374 users レスポンシブ イメージ 新仕様

レスポンシブWebデザインを実装する際、画像の扱いは一つの課題として残っています。現在、PHPを使用した「Adaptive Images」やJavaScriptを使った「Responsive-Images」などが現実的な対応策としてありますが、どちらもApacheの設定を必要とします。レスポンシブWebデザインが広まって標準的な実装方法の一つになろうとしている今、サーバサイド技術に依存しない解決策... 続きを読む

Rriver » レスポンシブWebデザインのウェブサイトを半年運営してみて思ったこと

2012/05/01 625 users RWD リニュー レスポンシブWebデザイン 半年 はや半年

昨年2011年10月に仕事で運営に携わっている大学ウェブサイトでレスポンシブWebデザイン (しかもフル可変グリッドレイアウト) を導入して、はや半年。約6ヶ月間、レスポンシブWebデザイン（RWD）で制作したウェブサイトを運営してみて思ったことをまとめてみました。これからレスポンシブWebデザインを導入したいと考えている方の参考になれば幸いです。 プロジェクトの概要 大学のウェブサイトをリニュー... 続きを読む