STAFFBLOG スタッフブログ

業務で注意している3つのこと【コーディング編】

kawaguchi
2016/12/05
閲覧所要時間:約5

こんにちは、川口です。
今年も早いもので残り一カ月ですね!
一年間どうでしたか?楽しみましたか?

僕は最近 緑仙峡 に紅葉を撮りに行ったのですが色づいた紅葉を見れなかったことが心残りです…
autom-1 現地の方に来るのが一週間遅い!と言われてしまいました 笑
去年も五家荘に行って、満足いく景色を見れなかったのでかなり悔しいです…



年末にかけてだんだん忙しくなってきましたが、
お陰様でありがたいことに1年中忙しい気がしております。

そんな中、コーディングする際とくに注意していることを今回の記事にしたいと思います!
(ブログのネタが無くなってきました 笑)

コーディングで注意している3つのこと

※タイトルには「コーディング編」と書いていますが、コーディング編以外ございません 笑
  • ①テキストに関する情報
  • ②間隔(余白)について
  • ③CSSで表現
 

①テキストに関する情報

textinfoCSSのプロパティーでいうと
① font-size: 36px;
② line-height: 1.667;
③ letter-spacing: .005em; です。

①のfont-sizeはそのまま36pxにすればいいですが、
②と③については少々面倒な計算が必要です。
line-heightの計算方法
line-height = 数値 ÷ フォントサイズ なので
60px ÷ 36px = 1.66666667 です。
letter-spacingの計算方法
letter-spacing = 数値 ÷ 1000 なので
5 ÷ 1000 = 0.005 です。
ですが、毎回手動計算していては効率が悪すぎるので
sass を使用している前提ですが function や mixin で計算するようにします。

@mixin
line-heightの自動計算
@mixin line-height( $psd-size , $font-size ) {
 line-height: $psd-size / $font-size;
}
●leffter-spacingの計算
@mixin letter-spacing( $trakking ) {
 letter-spacing: $trakking / 1000 + em;
}
 

これで早く簡単に計算できるようになります。
他にも確認していることはありますが、計算が必要な部分だけ紹介しました!

 

②間隔(余白)について

次は画像やテキスト、コンテンツの間隔を計算するときにどうしているかです。
どれだけ正確に、PSDとほぼ同じ間隔にするかが結構難しいことだなと最近感じています。
letter この場合 緑の四角 と テキスト の間隔を図る時は 選択範囲ツール を使ってしっかり図ります。
47px と設定したいところですが実際にブラウザで表示すると47px以上の間隔が空いてしまいます。
これはテキストが持つline-height等の間隔 + 47px ということになるのが原因です。
なので少し小さくして35pxなど、あとは目分量で設定するしかなさそう….なのではじめは大体で設定しコーディングしていきます。
そして最終段階で僕が必ずやっていることが、px単位で調整することです。
目分量で正確にするスキルは僕にないので、あるモノを使います。

そのあるモノが、ブラウザを半透明にしてくれる「Afloat」です!
これは ブラウザを半透明にすることができる優れもので ブラウザをPhotoshopの上に直接重ねて細かく調整しています。
これで完璧!
と思ってましたがやはりブラウザで若干違う場合がありますがこれは恐らくスキル不足です..
どんなものかは下の参考リンクをご覧ください。

Afloat参考
http://fatherlog.com/translucent-window-mac-app-afloat/

※ダウンロードページが少々怪しいですが色んな方がブログに掲載されているので大丈夫です 笑

また、Mac OSX El Capitan からAfloatがどうやっても使えないので
代用として「Helium」 を使用しています。
こちらは Helium 自体が簡易ブラウザとなって半透明になりますが、開発者ツールが使えないです…

Helium
https://itunes.apple.com/jp/app/helium/id1054607607?mt=12


一見、作業が遅くなるような気がしますが、特に遅くなった感じはせず、このおかげで目分量の精度が上がった気がします 笑
コーディングとデザインが分業のフロンティアビジョンでは、コーダーが気にならなくてもデザイナーは少し違うと気になると思います。
なので当たり前ですが、 デザインと同じ を心がけてコーディングしています!
(アプリに頼らなくてもできるようになりたい….)

 

③CSSで表現

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-10%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-11 ストライプやドット柄、市松模様のパターンは画像で対応していましたが、CSSで表現可能と分かったのでブラウザの対応は確認しながら最近は使っています。

