logo jQueryに強い、基本料金0円。わかりやすい料金設定でご提供する、
コーディング代行サービス「ココマチ コーディングラボ」
050-3184-0915

MENU

html, css

お見積り依頼

脱・なんとなく!CSSでサイズ指定するときに押さえておきたい5つの単位とは?

WebページをスタイリングするためにHTMLタグを装飾するCSS。テキストの色やサイズなどを装飾できるCSSですが、その指定にはいろいろな単位があり、どれを使えばいいのか悩んでしまうもの。 特に、margin、padding、font-sizeなどのプロパティを使用するときに迷ってしまうのが、サイズを指定する単位です。それぞれの単位について深く理解しないまま、「なんとなく」使っている人も多いのではないでしょうか? 今回は、CSSコーディング時にフォントサイズの指定に適用した例を主に用いて、押さえておきたいCSSの5つの単位について解説します!

 
  • 1. 画面解像度に依存する『px(ピクセル単位)』
    「px」は、ピクセル単位で値を指定する場合に使用します。Retinaディスプレイなどの高精細ディスプレイを除けば、1pxはユーザーの画面ではドット1個で表示されます。画面の解像度に依存するため、親要素など他の要素との関係はなく、指定したピクセル数の値になります。
    相対的な単位ではありますが、実際は絶対的な単位として使用されているため、ユーザーがブラウザのフォントサイズ設定を変更しても、テキストを拡大縮小することができません。ユーザーフレンドリーなコーディングを心がけるなら、あまり使用しないことをおすすめします。
 
  • 2. 親要素のサイズを基準にする『em(Em単位)』
    「em」は、親要素のフォントサイズにもとづいて自身を1とする単位。一般的なブラウザのフォントサイズは16pxのため、1em=16pxになります。たとえば10pxが指定された要素の子要素に対し、2emを指定すると20px相当のフォントサイズになります。
 
  • 3. ルート要素のサイズを基準にする『rem(Rem単位)』
    「rem」は、「html」などルート要素のフォントサイズを基準とした単位。「em」が親要素のサイズに依存するのに対し、「rem」は親要素のフォントサイズが変わったとしても、ルート要素のフォントサイズが変わらない限り変化しません。 上記のコーディング例では、p要素には18px、strong要素には21px相当のフォントサイズになります。 strong要素がp要素の子要素だった場合、p要素のフォントサイズが変化してもstrong要素のフォントサイズは変化しないため、要素の継承による問題を避けられるメリットがあります。
 
  • 4. 親要素のサイズを基準にする『%(パーセント)』
    「%」は、親要素のフォントサイズに対する割合を表す単位で「em」と同様です。 一般的なブラウザのデフォルトのフォントサイズが16pxのため、上記のコーディング例のようにhtml要素のフォントサイズを62.5%に指定すると、10px相当のフォントサイズになります。そうすることで、その他の要素のフォントサイズが容易に計算できます。
 
  • 5. 複数のブレークポイントで重宝できる『vw、vh(Viewport単位)』
    レスポンシブデザインでは、ある画面サイズを境目として、適用させるスタイルを切り替えます。この境目のことを「ブレイクポイント」と呼びます。 「vw」は、指定したviewportの幅に対する割合の単位。「vh」は、指定したviewportの高さに対する割合の単位です。たとえば画面幅が320pxであれば、100vwは320px、10vwは32pxになります。画面サイズを基準とする単位のため、フルスクリーンの背景画像を使ったデザインなどによく用いられます。 「%」指定と変わらない気もしますが、「%」では親要素のプロパティに依存するため、必ずしもviewportの幅が基準になるとは限りません。「vw」「vh」なら、viewportの幅や高さを元にしたサイズを指定できるメリットがあります。
 

複数のデバイスサイズを意識したレスポンシブデザインによるコーディングが主流になってからというもの、相対的なサイズ指定の理解が必要になりました。これまでのCSSのサイズ指定をそのまま使っていると、予期せぬミスが発生したりと困ってしまうもの。単位の理解を深めておくことで、要素がズレてしまうなどのトラブルも減ることでしょう!

 

ちなみに、現在コーディングラボでは、3の『rem(Rem単位)』による指定を主に行っています。(案件によって変更する場合もあります)

続きを読む

各モジュールのコーディングプラクティス

