画像とテキストを真ん中で一列に並べて表示したい時のコードや方法を軽くまとめ。 そして、vertical-alignについての説明です。 ※201504-大幅修正 画像とテキストの縦揃え まずはhtmlで画像とテキストを横にただ並べてみます。 <!-- html --> <p class="anago"><img src="画像の名前"> テキストを中央揃え!</p> このような感じで、テキストと画像がうまく中央で並んでくれません。 (vertical-alignプロパティ基準値が【baseline】のため) というわけでテキストや画像などの縦方向の揃え位置を指定できるvertical-alignの番です。 ー駄目なやつー /*css*/ .anago{ vertical-align:middle;/*middleは中央揃え*/ } 全体を囲むpに対してcssを書きたくなりますね。・・・なり
アクセシビリティなピンク本と緑本*1でお馴染みの、太田さん（@bakera）と伊原さん（@magi1125）のコンビによる新たなウェブ技術関連の訳書がまもなく世に送り出される運びになりますが、そのお手伝いをほんのちょっぴりしました、というお話です。要するに書籍の宣伝と言う類いのものです。 さて、訳書と言うことは当然原著が存在するわけですが、原著者は緑本と同じ、ヘイドン・ピカリング（@heydonworks）さんです。緑本の"あの"独特な感性は本書でも健在であります。ちなみに、原著のレビュワーとして、W3C HTML 5.1のエディターでもあるスティーブ・フォルクナー（@stevefaulkner）さんの名前が見えます。図らずも書籍で同じページに名前が載ることになりました。うふふ。 日本語版レビュワーは私を含めて4人いたりするのですが、私以外にはWebsite Usability Infoの
日本語対応！CSS Flexboxのチートシートを作ったので配布しますFlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。 Web クリエイターボックスでは以前から Flexbox の使い方について紹介してきたのですが、最近 Flexbox が浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ 動画で学ぶ CSS Flexbox この記事は YouTube 動画でも解説しています。動画派の方
HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります（※）。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw
ますます進化するウェブデザインの世界を体感でき、コピー&ペーストで利用することもできる HTML/CSS スニペットをまとめてご紹介します。ただいま流行中のWebトレンドの実装を可能にする最新レイアウトから、どんなプロジェクトにも活用したくなるエフェクトやテクニックなどを中心にまとめています。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 詳細は以下から。 コピペでOK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ 01. Fixed Images That Fades as You Scroll 画面を２分割し、スク
ブロック要素とインライン要素の違いは非常に重要にも関わらず、気にも留めずにHTMLを記述している人が多く見受けられます。 ここできちんと理解してしまいましょう。 基本事項 ブロック要素って何だ? ブロック要素とは、 文書の骨組み です。 例えば見出しを表す <h1> や、段落を表す <p> などがブロック要素です。 これらは視覚表現をするUA(例えばMSIEやMozillaなど)で、特にスタイルを指定しない場合、幅を画面いっぱいに取り、前後が改行されます。 簡単に言ってしまうならば、ブロックを作り出します。 これらの中には大抵他のブロック要素や、インライン要素を含む事が出来ます。 ブロック要素の一覧はインライン要素を知ってから説明することにしたいと思います。 インライン要素って何だ? inlineを直訳すると「行内」であるとおり、インライン要素は 行の中の文字に論理的な意味を持たせたりしま
CSS の display プロパティについて紹介します！ display: inline・display: block・display: inline-blockについてのおさらい。HTMLとCSSひよこちゃん向け！ いろいろ便利な CSS の display プロパティ。今回は display: inline display: block display: inline-block についておさらいしてみます。HTMLひよこちゃん向けの記事です！ displayプロパティで、ブロック・インライン・インラインブロックをおさらいしてみた displayプロパティ displayは、要素の「表示形式」を指定するプロパティ。 ブロックレベル要素をインライン形式で表示したり、インライン要素をブロックレベル形式で表示することができます。 構造的にはブロックレベル要素なんだけど、インラインとして表示
ferret編集部：この記事は2015年11月2日の記事を再編集しています。 ここ数年で定着してきた「レスポンシブデザイン」。 Webデザインに関わる人であれば、この言葉を耳にしたことがあるのではないでしょうか。 iPadなどのタブレットや、スマートフォンの表示に最適化されたページと理解されている方も多いかもしれません。 では従来のモバイル対応ページとはなにが異なるのでしょうか？ スマートフォンが一般に普及し、タブレットも次々に上位機種が発売される今、ますます需要が高まってくると見られるレスポンシブデザインについてまとめました。 レスポンシブデザインの定義 レスポンシブは日本語だと「反応が良いさま」と訳され、レスポンシブデザインは「単一のURL（HTMLファイル）であらゆるデバイスに最適化されるデザイン」を指します。 従来は、パソコン、スマホ、タブレットなど、表示サイズの異なるデバイス毎に
これからのCSSレイアウトはFlexboxで決まり！FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ 対応ブラウザーCan I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari 用に -webkit- のベンダープレフィックスが必要です。IE については 11 から正式に対応。IE10 にも対応していますが、書き方が少し変わって
debugCSS: (X)HTML debugging tool built with CSSdebugCSS is meant to be loaded on an existing page to highlight potentially broken, malformed or legacy (X)HTML. Not all "errors" are created equally, so they are color coded to highlight severity. Green is "probably not a big problem", yellow is "worth looking at" and red is "you really should fix this." Click and drag the link below to your bookmark
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