購入していただいた本
fullsizerender CSSシークレット ―47のテクニックでCSSを自在に操る
http://amzn.asia/8T4ZyVu

にはいろいろテクニックが紹介されていてとても面白いです!(まだ半分くらいしか読めてないです…)

 

マニアックな話になりましたが、いつもコーディングで注意していることを書いてみました。
まだまだ模索中な部分もあるので、他にいい方法があればぜひ教えていただきたいです!
そして来春には新しく社員も増えるので少しでも参考になればいいなと思います。

 

WordBench熊本に参加してます

井上武明
2016/09/27
閲覧所要時間:約3

どうも、今週のジャンプを読んでちょっぴり「こち亀ロス」な井上です。
ただ今、参加費500円を払ってWordBench熊本に参加してブログを書いてます。

作業中

WordBench熊本とはなんぞや?

WordBench(ワードベンチ)とは WordPressユーザーのための地域コミュニティの事で、WordPressでメールフォームを作るプラグインとして超有名なContact Form 7の制作者の三好さんが発起人となり、2008年9月に開催された WordCamp Tokyo 2008で発表されたそうです。(今調べました。)

その熊本県でのコミュニティがWordBench熊本です。

ちなみにもっと大規模なWordCamp(ワードキャンプ)というのもありまして、こちらはWordPressの普及と情報交換を目的に世界中で行われているユーザー・デザイナー・開発者が集う巨大イベントです。(これも今調べました。)
2016年は7月9日〜10日に大阪、9月17日〜18日に東京で開催されていて、その内容はWeb上に無料で掲載されています。

WordCamp Kansai 2016
https://2016.kansai.wordcamp.org/movie-and-slide/


WordCamp Tokyo 2016
https://2016.tokyo.wordcamp.org/09/24/slide/


・・・行きたかったな。わぷーグッズもいっぱいあったみたいだし。

わぷー

WordBenchって何か凄いWordPressユーザーが集まってそう。

いや、全然凄くないです。むしろWordPress始めたばかりの人が多く、HTML/CSS/PHPなどのWeb制作技術やWordPress関係の高度なカスタマイズ技術が習得できると期待して参加すると・・・多分がっかりしちゃいます。

それなら何故参加するかというと・・・はて、何でだろう。

単純に技術習得だけを目的にするのであれば、書籍やネット検索を使って勉強する方が効率的です。

実際の仕事ではその繰り返しで新しい知識や技術を習得してますが、多分それだけでは得られないものが有るんだと思います。

 

【本題】8月末にContact Form 7の使い方セミナーで講師しました。

講師と言っても講師代を頂けるわけでもなく、プライベート時間を利用して資料を作成し、他の方と同じく参加費を払って講師をしました。

WordBench熊本での発表は結構頻繁にやっておりまして、
「今回は初心者向け何かやろうか、よしスパムフィルタ付きのメールフォームの作り方なら良いかな」
っと企画。すると何故か最初の参加申込者がContact Form 7の制作者ご本人という衝撃の事態に!

さらに嫁から「長男の学童夏祭りと重なったから!」とダメ出しも加わってしまいました・・・っが!

勉強会の様子
写真のように何とか無事に講師を務められました。(^▽^)
(プライバシー保護のため写真は加工しております。)

センターポジションがContact Form 7制作者の三好さんご本人。
その後ろにいるピンクの子が「嫁との妥協案」として連れてきたアンパンマン鑑賞中な我が娘です。

超メジャーなソフトの使い方を本人の前で説明する機会ってあんまりないですよね。
・・・子連れでなければ懇親会にも参加したかったな。


WordPressが普及している理由は?

CMSのシェア
W3Techsの調査データによるとCMSのシェアが59.3%、Webサイト全体でも26.7%で使われていると言われるWordPressですが、その普及の最大の理由は「使いやすさ」「カスタマイズ性」「無料」ではなく 「コミュニティ」 に有ると感じます。

具体的には WordPress+やりたいこと で検索すると大体調べられると言うのはコミュニティの底力ですね。

自社サイトをレスポンシブウェブデザイン対応しました!

fujie
2015/06/01
閲覧所要時間:約5

gyazo-1
先々月…自社サイトをレスポンシブウェブデザイン対応致しました。
やったのは Googleが勧告していたスマホ対応による順位の変動(4/21)の直前の19日!

結局特に変わりませんでしたが…。