こんにちは、日々コーディングの事を勉強中の原田です。
前回、CSSのモジュール化について書かせて頂きましたが、今回はそのモジュール化の続きで、各モジュール毎を2回に分けて掘り下げて記載します!



見出しモジュール 識別子はttl

見出しモジュールは、セクションごとの見出しとなる要素(HTML5の分類で、「ヘッディングコンテンツ(Heading Content)」となるh1やh2などの要素、見出しとみなすことが出来そうなp要素の事です。 クラス名として識別子、「 ttl 」をつけて管理します。


   

基本的には、上のように見出し要素に直接命名する場合が多いですが、とても凝ったデザインの場合もあります。
そういう場合は、たいてい一つの要素ではまかなえないので、h1要素の内側にspan要素を内包してスタイルを当てる要素を増やして対応します。H1要素の外側をdiv要素で囲う方法もありますが、文書構造がおかしくならないように注意が必要です。





テキストモジュール 識別子はtxt

テキストモジュールは、p要素やテキストに該当するspan要素などのコンテンツ内の本文のことです。
基本的に、サイト内のテキストはテキストモジュールに該当します。クラス名として識別子「txt」をつけます。



リンクモジュール 識別子はlink

リンクモジュールは、基本的にa要素のようにリンクが関係するモジュールの事です。クラス名として識別子「link」をつけます。
通常は、テキスト内にリンクが存在する場合にモジュールとして分ける事が多いです。



ボタンモジュール 識別子はbtn

ボタンモジュールは、見た目や役割がボタン上の要素の事です。クラス名をつける要素は特に指定はありませんが、button要素やa要素、a要素を囲むdiv要素に付与するパターンが多いです。 クラス名として識別子「btn」をつけます。

続きを読む

CSSの設計について考えてみました

こんにちは。入社して半年経ちました原田です。



WEBやITは未経験だったので、わからない事だらけで、戸惑ったり、色々新しい発見があったりで、日々奮闘しています。



コーディングの業務を進めていくにしても、最初想像していた以上に奥が深いなと思っているのですが、 そんな中でも、最近、CSSの設計って難しいなと思っています。



普通にページの要素に沿ってCSSを書いていけばいいやくらいにしか思っていなかったのですが、 そこそこの規模のサイトになると、きちんと最初に考えて設計しないと大変な事になるという事がわかりました。



具体的にどう大変かと言いますと、

  • 1.同じパターンのデザインが複数ページで展開されている場合、修正が入ると該当の全ページ修正する必要が出てくる

    →設計をきちんとしておけば、複数ページに修正対象があっても、1箇所修正すれば済む。

  • 2.デザインそのままで、h2タグをh3に変更して欲しいという修正が入った場合、CSSも大直しする必要が出てくる

    →設計をきちんとしておけば、HTMLで、h2をh3に変更するだけで済む

  • 3.AページにあるパーツCをBページにも掲載する事になった場合、BページでCパーツを表示させるCSSを組む必要が出てくる

    →設計をきちんとしておけば、該当のHTMLをコピペするだけで済む


こういう気づきがあったので、ちょっとCSSの設計について考えてみました。

そして、各ページの要素をモジュールごとに分類して、そのモジュールコーディングを先ずはすれば良いと思いました。

具体的なモジュールの分類方法ですが、

分類大→分類中→分類小という順番で分類作業をする

①大枠を分類して、構造を決める
②各構造の中を、次の詳細度で分類する
③さらにそのかたまりを、次の詳細度で分類する



また、基本的な設計の考え方として、構造とスキンを分離する。
構造→形に関わる事 スキン→見た目に関わる事



例:赤いボタンをCSSで表現



<従来のCSS>



<構造とスキンを分離する書き方>



width → 構造
height → 構造
border → 構造(border-colorはスキン)
color → スキン
background-color → スキン


赤いボタンを青いボタンに変更する際は、btnのクラスはそのままで、
btnRedのクラスを、btnBlueなどに変更して使う。

続きを読む

セマンティック・ウェブについて

セマンティック・ウェブ(英: semantic web)は W3C のティム・バーナーズ=リーによって提唱された、ウェブページの意味を扱うことを可能とする標準やツール群の開発によってワールド・ワイド・ウェブの利便性を向上させるプロジェクト。セマンティック・ウェブの目的はウェブページの閲覧という行為に、データの交換の側面に加えて意味の疎通を付け加えることにある。
最近よく聞くことが多い、「セマンティック・ウェブ」。これをWEBコーディングの際に当てはめるとしたら、 HTMLのタグの意味を考えてコーディングしましょう という事になるのではないでしょうか。
今回、セマンティック・ウェブ的なコーディングについてまとめてみました。

1.見出しタグを適切に使用する

見出し(h)タグには、ランクが存在しています。 h1タグが最上位となり、次にh2タグ、h3タグ、h4タグとなっています。 これは、文章の階層構造を説明することにもなるので hタグの順序がバラバラになっていると検索エンジンに正しく解釈してもらえなくなります。
良い例
<h1></h1>

      <h2></h2>     <p></p>

     <h3></h3>      <p></p>

      <h4></h4>       <p></p>  

    <h2></h2>     <p></p>  

     <h3></h3>      <p></p>

 

→H1は最初に出現、その後はH2、H3と続くのが正しい


2.セクション要素

HTML5 では、セクション要素という新しい要素が加わっています。このセクション要素を使えば、セクションを意味的にひとつの塊として捉えてくれて、アウトラインを形成してくれます。 <nav>… ナビゲーションを示すセクション要素
<article>… ブログの記事みたいに、独立しても意味が通るような部分を示すセクション要素
<section>… 基本的に見出しを伴う文章のひと塊、段落とか章を示すセクション要素
<aside>… あまり重要でない部分を示すセクション要素

→意味ごとのまとまりで<section>、単独で意味が成り立つものは<article>、単なる装飾の場合は<div>


3.各タグの意味

HTML5 では、不要なdivタグは極力書かず、各タグの意味を考えてコーディングをしてください。

繰り返し要素や、要素を並列に並べるなら<ul>と<li> 例)グローバルナビ

