そもそもremとは？remというのはroot emの略になります。フォントサイズのemについはご存じでしょうか？emはフォントサイズを1として考える単位です。 remはルートのフォントサイズを1として考える単位になります。 ルートとは、htmlのことになります。 つまりhtml要素のフォントサイズが16pxの場合でも18pxでも、remは1です。 html要素が16pxの場合、2remは「32px」です。 このようにhtml要素のフォントサイズから相対的にサイズ指定できるのがremになります。 サイズ指定はフォントサイズから相対的に指定すると便利レスポンシブデザインなどでは、各デバイスによってフォントサイズを変えたいですよね。 しかしフォントサイズをpxで指定していると、すべての箇所でフォントサイズを変更する必要があります。 フォントサイズから相対的にフォントサイズを指定できるところに便利

デベロッパーツールとは、Google Chromeに標準搭載されている開発者用の検証ツール（デバッグツール）で、Webサイトのパフォーマンスを向上させるための多くの機能が搭載されています。 この記事では、デベロッパーツールの中でも特に利用頻度の高い、HTMLとCSSの検証をするための「Elementsパネル」と、スマートフォン表示を検証するための「デバイスモード」に的を絞って解説していきます。 今まで、デベロッパーツールを使ったことが無い方でも分かりやすい、初心者向けの内容になっています。この記事の内容を習得すると、ページ修正前の表示検証や、表示崩れの原因特定などができるようになると思います。ぜひ実務で活用してみてください。 ※本記事の公開／更新時のGoogle Chromeのバージョンは107。 起動方法 まずは、デベロッパーツールで検証したいWebページ、またはローカル環境で制作中のH

はじめに、デフォルトCSSについて HTMLのタグには、デフォルトCSSが設定されています。 例えば<h1>タグはfont-sizeを設定したわけでもないのに大きくボールドで表示されます。 <p>タグも同様にmargin系のプロパティを設定していないのに下に空きができます。 CSSでスタイルを設定しようとすると、思ったとおりの見栄えが実現できないことがよくありますが、理由の1つがこのデフォルトCSSです。 デフォルトCSSの挙動は把握する必要はありますが、一方でデフォルトCSSはブラウザごとに微妙に設定が違います。 これをある程度揃える目的でリセットCSS、ノーマライズCSS、サニタイズCSSが存在します。 デフォルトCSSを揃えるCSS 下記のHTMLを表示させることを考えます。 <h1>&lt;h1&gt;でマークアップされた見出し</h1> <h2>&lt;h2&gt;でマークアップ

ページのレイアウトやUIコンポーネントなど、Webサイトやスマホアプリの実装でよく使用されるFlexboxのテクニックを紹介します。 ヘッダやナビゲーション、フォーム、テーブルなど、実際のプロジェクトでよく使用されるテクニックです。 Master Flexbox in 12 Minutes with Most Common Use Cases by Thu Nghiem 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ブロック要素を水平に揃える 2. 要素を中央に配置する 3. 要素間にスペースを分配する 4. 要素を端にプッシュする 5. 相対的なサイズのカラムを構築する 6. メディアクエリがある場合とない場合のレスポンシブレイアウトを作成する 7. アイテムの順番を変更する 8. アイテムの位置を変更する

Flexbox Froggy is created by Codepip • YouTube • Twitter • GitHub • Settings Language Difficulty

CSS GridとFlexboxは、CSSで現在主流となるレイアウトのテクノロジーです。 CSS GridとFlexboxは表面的には似ているように感じるかもしれません。しかし、実際には異なるタスクに使用され、それぞれ異なるレイアウトの問題を解決します。 Flexboxが適してる場合、CSS Gridが適している場合、また両方を使用する場合、さまざまなレイアウトの問題を正しく解決する方法を紹介します。 Grid vs. Flexbox: Which should you choose? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ページ全体のレイアウト 隙間が必要なレイアウト 1次元と2次元のレイアウト ラッパー CSS Gridは将来、Flexboxを時代遅れにするでしょうか？ ページ全体のレイアウト CSS Gridはコ

CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック

ここからはより実践的なデベロッパーツールの使い方をご紹介します。 デベロッパーツールの強力なCSSデバッグ。この機能を使いこなせるようになり、CSSをデベロッパーツールを使って確認＆制作していくとかなり効率的に簡単に組めると思います。 新しいclass, idの追加 今までは既にあるセレクタに「プロパティ」や「値」を追加していました。今度は新しくclassやidを追加し、追加したclass, idにCSSを適用させます。 サンプルサイトの画像の位置をデベロッパーツールで選択します。 選択したタグにclassを設定 このpタグにclassを追加しましょう。 pタグが選択されている青い状態でpタグの上で右クリック→「Add attribute」 もしくはpタグが選択されたまま「エンター」 このような状態になりました。 class名は[special]にします。 そのまま、直に「class=”s

こんにちは! ヨス（プロフィールはこちら）です。 今現在、Google検索では「スマホ対応」がされているかどうかは超重要になっています。 具体的にいうと、PCの検索順位はスマホでの検索順位が適応されているのです！ 今回は、ブログのスマホ対応でのポイントをくわしく解説します。 スマホ対応で困った6つのこと 今回は私がスマホ対応のために最低限やっている6つを紹介するのですが、分かりやすいように「問題点」を見出しにして紹介しますね。 スマホで見たら画像がはみ出す?! まずはこちらの比較画像をご覧ください。 画像サイズ（左: 変更前・右: 変更後） スマホで見た時に、上画像の左側のような画像を見たことありませんか? これは画像サイズがパソコンのままになっているんですね。大きいのではみ出しています。 これをスマホで見た時は自動で上画像の右側のように縮小してほしいんです。 でも大丈夫! CSSの<im

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Webデザインの最近のトレンド、縦長ページ、スクロールエフェクト、CSS3アニメーション、フラットスタイルなどを取り入れたBootstrapのテンプレートを紹介します。 Bootstrapは先週3.3.0がリリースされ、Bootstrap4の開発も進んでるそうです。4ではIE8はサポート外になる予定。

「アイディアはあるんだけど、モックすら作れないIT起業家」「“UIだけなら自分で作れる” とやってみたけど、見にくいページにしかならない、どうしよう、、、」。高度なテクニックは不要、でも、やっぱりデザイナーさんに依頼しないといけないシーンが多いこの業界。 しかし、「Twitter Bootstrap」(以下 bootstrap)の登場により、多くの人がデザイン性の高いページデザインを短期間で作れるようになり世界は変わった。bootstrapは、プログラマーやディレクターなどが、最低限のコードの組み合わせでスッキリと解りやすいユーザーインターフェイス(UI)を構築できるライブラリ(支援プログラム群)のこと。 Bootstrapの登場で、スタートアップはスピーディにページを作りあげ、プログラマーは必要なページを “とりあえず” 作っておくくらいのことをするのが手軽になった。ただ、bootstr

Firefox アドオンの「Firefbug」はご存知の方も多いと思いますが、Firefbug を使って表示しているページの(X)HTMLマークアップや CSS を確認・修正する方法のまとめを紹介します。 特に３項に記した、(X)HTMLとCSSを一発で確認する方法はおすすめです。 動作は Firefox 3.5 + Firebug 1.4.0b7 で確認しています。 １．基本：(X)HTML マークアップと CSS を表示する 確認したいページを表示した状態で、メニューバーの「表示」→「Firebug」を選択します。または F12 を押下します。 これでページ下半分に Firebug のウィンドウが表示され、左側に(X)HTMLマークアップ、右側にそのページで使われている左側のウィンドウで選択状態になっている要素の CSS が表示されます。この手順で Firebug の画面を開くと、bo