floatを解除する手法のclearfix と 次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくな

スマートフォン（スマホ）が広く普及し、昨今では多くのWebサイトが、画面の狭いスマホに最適化した専用のビュー（表示）を備えるようになってきました。 サイトがスマホでどう見えるのかは、もちろん実際にスマホで表示してみるのが確実です。ただ、スマホやタブレットにはさまざまな機種があり、画面の解像度も異なるため、どう見えるかを全て実機でテストするのは困難です。 このような場合は、デスクトップ版Webブラウザの「スマホ表示」機能（スマートフォンのWebブラウザのエミュレーション）を利用すると、PCで簡単にスマホサイトの確認ができます。操作方法もそれほど難しくありません。 本記事では、Windows OS／macOSのデスクトップ版Google Chrome（以下、Chromeと略）の「デベロッパーツール（開発者ツール）」でスマホ表示を確認する方法を紹介します。このツールは名前に「デベロッパー（開発者

ちょっと今更な話題なんですけど、始めて 使ってみたら便利だったのでご紹介です。 管理画面内のcssを手軽に変更できる、と いうプラグイン。よくあるブログサービス でも管理画面は簡単にデザインを変更でき るようになっていますが、それを実現する プラグインです。 手軽に、というのはプログラミングの知識が不要って意味です。このプラグインを有効化すると、cssを追記できるようになりますので、カスタマイズの知識が無くても管理画面内のデザインを変更できます。 css書くだけで管理画面のデザインを変更できます。この手のは沢山あるんですが、結局シンプルにcssで出来るのが制作者向けかなぁとは思いました。 抜粋が狭すぎるので広げてみた。あと、テーマやプラグインはいじられると困るので非表示に、みたいな感じ。 こういったカスタマイズの目的はWebに疎いクライアントさんはアクセス出来ないようにしたい、邪魔なものを

こんにちは。LIGフィリピン支社代表のせいとです。 全く関係ない話ですが、ポケットモンスター X・Yが発売されたそうですね。「金・銀、ブラック・ホワイトときたら、次はパステルカラー辺りが来るはずや！間違いない！」と思っていた僕の予想はまんまと外れました。まあそれはいいとして、 今回はSassについてちょっと語らせていただきます。Sassというと、「効率、コーディングスピードが超上がるらしい」とか、「LINE株式会社、株式会社DeNAとかも採用してるらしい」という話を聞きます。僕もSassについては勉強しているんですが、当初はわかりにくい部分もありました。 それは「そもそもSassが何なのかよくわからない。プログラミング言語？？」ってことと、「インストールが上手くいかない！コマンドプロンプト使い方わからない！Dreamweaver（以下DW）動かない！GUIソフトってなに！？」ってことです。

こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh

webmobileは、みんなが知りたいスマホ・通信ガジェットの使い方を発信しているレビューサイトだよ♪ webmobile（ウェブモバイル）は、大好きなPixel/iPhone/MVNO/amazonについて、気づいたこと・困った事の解決など経験したことを発信しています。 運営歴はかれこれ10年以上です。 私が初めて買ったスマートフォンは、auから発売されたSHARP製IS03。今でもデザインの良さに感銘を受けます。 今のメイン機はGooglePixelとiPhone15ProMAXです。 昔はASUS製ZenFoneにはまり、新製品が発売されるごとに買っていました。 MVNOのお店に我が子と訪ねる旅、楽しかったなぁ♪ ご縁あって、UQコミュニケーションズ本社に行くこともありました。 UQモバイル公式グッズをたくさん手に入れる機会がありました。 東京新宿にあるLINE株式会社に招待して貰っ

CSS3フレームワークは数多くなってきたのでその特徴をちゃんと掴んでおかないといけないですね。 GumbyはSassを使ったCSS3フレームワークです。他のフレームワークと同じようにレスポンシブ、モバイルフレンドリーになっています。その特徴を見ていきましょう。 まずデスクトップからです。 ヘッダーバー。フラットだったり、幅が固定だったりと色々な形式が想定されています。 タイポグラフィ。可読性高いです。 リストだけでも黒丸、白丸、ドット、数字など多数用意されています。さらに定義リストまで！ ボタン。サイズ、色、形が様々です。片方だけ丸い、なんて便利そうですね。 インジケーターやラベル、アラート。こういうのもよく使いますよね。 フォーム。基本的にplaceholderを使った表示になっているようです。 テーブル。角丸サポートです。 タブ。幅が設定できます。 縦のタブもあります。 ドロワー。クリ

2014年8月17日 Photoshop, Webデザイン 先日、Webデザイナーになってもうすぐ2年がたつというMさんから、「どうすればデザインのスキルを磨くことができるのか？」という旨のご相談を頂きました。今回は彼女の相談メールでもふれられている、デザインのスキルアップに有効なWebサイトの模写のやり方について掘り下げてみようと思います！ ↑私が10年以上利用している会計ソフト！ 頂いたご相談メール 実は最近スランプぎみになっていて、サイトデザインを作成してもなぜかダサい、野暮ったいデザインになってしまいます。 デザインスキル向上させるために、いいデザインのサイトを模写するといいときいて模写もしてみたのですが、ぴったり一致するように作るのに意識がいってしまい、あまりデザインスキルが上がったと実感できないでいます。（模写したデザインを自分のオリジナルで活かせない） もし模写するときはどう

スマートフォンが爆発的に普及し、今や自社サイトをスマートフォンなどマルチデバイスへ対応させることは、Web担当者にとって無視できない課題となってきました。とはいえ、従来PC向けWebサイトや携帯電話（フィーチャーフォン）向けWebサイトのみを構築・運用してきた企業にとって、更にスマートフォンサイトを導入するのは、コストや運用負荷の面で悩ましい問題です。 そこでこのコラムでは、単にPC用サイトや携帯電話用サイトとスマートフォンサイトとを別々に構築・運用するという方法以外に、効率的・効果的にスマートフォンサイトを導入するための方法を、メリット／デメリットを挙げながらご紹介します。 (1) PC用／スマートフォン用別々のサイトを用意し、CMSでコンテンツを一元管理する PCサイトとスマートフォンサイトをスクラッチで構築し、双方を一元管理できるCMSパッケージを導入する方法です。 初期導入の手間や