【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年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか
IDを使わないCSSの設計 - kojika17
CSSのスタイリングではIDを使用しない、という話をよく聞くようになりました。 私も最近は、IDを使わずにコーディングしているので所感を書きます。 CSSでIDを使わない 「IDを使わない」ということをHTMLの変化で示すと、以下のようになります。 <div id="header" class="clearfix"> <h1 id="logo"><a href="">logo</a></h1> <ul id="heaeder-info"> <li class="about"><a href="">about</a></li> <li class="sitemap"><a href="">sitemap</a></li> </ul> </div> ↓↓↓↓ <div class="header clearfix"> <h1 class="logo"><a href="">logo</a></
総まとめ: Bootstrapの無料で高品質なテーマファイルがダウンロードできるサイト
ランディングページ、プロダクトページ、スモールビジネスなどの商用、ポートフォリオ、ギャラリー、ブログなどの個人で利用できるBootstrapをベースにしたサイトが作成できる無料のテーマ・テンプレートがダウンロードできるサイトを紹介します。 コンテンツのコンポーネント、ナビゲーション、サイドバーやフッタのウィジェットもあり、カスタマイズする際の参考にもなると思います。
Bootstrapで日本語をより美しく表示させることにこだわった無料のテーマ -Honoka
Bootstrapは人気のフレームワークですが、日本語のコンテンツを表示するために最適化されているとは言えません。フォント指定・文字サイズをはじめ、日本語をより美しく表示するためのさまざまなアプローチを取り入れたテーマ「Honoka」を紹介します。 単に使用するだけでなく、他のものでも日本語を美しく表示させるのに役立ちます。 Honoka Honoka -GitHub 日本語フォントは、たくさんのフリーフォントがあります。 2017年用、日本語のフリーフォント 259種類のまとめ Honokaの特徴 Honokaのデモ Honokaのアプローチ -Bootstrapでの日本語表示最適化 Honokaの利用方法 Honokaの特徴 Honokaは、Bootstrapでより美しく日本語を表示させることにこだわったオープンソースのテーマファイルで、これをベースにWebサイトを作成したり、既にBo
フロントエンドの実装から見る第四十七回衆議院選挙 開票速報ページまとめ - 暮らしの技術
700億円ほどのお金がかかっているといわれ，why-kaisan.comなんてサイトも作られ巷を賑わせた第四十七回衆議院選挙の投票日が今日でした．投票日と言うことはその後に来るのは開票で，開票と言うことは開票速報がはじまるわけです． 報道各社を見てみますと，各々工夫を凝らした開票速報ページを用意しておりまして，これがなかなかおもしろいということで，その比較でございます． まとめ 長いので先にまとめです． まずテレビと新聞で圧倒的に態度が違います．テレビはあくまで番組の補助だったり宣伝が目的．ウェブページではあまり情報を出したくない様子です．一方新聞各社は トップページ上段，ファーストビューのど真ん中を思いっきり使い，文字通り全面展開といったパターンが多い． フロントエンドの実装から見ると，基本的にグラフが必要な場面ではCSS，日本地図が必要な場面では「画像+mapで部分リンク」か「要素の絶
windows_98.css·昔懐かしい。Windows 98風スタイルシート MOONGIFT
みんな大好きWindows。その大きな転換になったのはWindows 95やWindows 98だったんじゃないかと思います。徹夜して並んで大騒ぎしたなんて懐かしい記憶がある方もいるのではないでしょうか。 そんな懐かしいWindows 98を思い出させてくれるスタイルシートがwindows_98.cssです。使い道はあれですが技術的にはとても面白いです。 windows_98.cssの使い方 例えばこんな感じ！懐かしいダイアログですね。 リサイズもできる！ 例えばリサイズできるダイアログはこのようになっています。 <div class="resizable window"> <div class="header"> <img class="icon" src="icons/txt.gif"/> Untitled - Notepad <div class="buttons"> <button
複数ブックマークサービスに一括対応できるAddThisを導入する前にいろいろ調べたのでメモ
ブックマークやTwitterへの投稿、Facebook のいいね！をしやすいようにボタンをサイト側 で設置するのはもはや当たり前のようになり つつあります。僕も例外なく、昔から貼ってる んですが、どんどん新しいのが出てきて、結構 面倒なので、よく見かけるAddThisを導入する ことにしました。 AddThisは国内でもよく見かけるので認知度的にいいかなと思ったんですが、ドキュメント見てみたらそこそこカスタマイズ出来るようなのでちょっと導入前に軽く調べてみましたのでついでにメモします。 いろいろな所で見かけてるかと思いますので説明はいらないですよね。世界中のソーシャルサイトをまとめてくれているサービスです。 多少ごちゃ付いてきたので遅ればせながらAddThisを導入してみようかなと思ったんですが、いろいろとカスタマイズ出来るようなので以下に調べた事をメモとして残しておきます。 初めに まず
今からでも間に合う！レスポンシブWebデザイン作り方のまとめ
photo by Scolirk 地方でもマルチデバイス対応を求められることが多くなってきました。 徐々に対応しているところが増えてきたためだと思います。 私も昨年からレスポンシブWEBデザインについて、 対応する必要がありましたので、調べたものをまとめてみました。 もくじ レスポンシブWebデザインとは？ ギャラリーサイト レスポンシブWebデザインの作り方 画像の切り替え・最適化 レスポンシブ対応のフレームワーク レスポンシブ対応のライブラリ サイトの高速化 レスポンシブWebデザインとは？ 2年程前から流行し始めたレスポンシブWebデザイン。 基本的な考え方、メリット・デメリットを理解しておかないとトラブルの元になります。 レスポンシブWebデザインの基本 レスポンシブWebデザインの基礎 必読！5分でわかる流行のレスポンシブWebデザインまとめ | 株式会社LIG 5分で分かるレス
フロップデザインフォント
フロップデザインフォントという商用可の日本語フリーフォント フロップデザインフォントは、どなたでも自由に無料でダウンロードして、商用・非商用問わず使用できる日本語フリーフォントです。このフォントは第二水準の漢字も含まれ、ワープロ、Adobe製グラフィックソフトなどのアプリケーションで自由に加工して使えます。ひらがな、カタカナ、アルファベット、数字をオリジナルで制作し、残りの部分をM+FONTで補いました。またM+FONTで不足している漢字をIPAゴシックで補完しています。 フォントのデザイン特徴について 水平、垂直の線がデザインの基本となっているシンプルなゴシック体の日本語フォントです。暖かみのある手書きを感じさせるひらがな、シャープなイメージのカタカナ、スマートでデザイン性の高いアルファベット（英語）、スタンダードで読みやすい数字とそれぞれ異なる考えに基づいて作られたフォントです。しかし
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」:phpspot開発日誌
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 2011年04月07日- Google image search style image alignment with jQuery Atteeeeention plugin | DreamersLab 異なる幅・高さの画像も超綺麗に並べられるjQueryプラグイン「Atteeeeention plugin」。 <img>でただ単に画像を並べると、幅、高さの違いから、ページがごちゃごちゃしてしまいますが、このプラグインを使うことでGoogle の画像検索のように綺麗にピッチリ並べられます。 普通に並べるとちょっと残念なことに。空白ができちゃいます。 プラグインを使うことで、あら綺麗。となります。 Firefox は 2以上、IEは6以上ということで殆どのブラウザに対応。 まず、必要な
Height equals width with pure CSS
Single page demo Description If you have an image with a certain aspect ratio you can easily keep the proportion with the "auto" value. Like: img{ min-width: 100%; height: auto; } The problem is that you can't use the "auto" value for the height property of a block element like a DIV or alike. It will always resize depending on the inner content/elements. The trick I found a solution which was alr
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
『JSF2.0 jsfc 属性を使用することのメリット 編』
赤び～の備忘録 & 子育て月記 Linux/Mac関連の個人的な備忘録と第一子の育児記録です。 Xen、KVM、Java、Eclipse、JSF2.0 を中心にまとめています。 現在は CentOS 6.3 の 64bit と Mac OS X 10.8 をメインに使用中です。 「JSF2.0 画面 (XHTML) とビジネスモデル (ManagedBean) の連携 編」で JSF を使用したシンプルな画面 が完成しました。 作成した hello.xhtml では「jsfc」属性を使用することで JSF タグを指定していますが、もっとシンプルな (コーディング量を減らした) hello.xhtml を作成することも可能です。 1. jsfc 属性の使用有無で異なる hello.xhtml jsfc 属性の使用有無によって hello.xhtml がどのように変わるのか比較してみます。 な
Flexbox | web.dev
Flexbox Stay organized with collections Save and categorize content based on your preferences. The CSS Podcast - 010: Flexbox A design pattern that can be tricky in responsive design is a sidebar that sits inline with some content. Where there is viewport space, this pattern works great, but where space is condensed, that rigid layout can become problematic. The Flexible Box Layout Model (flexbox)
Headroom.js - UI/UX向上。上にスクロールすると表示されるヘッダーバー MOONGIFT
ヘッダーによって表示領域が狭まってしまうのを嫌う方にお勧めです。 最近のWebデザインではヘッダー部分を画面上部に常に表示するのが一般的になってきています。いつでもヘッダーにアクセスできて便利な反面、そのために表示領域が限られてしまうという点においてちょっとした不便さを感じます。 そこでiPhoneにおいては最近はヘッダーやフッターを普段は隠しておいて、上にスクロールしようとしたタイミングで表示させるというスタイルを導入しています。同様の仕組みをWebブラウザでも実現するのがHeadroom.jsです。 実際に使ってみます。まずはトップを表示した瞬間は以下のように表示されます。 表示直後。 このままスクロールするとヘッダーは自然と上に流れていきます。 そして上にスクロールするとヘッダーがするするっと出てきます。 画像だと分かりづらいと思うので動画でご覧ください。 使い方は幾つかあり、単独は
もしも10分の1の行数でHTMLが書けたら
Zen-Codingとは 1年ほど前から、Zen-Codingが話題になっています。Zen-Codingを使うと、特定の省略された記法を展開できます。この展開が非常に強力で、ちょっとしたHTMLを記述するのであれば、Zen-CodingでHTMLやCSSのマークアップを効率的に行えます。 Zen-Codingはさまざまなテキストエディタに対応したプラグインとして提供されています。プラグインには、公式対応しているものと、サードパーティの開発者が作成したものがあります。 それぞれのプラグインによって、実装機能が異なる場合があります。これらのプラグインの詳細はZen-Codingの公式サイトから確認できます。 基本的な使い方 ここからはZen-Codingの基本的な使い方を解説します。Zen-Codingをテキストエリアで利用できるサンプルを用いて、実際に試しながら読み進めてください。テキストエ
CSS3アニメーションの基本
CSS3アニメーションの基本：脱エンジニアっぽさ！ クライアントの笑顔を引き出すCSS3アニメーション（1）（1/3 ページ） エンジニアの立場でデザインまで積み上げていくのは、なにかと難しいもの。脱エンジニアっぽさを演出し、クライアントの笑顔を引き出す、CSS3アニメーションを紹介する。 クライアントさんからのさまざまな難しい要求を解決し、ようやく納品にこぎ着けたのに、クライアントさんから出た言葉は「ちょっとやぼったいね……」というつぶやき。Webエンジニアの方からよく耳にする嘆きの声です。エンジニアの立場でデザインまで積み上げていくのは、やはり難しいですよね。 しかし、いわゆる外観としてのデザインの他に、クライアントさんを「おっ！」と思わせる便利な手法が1つあります。それは「アニメーション」です。 Webサイトでの小気味良いアニメーションは、そのユーザー体験を豊かなものにしてくれます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
フロップデザイン｜FLOP DESIGN｜フォント｜グラフィック素材集｜シルエット｜写真背景アイコン