というのも一度はそのアップデートを適用したものの、
日本のサイトのスマホ対応率があまりにも低すぎるので取りやめたというお話を
この間開催されたWebパフォーマンスのセミナーでお伺いしました。

以下、今回やったことを振り返ってみようと思います。


まずは現状を知る

レスポンシブウェブデザイン対応をする前に、まずはその時の現状を確認しました。
  • 1年前にPCサイトをリニューアル
  • 画像はすべて通常サイズ
  • トップページにvideoタグで動画を流しているが、videoタグ非対応ブラウザには画像を表示している
  • 横に長い画像が主要なページにいくつもある
  • ヘッダーが追従する
  • グローバルナビゲーションの中にプルダウンメニューがある
等という特徴があります。

また今回の取り決めとして、
求人案内とスタッフ紹介のページはまったくデザインが異なるので、
一度に行わないことにしました。(時間があればコソコソやります…)


現状を維持しつつ、レスポンシブ時の時の動作を決める

現状の仕様がざっくりと整理できたので、
ブラウザ幅を縮めていった時の動作を考えていきます。
  • 1年前にPCサイトをリニューアル
    → 既に形があるので、必然的にPCファースト(960px)
    → メディアクエリーでレスポンシブスタイルを制定
  • 画像はすべて通常サイズ
    → ロゴのみRetinaディスプレイに対応させる
  • トップページにvideoタグで動画を流しているが、videoタグ非対応ブラウザには画像を表示している
    → PCでブラウザ幅を縮めていった時にはそのまま何もしない
  • 横に長い画像が主要なページにいくつもある
    → 画像は基本 max-width: 100%; で対応するが、横に長い画像は縦が細くなってしまうので、通常の画像と違うスタイルを制定する
  • ヘッダーが追従する
    → 追従をやめて、右上にハンバーガーアイコンを設置する
  • グローバルナビゲーションの中にプルダウンメニューがある
    → プルダウン動作をやめて、右上のハンバーガーメニュー内で展開されるようにする
という動作を決めました。
グローバルナビゲーションですが、ドロワーメニューとかハンバーガーメニューなどなど人によって言い方がまちまちですが、ここではハンバーガーメニューと言うことにします。


レスポンシブウェブデザインを作っていこう

それでは決めた仕様で作っていきます。

ブレイクポイントをどこにするか

PCサイトを 960px で構築しているため、
どこかの値でブレイクポイントを決める必要があります。

iPad縦持ちサイズからレスポンシブウェブデザインを適用したかったので、
768px を基本のブレイクポイントにしております。

これで、横持ちだとPCのデザイン、縦持ちだとレスポンシブウェブデザインが楽しめるので
私個人的には気に入っております。

(追記:2015年6月13日)
と思っていたのですが、
いろいろ思うところがあって 960px 未満からにすることにしました。


ロゴのみ Retinaディスプレイに対応させる

1倍画像


2倍画像


ロゴのみ高解像度ディスプレイでもぼやけないように2倍の画像を用意し、
高解像度ディスプレイにはそれ用のメディアクエリーで変更しています。

横に長い画像でも美しく

レスポンシブウェブデザインでは画像に対して何もスタイルを指定をしないと
ブラウザサイズからはみ出してしまいます。

そのために画像へ、

/* CSS */
img {
height: auto;
max-width: 100%;
}

というスタイルを一般的に指定します。

このスタイルによって下記のような横長い画像も、
ブラウザサイズの伸縮と合わせて可変するのですが、

こちらの画像だと縦が細長くなって見栄えがよろしくありません。

そこで

/* CSS */
.over-image {
overflow: hidden;
}
.over-image img {
margin-left: -25%;
max-width: 150%;
}

と、横幅の最大値を大きく取り、少しずらすことによって

この様に両端を若干隠すことになりますが、
全体のバランスを崩すことなくレイアウトが出来ました。

表示領域を確保するためにヘッダーの追従を無効に

私がついこの間までiPhone4ユーザーということもあってスマートフォンサイズにて領域を確保することに意識をおいて制作にあたりました。

しかし今は nexus6 を使用しておりかなり余裕があるので、
今後は追従などの手を加えてもいいのかなと思いました。

また上にスワイプするとヘッダーがスッと出てくるのも気になっているので、
そういうこともどんどんやっていけたらな…。

プルダウンメニューはハンバーガーメニューの中で展開させる

今回はプルダウンの中身が少ないので、隠さずに展開させた状態にしました。
メニューの数が多ければ、カテゴリーをクリック後表示非表示させるなどの手法も考えました。