単語と説明のペアは<dl>(<dt>と<dd>のペア)
不要なdivタグは極力書かない

→誰が見ても読みやすいソースコードを心掛ける

続きを読む

HTML5はどんなところがスゴイのか?

 

HTML5とは?

HTML5は、WEBページを構築するための言語HTMLの5回目の改訂版となります。正式に勧告されたのが2014年10月と新しく style=’margin:20px;’、仕様はまだ変更される可能性があり、今後、5.1といった具合に新たな仕様が勧告される可能性があります。CSSを組み合わせることでデザインを制御したり、電子データの管理に用いられるXMLデータ文書を扱えるXHTML形式にも保存したりする、といった一般的な使い勝手は従来どおりですが、記述方法の簡潔さや機能が大幅にアップしています。

続きを読む

ウェブサイトの装飾をつかさどるCSSの歴史

成り立ち

現在、HTML文書の装飾に広く使われているCSSですが、その普及までには現状では考えられない困難もありました。

もともとウェブサイトの制作を行うHTMLでも簡単な装飾はできたのですが、ウェブサイトの多様化などから、より高度なデザインを求められるようになりました。そこでWWWの生誕地CERNに勤務していたホーコン・ウィウム・リーがスタイルシートによってHTMLから装飾の要素を切り離すことを提案し、1996年に「ウェブの環境を使う人や場所によって差異がでないように、仕様や技術書を作成・勧告する」ための組織W3Cによって勧告されました。

続きを読む

ウェブサイト制作に欠かせない存在HTMLの歴史

成り立ち

今ではウェブサイト制作を行う人にとって最も一般的なマークアップ言語であり、欠かせない存在のHTMLですが、その成り立ちは意外にも現在のようなウェブ上での使用のためではなかったのをご存知ですか? 誕生のきっかけはイギリスの計算機科学者ティム・バーナーズ=リーが、彼の所属していたCERNで同僚との情報共有の仕方に悩んでいたことでした。欧州12か国が共同研究を行うCERNでは、何千人もの科学者が出入りしていたため、それぞれの研究の進捗状況などの情報を共有しきれずにいました。そこで1989年、ティム・バーナーズ=リーが独自のメモを提案し、1990年にコード化。この時に世界ではじめてのサーバーとブラウザが誕生し、多くの情報が蓄積されているサーバーへアクセスすることで情報をブラウザ上に表示するという現在のウェブにつながる方式ができたのです。

続きを読む