【HTML＆CSS】初心者が躓きがちなスタイリングについて解説してみた - Qiita
はじめに はじめまして！ DMM WEBCAMP Advent Calendar 🎄 7 日目を担当することになりました、@k_uki512と申します！ Webアプリケーション開発において、HTML＆CSSを使用したフロントエンド開発は避けて通れません！ですが、実際にCSSを書いてみると自分の思ったようなスタイリングができないことも多いと思います。 そこで今回は、初心者が躓きがちなスタイルの事例とその解決策をいくつか紹介していきたいと思います！🙌 対象者 CSS（SCSS）によるスタイリングに苦手意識がある方 ホームページ制作,LP制作（web制作） にも興味がある方 基本的な HTML&CSS を学習後、更にステップアップしたい方 簡単なFlexBoxのスタイリングについて知っていると更に良い（横並び、中央揃え程度でOK） 本記事では、Bootstrap や Tailwind CSS
【2023年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例
この記事では、フォントを指定するためのCSSプロパティ「font-family」の書き方について一から詳しく解説します。font-familyを設定したことが無い方でも、正しくフォントが指定できるように、プロパティの書き方から、OSごとの設定の違い、おすすめのフォント設定例などもご紹介します。 「font-familyはいつもコピペしている…」なんて方も、正しい知識が有るか無いかは大きな違いです。ぜひこの機会に、font-familyの正しい設定方法をマスターしてください。 ※本記事は、各OSの標準インストールフォントや、ブラウザのアップデート状況などを踏まえて、なるべく最新の情報をお届けできるように、内容を随時更新しています。著者の調査した情報に基づいて執筆しているため、内容に間違いや不備のある可能性もあります。（最終調査日：2023年7月） font-familyの役割とは CSSのf
Bootstrapの水平中央の設定(text-center, d-flex) - Qiita
Bootstrapの水平方向の中央配置の設定が、いまいち理解できていなかったので、軽くまとめました。 特に text-center justify-content-center の使い方が理解できていなかったので、そういう方の参考になればと思います。 画面イメージ ソースコード <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- Bootstrap --> <link href="https://cdn.jsdel
HTMLメールの最近の実装方法を解説、tableは不要になりました
HTMLメールの実装で「tableか、、、」とため息をついていた人に朗報です。 tableを使用しなくてはいけなかった理由はWindows上のOutlookだったのですが、新しいOutlookではレンダリングエンジンがEdgeに切り替わります。これにより、tableによる実装は不要になります。 HTMLメールの最近の実装方法を解説します。 Modern HTML email (tables no longer required) by Ollie Williams 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLメールの実装でもっとも頭を悩ませている問題 今日、HTMLメールをどのように実装すべきか？ 電子メール用のAMPについて 終わりに はじめに MailChimpによるHTMLメール実装のベストプラクティ
HTMLが強みになる解説書、アクセシビリティやユーザビリティに配慮したコーディングを学べる -武器になるHTML
Webページを実装する際に重要なのは、HTMLです。しっかりと確かなHTMLが書けないと、CSSやJavaScriptにも影響を与えてしまいます。 HTML Living Standardに基づいた知識、アクセシビリティやユーザビリティに配慮したコーディングを学べる、HTMLのみに特化された解説書を紹介します。 本書は仕事としてWeb制作に携わっている人、真剣に取り組んでいる人向けの解説書。確かなコーディング力を身につけるためのHTMLのみに特化されています。私の見落としがなければ、CSSに関して本書は0です。 HTMLの基礎知識から、文章構造、ページ構造、アクセシビリティやユーザビリティに配慮したマークアップについてしっかりと学べ、スキルアップになる一冊です。
お前らはまだ img タグの alt 属性の付け方を間違っている - Qiita
1行で alt属性は、「全ての 画像をそのalt属性のテキストに置き換えたときにページの意味が変わらない 」ようにつける。 （HTMLの標準規格書より） マジでこれに尽きる。 具体例 例１：ロゴ ❌ 間違ったマークアップ
【図解】ちゃんと理解するフレックスボックス【CSS】 - Qiita
はじめに CSSによるページレイアウト Webページのレイアウトを作るとき、要素の位置を操作するCSSはいくつかあります。 代表的なものとしては下記です。 通常フロー フレックスボックス グリッド フロート（ほとんど使わない） 位置指定（position） 表レイアウト(table) など 通常フロー CSSが何も適用していない場合、Webページ上の要素はもともとHTMLが持つルールで表示されます。 ブロックレベル要素のコンテンツは、親要素の幅の100%で、高さがコンテンツに準じます。 インライン要素は、コンテンツと同じ幅・高さを持ちます。 視覚的にみると以下のような感じです。 <div class="container"> <div>ブロック要素です。</div> <span>インライン要素です。</span> </div> .container{ height: 200px; back
書評『HTML解体新書』 - uhyo/blog
皆さんこんにちは。今回は、2022年4月19日発売の『HTML解体新書』を読み終わったので、書評という形で感想と紹介を述べたいと思います。筆者はもともと技術書を読まず「ネットでいいやん」派だったのですが、このたびTypeScript入門書を出版したこともあり、それを過去の話として葬り去るべく技術書を読んでいくことにしました。せっかくなので、読んだ技術書の感想等を紹介します。 おことわり: この記事では、「筆者」とはuhyoのことを指し、『HTML解体新書』の筆者たちのことは「著者ら」と呼びます。また、この記事の内容はすべて筆者の個人的な見解であり、本の内容や本を読んで得られる知識について何らかの保証をするものではありません。 筆者について筆者はTypeScriptとReactを専門とするフロントエンドエンジニアで、HTML歴は17年です。物心ついたときのHTMLバージョンはHTML4.01
HTML初心者のためのHTML5のテンプレートとその解説 - Qiita
HTMLを勉強しているときに見つけたHTML5のテンプレートです。HTML5とは現在のWeb制作で標準となっているHTMLのバージョンです。私と同じようなHTML初心者はテンプレートの中身を知るだけでも勉強になると思います。今回がQiitaの初投稿です。HTMLの初心者なので上級者の方々にはつまらない内容だと思いますが、それでもよければお付き合いください。ブログに投稿した内容とほぼ同じです。 <!doctype html> <html class="no-js" lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>タイトル</title> <meta name="description" content="説明文"> <meta name=
[最新版] Noto Sans JapaneseをWebフォントとして使う方法
Notoフォントは全ての言語に対応することを目指す野心的なフォント。GoogleとAdobeが共同開発したこのフォントは無料で利用できる。 ※Adobeからは、『源ノ角ゴシック』として提供されている。 プログラミング用フォント『Source Code Pro』を開発したAdobeが関わっているおかげか、Notoフォント自体非常に美しい。 そんなNotoフォントは『Google Noto Fonts』なるプロジェクトで無料で公開されている。 Google Noto Fonts 今回は、このフォントをWebフォント ―すなわち、外部からダウンロードして使うフォントとして使う方法を紹介する。 実は面倒くさい、WebフォントでNoto Sans Japanese Type SquareやFONTPLUSなど、Webフォント提供サービスは数多く存在する。サイトを見る端末にフォントがインストールされて
「別タブで開く」リンク(target="_blank")は脆弱性あり？【SEO情報まとめ】 | 海外&国内SEO情報ウォッチ
リンクを別タブで開くためにHTML上でリンクにtarget="_blank"を指定することには「セキュリティとパフォーマンスの点で問題がある」と、グーグルのエンジニアが注意している。 一般的な書き方だと思うのだが、どういうことなのだろうか。何が問題なのか、どうすればいいのかを、わかりやすく解説する。 ほかにも今回は、SEOコンサルタントを採用するときのポイント、グーグル検索に有利なCMS、AMPストーリーのSEOなどなど、幅広い観点からSEOの理解を深められる情報をまとめてお届けする。 SEOコンサルタント採用時のグーグル流ベストプラクティスグーグル検索ではShopifyが優遇されている！? CMSで違いはあるのか？AMPストーリーに特化したSEOをグーグルが解説グーグル検索でニュース記事を目立たせるコツをグーグルが解説グーグルは、GAやChromeのデータを検索に使っていないグーグルSE
最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説
最近の実装に合わせた、Webページ用のHTMLテンプレートを紹介します。 レスポンシブ用のHTML、ソーシャルメディア用のHTMLをはじめ、高速表示に欠かせないrel="preload"なども含まれています。IEなどの古いブラウザはプログレッシブエンハンスメントで対応しています。 HTMLテンプレートはすべての要素の役割を各行ごとに解説しているので、自分に不必要なものを削除したり加えたりすることもできます。 My current HTML boilerplate by Manuel Matuzović 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLのテンプレート（最終形） HTMLのテンプレートを1行ずつ解説 ページのタイトルと説明文、外部ファイル ソーシャルメディア用のHTML アイコンとアドレスバー もう
jQueryを使ってHTMLをオーバーレイ表示する方法を現役エンジニアが解説【初心者向け】
オーバーレイとは 「オーバーレイ」は要素を重ねて表示することです。 例えば、Webサイトでダイアログやポップアップ広告などを表示する際に使用されます。 そして、この記事ではjQueryを使ってHTMLの要素をオーバーレイ表示する方法を確認していきましょう。 様々なオーバーレイ表示をみてみよう オーバーレイ表示をいくつか確認していきます。 以下は、ダイアログウィンドウを表示する例です。画面の中央にある小さめのウィンドウがオーバーレイで表現されています。 jQueryUI Dialog 写真に文字を重ねたオーバーレイの例です。観光サイトなどで良く見かけます。 潮風感じる、ゆるい街 台湾・高雄 [PR] Webデザインで副業する方法とは jQueryでオーバーレイ表示してみよう 今回のサンプルプログラムでは、jQueryでダイアログウィンドウを作成します。 なるべくシンプルなコードで表現できるよ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootstrapで上下中央寄せする方法を解説！