そのあたりでとても参考になるのが、
トヨタ自動車さん
http://toyota.jp/

のサイトが上手く設計されていると思います。


まとめ

以上、弊社自社サイトのレスポンシブウェブデザイン対応でした。

私が担当した案件で恐らく1年半ぶりの4件目の
レスポンシブウェブデザイン対応だったと思います。

今回はワンカラムでスッキリシンプルなデザインでしたので、
制作時間もそこそこ少なめで出来たので良かったかなと思っています。

しかし冒頭にも申し上げましたが実は Googleスマホ対応の直前に急ぎ足で制作してしまったので、
細かいところで行き届いていなかったり、モバイルファーストになかなか踏み込めなかったり(IE8への対応がまだまだあるので当分難しいかも…)するのでもっと色々と考えて出来るようになりたいと思っています。

videoタグを使ってみよう!!

wakamizu-fvs
2014/11/11
閲覧所要時間:約2

はじめまして。若水です。現在コーディングを学んでおります。
まだまだ、先輩方に比べると月とすっぽんなのでがんばります!!
みなさん応援してください。

suppon01

※画像に他意はありません。

videoタグにチャレンジ

さて、今回はhtml5で使用可能になった、videoタグにチャレンジしようと思います。
<video src="なんちゃら.mp4" width="450" height="350" autoplay loop>
 </video> 



こちらでMP4対応のブラウザでしたら動画を見ることができます。(見れない方は別のブラウザをお試しください。)
※なんちゃら部分はパスを記入ください。
autoplayなど自動再生させたり、loopで繰り返す属性などがありますが、使い方はほとんどimgタグにそっくりで簡単ですね。
ちなみに動画はスマートフォンで撮影したものです。

各ブラウザに対応!!

しかし、一部のブラウザではMP4形式の動画を見ることができません。(FirefoxやOperaなど)
なので、以下のように記述することで、MP4に対応していないブラウザでも
動画を見ることができるようになります。
<video width="450" height="350" autoplay>
  <source src="なんちゃら.mp4">
  <source src="なんちゃら.webm">
</video>

Web Mという動画形式こちらはFirefox、Google Chrome、Operaでも利用可能です。
これでほぼ全てのブラウザで動画を見ることが可能になります。
※バージョンによっては見ることができません。

以下サイトを参考にさせていただいています。
自分よりもはるかにわかりやすく書かれています。
背景に動画を使ったWebサイトの作り方
videoタグを使って、Flash無しでビデオ再生
videoタグを使って動画を再生する

video最後に

以上
videoタグを使ってみよう!!でした。
動画を使ったサイトが増えていますし、どんどん新しい技術を吸収して
いろんなことにチャレンジしておくと「いざやろう!!」ってなった時に
入りやすいと思うので、チャレンジ精神を大事にして今後も精進しようと
思います。

ご覧いただき、ありがとうございました。

ついにHTML5が正式勧告

fujie
2014/10/31
閲覧所要時間:約4

html5

ブログ更新担当日のちょうど前日に「HTML5が正式勧告」と、
いい感じにブログネタが手に入って喜んでいる藤江です。

個人的には2年くらい前から、HTML5のDOCTYPE宣言と使いやすい主要なタグ(header、footer、section、article、navなど)を、案件によってはこっそり(弊社自社サイトも)と使い続けてきましたが、これからはバリバリ使っていけそうですね!


HTML5 のメリットとは

  • ソースの見た目がすっきり
  • より文書構造が明確になる(SEOの内部対策にも!)
  • JavaScriptと組み合わせることによってFlashや画像でしか出来なかった表現が可能に
  • フォームやaタグの改善によりユーザビリティの向上と、制作者にも優しくなる

一瞬で思いついたものを書いてみました!
まだまだマダマダあると思います。


HTML5 でマークアップされて参考になるサイト様

さて私が以前から、または最近参考にしている HTML5でマークアップされて参考になるサイト様をいくつかご紹介したいと思います。

いつもお世話になります。 Yahoo!ニュース

個人 – Yahoo!ニュース
http://bylines.news.yahoo.co.jp/


本サイトやその他サービスはまだHTML4だったりXHTML等ですが Yahoo!ニュースの個人、Buzz、意識調査のカテゴリーではHTML5でマークアップされておりました!(2014年10月30日調べ)
いったい何時ごろから変わっていたのでしょう。今日改めて見てみて発見したのですが、全然気づきませんでした!
細かい所でnav、time、figure等でマークアップされており、また全体的にもsection、articleの使い方が勉強になると思います。

