タグ

HTMLに関するhinailのブックマーク (6)

  • 【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年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか

    【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい
    hinail
    hinail 2020/07/02
    リンククリックしようとしたら、後から読み込まれた画像に押しやられて違うリンク先触っちゃうあのイライラが阻止されるのね。やった!
  • GUI環境でWeb の UIを構築する開発ツールを作りたい - mizchi's blog

    qiita.com という記事を書いた。 要約としては、「今こそGUIでWebのUIを生成できるような開発環境を目指すべき」みたいな話。 概念 Web の GUIの概念を分解すると JS はViewとしての実装を持つプレゼンテーションレイヤー、ロジック注入のコンテナーレイヤーに分割して考える HTML/CSS は、レイアウト定義のレイヤー、そのレイアウト領域を占めるエレメントのレイヤーに分割して考える この考え方に基づくと、GUI開発環境で作るべきものは、 テンプレートへのJSロジックのつなぎ込み レイアウトエディタ 個別のエレメントの装飾 となる。 JSロジックのつなぎこみはヘヴィにJSだからまだコードで書く方がいい。作るならノードベースのエディタになりそう。 エレメントの装飾は自力で頑張るより Sketch から生成できないか試したい。後回し。 レイアウトエディタは今でも作れそう。作っ

    GUI環境でWeb の UIを構築する開発ツールを作りたい - mizchi's blog
    hinail
    hinail 2017/12/17
    素敵だけど激重なサイトばかりできそう
  • 「プログラマでしょ?ホームページ作ってよ!」を1日で対応する - Qiita

    プログラマあるあるだけど友人からホームページ作ってよ!と言われることがある。 大体は適当な理由をつけて断るけど、1日程度で作る方法を模索してみた。 テンプレートをダウンロード 1から書いてる暇はないので適当なテンプレートを使います。今回はHTML5 UP!を使います。 HTML5 UP!のLicense 控え目でもCreditsをサイトに乗せれば無料で使用可能です。 以下はサンプル テーマはDirectiveを使用します。 フォームが付いててマークアップはそのままで使えそうですね。 開発環境 テーマがダウンロードできたら開発環境を準備します。 サーバーサイドは書きません。 Cloud9が便利そうだったので登録してワークスペースを作ります。Cloud9のワークスペースは一つなら非公開でも利用可能です。 以下のようにプロジェクトの情報を指定します。 ライブプレビュー準備 生成されたプロジェクト

    「プログラマでしょ?ホームページ作ってよ!」を1日で対応する - Qiita
    hinail
    hinail 2016/11/28
    tumblrのテンプレをちょっといじっとけばいいさ
  • これ知ってる?WEBの人なら押さえておきたいツール&サービス50選 - 死ぬまでWEB屋

    公開前に知人に見せたら、読むのに20分もかかったわ!! と、お叱りを受けましたw オススメのツールやWEBサービスということで50ほど紹介していますが、僕の使用感のほかに、ところどころ経験談的なものが入っています。そのあたり、読むのがめんどうな方は読み飛ばしていただければ幸いです。 2万文字近くあるので、お時間ある際にゆるりと読んでいただければと思います。 それではお楽しみ下さい! サイト解析に使えるツール・サービス import.io Juicer Ptengine GTmetrix CLOUD FLARE wayback timemachine シミラーウェブ Open Site Explorer サクラサクLABO aguse Built with ディレクションに使えるツール・サービス ウェブチェッカー Cat Mdes maindmaister ひとりブレスト 関連キーワード取得

    これ知ってる?WEBの人なら押さえておきたいツール&サービス50選 - 死ぬまでWEB屋
    hinail
    hinail 2016/08/29
    なんつうか勿体無い
  • おさがしのページは見つかりませんでしたか?

    おさがしのページは見つかりませんでしたか?
    hinail
    hinail 2016/04/12
    暇なんだな
  • 全くの初心者が独学でWeb制作できるようになるまでの効率の良い勉強の進め方

    独学でWebデザインやコーディングなどのWeb制作スキルを身に付けたい方向けのノウハウを紹介します。 Web制作のテクニックを学ぶ方法は、 研修やセミナーで学ぶ方法 スクールに通って学ぶ方法 お金をかけずWebサイトやを参考に学ぶ方法 の3つに大別できます。 しかし、研修やセミナーは開催地が都市部に偏っていますし、スクールに通うのは経済的な負担が大きいのも事実です。 そこでおすすめしたいのが自宅で学ぶ独学です。 筆者自身も全くの初心者の状態から独学でWeb制作のスキルを身に付けて今はそれをもとに仕事をしています。 独学中には勉強方法としての反省点や手ごたえを感じたことも多いです。 そこで、今回は筆者がWeb制作を独学する中で分かった、独学による効率の良い勉強方法についてお話しします。何から勉強をはじめていいのか分からなかった人の指針になるかと思います。 リアルなお話をしますが、独学ではじ

    全くの初心者が独学でWeb制作できるようになるまでの効率の良い勉強の進め方
    hinail
    hinail 2016/03/22
    真摯さが大事で、その中に最も確実な方法がある
  • 1