CSS初学者がきちんと理解したい、marginとpaddingとborderの複雑な関係
marginとpaddingはCSSの基本ですが、正確に理解できていないと「レイアウト崩れ」にもつながります。この春CSSを学び始めた方へ、必読の解説記事です。 CSSを学び始めたばかりのころ、marginプロパティとpaddingプロパティに混乱しました。そっくりに感じただけでなく、同じ表示になっているとさえ思えました。 このチュートリアルでは、CSSにおけるmarginとpaddingの違いと、Webページでの余白への影響について解説します。さらにマージンの相殺（margin collapsing）やレスポンシブWebサイトの作成でさまざまな単位を使った場合の効果について説明し、最後にCSSのmarginと paddingを使って実現できるレイアウトテクニックをいくつか紹介します。 ボックスモデル CSSは、要素を四角形のボックスで表します。四角形のサイズは次の要素で指定します。 Co
あなたが知らないスゴいフロントエンド開発ツール7選
2016年も進化し続けたフロントエンド開発ツール。Web Tools Weeklyのキュレーター・Louisが1年を振り返り、お気に入りのツールを紹介します。 1年が過ぎ、Webプラットホームでは予想どおり革新、いらだち、疲れとともに、開発者を支援する新しいツールやテクノロジーの大量リリースが爆発的に勢いを増しています。 ReactやAngularといったおなじみのツールがアップデートされた一方、Vue.jsなどの新しいツールも登場し、あっという間に大きな関心を集めました。 私はツールに焦点を当てたウィークリーニュースレターのキュレーションをしているので、調査中に途方もない量のツールに出会います。もちろん人気のツールにはある程度注意を向けますが、あまり注目されていないツールで興味深くかつ実用的なものも評価しています。 そこで昨年と同様、この記事でフロントエンド技術者向けツール分野の2016
これで作れる！ Androidのアプリケーション
sponsored 2024年4月に新キャンパスへ移転した静岡デザイン専門学校は、最新設備を備えた実習室とMSIのノートPCで学生の実践力を養成 sponsored 部屋が狭い日本家屋仕様になったピラーレスケース、自作初心者にもオススメ！ ピラーレスだがコンパクト、価格もお手頃なCORSAIRのPCケース「3500X」が完成度高い！ sponsored コスト、人材、セキュリティ…… データ活用の課題を包括的に解消するHPEの取り組み なぜHPEがソフトウェアを？ 統合データ基盤「HPE Ezmeral」に注力する理由を率直に聞いた sponsored “データをためる”と“データを活用する”の2製品が解決する課題、得られるメリットを知る 「HPE Ezmeral」がシンプルに実現する大規模データ活用の姿とは sponsored スマホ設定で快適なハイエンドゲーミングルーター「ROG Ra
スマホ対応の新潮流「レスポンシブWebデザイン」とは？ (1/3)
スマートフォンの普及を背景に、「レスポンシブWebデザイン」（Responsive Web Design）という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか？ 実例で解説する。 ウィンドウサイズを基準にデザインを調整 レスポンシブWebデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法だ。モバイルサイトの制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的だが、レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更する。 レスポンシブWebデザインは、2010年5月、米国のイーサン・マルコッテ氏によって提唱され、海外では企業サイトを含む多くのWebサイトで採用されてい
ブラウザーテストの決定版！MS謹製ツールが登場
ブラウザーによって差異の出るWebページの表示テストを効率化したいWeb制作者に朗報だ。マイクロソフト製のブラウザーテストツールが、3月に米国で開催された“MIX09”（関連記事）で発表された。現段階ではInternet Explorer（IE）6～8の表示テストが可能で、正式版ではFirefoxやSafariもサポートする計画だという。 新ツールの名前は、「Expression Web SuperPreview」。現在、最初のプレビュー版「Expression Web SuperPreview(March Preview)」が、同社のブログで公開されている。正式版は、Webオーサリングツール（Dreamweaverの対抗製品）の次期バージョン「Expression Web 3」に同梱される予定だ。 このSuperPreviewを使えば、通常は共存できない、異なるバージョンのIEレンダリン
Google ChromeはSafari 3.1相当
ここのところ、IE8ベータ2やFirefox 3.1など、次世代Webブラウザー関連のニュースが続いているが（関連記事1、関連記事2）、あのグーグルからもついに独自のWebブラウザー「Google Chrome」が発表された（関連記事）。 一般公開からわずか1日足らずで、Google Chromeの高速な表示性能や独自のUIによる機能性を評価する向きは高まりつつある。だが、これまでさまざまなブラウザー環境での表示互換性の確保に苦労してきたWebサイトを“作る側”にとっては、「また対応ブラウザーが増えるのか？」とうんざりした方も少なくないのではないだろうか。 そんなWeb制作者の思いに対して、9月3日の記者説明会でグーグルのシニア プロダクトマネージャーである及川卓也氏は、「Google ChromeはWeb開発者の負担を増やすものではなく、心配することはない」と説明した。その理由は、Chr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