みんなのアイドル。 Apple

Apple – iPhone – モデルを比較する
https://www.apple.com/jp/iphone/compare/


AppleのサイトのiPhone比較のページです。
最近になってついにレスポンシブ対応をなされて話題になりましたね!
そこで気になったのがfigureの使い方です。

ソースを見てみると、なんとfigureの中は何も空!
代替えテキストも入れずに堂々とタグの中身は空白で、背景画像を駆使して描画している斬新なマークアップです。

レスポンシブ面ではメディアクエリーの力によって簡単に画像を変更できる点から採用されているのでしょうが、こういったマークアップもありなのでしょうか…!
といったご紹介まで。

<figure>タグは、図表であることを示す際に使用します。 ここで言う図表とは、文書の本文(メインフロー)から参照されるようなイラスト・図・写真・ソースコードなどのことです。

図表は本文から参照される内容ですが、本文に影響を与えることなく、ページの端・専用ページ・別表にして切り離すことができます。

必要ならば、図表にキャプションや注釈を付けても良いでしょう。図表にキャプションを付ける場合には、<figcaption>タグを使用します。

出典:<blockquote>-HTML5タグリファレンス


CodeGrid読んでます。 ピクセルグリッド

ピクセルグリッド
http://www.pxgrid.com/


スタッフの方たちが技術面で何かしらアウトプット出来る場(ブログや執筆など)を持っていらっしゃる方ばかりで、サイトのソースが非常に勉強になります。
特徴なのはスタイル目的でIDを使用していない事! classのみ、しかもハイフン繋ぎできちんと統一されているのでとても見やすいです。
僕も真似して比較的新しい案件からはそうしているのですが、IDかclassか?で迷わなくなったり、統一されているのでCSSのメンテナンスが楽になりました。

流石ですわW3Cメンバー。 ミツエーリンクス

ミツエーリンクス
http://www.mitsue.co.jp/


サイトのメインコンテンツとなる要素を大きくmainで囲い、sectionの中には必ずhx(h1、h2など)を入れるなど厳格なマークアップをされています。
W3Cチェックでもエラー無しのページばかり! また早い段階でレスポンシブデザインに対応し、印刷用のCSSもきちんと考えられていてサイトのソースからはとても勉強になります。

やりやがったぜ! フロンティアビジョン

フロンティアビジョン
https://www.fvs-net.co.jp/


ここでまさかの自社サイト…!!
弊社も頑張って約半年前(2014年7月7日)にHTML5で自社サイトをマークアップ致しました。
とはいっても…HTML5の要素は有名で基本的なものばかりの使用と、IDやclassが混在していたりちょっとお見苦しいのですが(こっそり修正していく所存…)、
「熊本 ホームページ制作」の検索1位という結果に恥じぬよう構築したつもりですので、参考になる部分があれば幸いでございます。


というわけで

なにはともあれ、HTMLは一つの節目を迎えた、ということですね。
HTMLしかりCSSしかりJavascriptやPHP等々…フロントエンド周りの近頃は本当に考えたり覚えたり、やることがどんどん増えてきている感じがします。

新しい技術や仕組みに、おいて行かれないように、
じゃんじゃんばりばり試して作って見せたりして行きたいです!

ではまた!

inline-block が最近好きなので振り返ってみた。

fujie
2014/09/30
閲覧所要時間:約7

こんばんは、こんばんわ。
1週間ほど前から早寝早起き(24時前就寝、6時前起床)に嵌っている藤江です。
朝はいいですよ!夜だらだらやるよりも朝!静かで気持ちが良いです。

さて、私は1年ほど前まではIE6からのブラウザ対応を頑張らないといけない環境に居ましたが、フロンティアビジョンに入社してからはIE8からの対応でOK!となったので(巷ではIE8対応も有料らしいですが!)、制作時にいろいろ悩まずに快適になりました。

中でも良くなったのはCSSの「display: inline-block;」や「display: table;」、「display: table-cell;」などがCSSハック無しで使えるようになったり、また「box-sizing: border-box;」というwidthやpadding等の計算が楽になるプロパティ達が使えること!!

その中でも今日は「display: inline-block;」の便利さをお話ししたいと思います。
(今更などと言ってはダメだ!)


display: inline-block; とは?

20140930-inline-block01

inline-blockとは、displayプロパティの値のひとつで、以下の様なことが出来るようになります。

  • ブロック要素のようにwidth、height、padding、margin等が指定出来る
  • インライン要素のように、文字などと一緒に流し込むことが出来る
  • vertical-align、text-alignなどのプロパティが有効!

と、非常に扱いやすいラインアップですね。

さっそく例を並べてみましょう。

ブロック要素のようにwidth、height、padding、margin等が指定出来る

inline-block

/* HTML */
<div class="entry7929_e_pink">inline-block</div>

/* CSS */
[class^="entry7929_e"] {
  color: #fff;
  display: inline-block;
  font-size: 140%;
  font-weight: bold;
  padding: 30px;
}


インライン要素のように、文字などと一緒に流し込むことが出来る

テストテスト
inline-block
てすとてすと

/* HTML */
テストテスト
<div class="entry7929_e_pink">inline-block</div>
てすとてすと


または要素と要素を横に並べたりも。

inline-block
inline-block

/* HTML */
<div class="entry7929_e_pink">inline-block</div>
<div class="entry7929_e_blue">inline-block</div>


vertical-align、text-alignなどのプロパティが有効!

inline-block
inline-block
inline-block
inline-block
inline-block
inline-block

/* HTML */
<div class="entry7929_e_vtop01">inline-block</div>
<div class="entry7929_e_vtop02">inline-block</div>
<div class="entry7929_e_vtop03">inline-block</div>
<div class="entry7929_e_vtop04">inline-block</div>
<div class="entry7929_e_vtop05">inline-block</div>
<div class="entry7929_e_vtop06">inline-block</div>

/* CSS */
[class^="entry7929_e_vtop"] {
  vertical-align: top;
}
.entry7929_e_vtop01 {
  height: 70px;
}
.entry7929_e_vtop03 {
  height: 50px;
}
.entry7929_e_vtop04 {
  height: 50px;
}
.entry7929_e_vtop06 {
  height: 70px;
}


親要素の text-align で左寄せ・中央寄せ・右寄せが可能になります。
またinline-block に vertical-align: top; を指定すると、2段以上かつそれぞれ高さが違っても上下が整うなど、float を使って実装すると面倒だったのがスッキリでシンプルなコードで実現出来ます!


inline-blockで横に並べた時の空白が気になる!

何事にもデメリットはつきもの。
display: inline-block; を使用する際には要素と要素の間にスペースが出来てしまいます。
この謎のスペースはHTMLの改行が原因なのです。
ですのでHTMLを詰めて記述するとスペースは無くなるのですが、HTMLを詰めて記述すると後から編集するのが面倒になる+見た目が非常によろしくないので、CSSで対応しましょう。

letter-spacing を駆使してスペースを消そう!

inline-block
inline-block
inline-block

letter-spacing という文字の間隔を指定するプロパティを使用します。

親要素に対して letter-spacing: -.4em; を指定することによって、文字の間隔を無くします。
文字の間隔を無くすことによってHTMLの改行もぎゅっと詰まらせることが出来るので、子要素間のスペースを無くすことが出来ます。
そのままだと子要素内の文字がぎゅっとなってしまい大変なことになるので、子要素に対して letter-spacing: 0; を指定し子要素内の文字間を元に戻してあげましょう。

/* HTML */
<div class="entry7929_e_letter_parents">
  <div class="entry7929_e_letter">inline-block</div>
  <div class="entry7929_e_letter">inline-block</div>
  <div class="entry7929_e_letter">inline-block</div>
</div>

/* CSS */
.entry7929_e_letter_parents {
  letter-spacing: -.4em;
}
.entry7929_e_letter {
  letter-spacing: 0;
}


親要素に font-size: 0; というやり方もありますが、
%で文字サイズを指定しているサイトでは子要素にて文字サイズが元に戻せませんし、 font-size: 0; という記述がもしかしたらSEOなどに引っかかってくるのでは?という懸念点から控えた方が良いかと思います。


おわりに

本記事では触れませんでしたが、float より inline-block を活用することで、レスポンシブデザインも意識することが出来ます。
また inline-block を使いこなせるようになれば無駄なHTMLの記述も減り、可変なコンテンツにも対応力が上がるので便利です!

フロンティアビジョンのFacebook

デンタルWEB

求人情報

スタッフ紹介