floatレイアウトはすでに過去のもの。Webサイトの要素の位置を操作するならFlexboxが定番となりました。出遅れたWeb制作者のために基本を解説します。 テーブルタグが唯一のWebページをレイアウトする手法だった頃を覚えていますか？ 表形式のデータを表示するための機能をレイアウトに無理やり使っていたので、タグ名の意味と用途が異なるひどい状態でした。新しい「道具」が必要になり、「正しい」レイアウト方法としてfloatと絶対位置指定による手法が登場しました。 しかしテーブルタグ同様、floatと絶対位置指定の目的はWebサイトを整形することではありません。 主要ブラウザーがCSSで機能する頼れるレイアウトエンジン、CSSグリッドレイアウトをサポートしました。非対応のブラウザーに対する互換措置をすれば十分使えます。 互換性確保の方法は、Flexboxベースのレイアウト（W3Cが好む言い方だ

行内要素(inline Element)とブロック要素(block Element)の区別が出来ていないようです。 仕様書は一度通して読んで置かれると良いでしょう。 ⇒7.5.3 ブロックレベル要素と行内要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … ) ブロック要素は、前後に改行を挟むブロックとして整形されます。 ＞<div>のwidthを可変にしたいのです。 と言う時点で矛盾してしまいます。 これはスタイルシートのdisplayプロパティで変更できます。 ⇒9.2.4 The 'display' property( http://www.w3.org/TR/CSS2/visuren.html#display-p … ) 邦訳のあるCSS2と、現行のCSS2.1ではdisplayの値が異なりますので、原文へのリンクです。 文字

こんにちは、霙です。 ウェビメモ製作時に、ページをどんなにスクロールしても横にくっついて来るソーシャルボックスを作りました。 コードを教えて欲しいという方がいたので、他の方にも需要あるかな？と思い、記事にしてみました:) 自分のサイトに使いたい方はコピペしてご自由にどうぞ！ （IE6対応版にはこちら） 読者が利用するタイミング みんなが設置しているソーシャルボタン。いざ自分のブログにつけるとなるとどこに置こうか迷いますよね。 記事の最初に設置するもよし、最後に設置するもよし、両方設置するもよし。 とにかく設置するにあたって重要な事は 「どこに置けば読者の方々に押してもらいやすいのか」です。 自分が読者の立場になった時はどうですか？？ 私は寂しがり屋なので、常に隣に居て欲しいんですよ・・・///// てゆうのは冗談ですが、自分だったら記事を読む前にツイート数、はてブ数を見てます。 タイトルを

CSS おれおれ Advent Calendar 2012 – 05日目 横幅いっぱいに広げようとしてwidth:100%を指定したら横スクロールバーが出ちゃった、という経験ありませんか？　その原因と仕組み、回避策についてお話しします。 わりとFAQな感じ。これは是非覚えておいてもらいたいです。というか知っておいてください。 はみ出した例 position:absoluteないしposition:fixedを使った際にこうなっちゃう事が多いと思います。 上部から出てきたメッセージ欄、横にはみ出てますね。 でも指定はちゃんとwidth:100%です。「幅いっぱい」を指定しているのに、どうしてはみ出てしまったんでしょうか。 「幅」が意味するところ 実はCSSの仕様が定めるところの「幅」というのが、我々が視覚的に認知している「幅」と異なっているのが原因です。 CSSではこんなものを定めています。

見出しジェネレーター 外観や色を選んでCSSを生成するジェネレータータイプ。 CSS見出しジェネレーター CSS見出し-ジェネレーター | WEB道 吹き出しやリボン、背景色、ボーダー色、文字色、影、ぼかしなどを選択して見出し用のCSSを生成するジェネレータ。 見出しメーカー 好きな色でCSS見出しが作れます | スタイルシート見出しメーカー 好きな色を選んでボタンを押すだけでシンプルな見出しが作れる見出しメーカー。 見出しサンプル集 見出しデザインと、HTML・CSSがセットになったデモサンプル集。 CSS見出しデザインのアイデア9個 H1一つでここまで出来るCSS見出しデザインのアイデア9個 切り取り線、テープ、リボン、吹き出し、アメリカンな吹き出し、付箋、メタルプレート、モザイク、旗、のような見出しをCSSのみで実現しています。ポイント解説などもあってわかりやすいです。 CSSのみで

ヘッダーやフッターなどがブラウザの横幅いっぱいに広がっているウェブサイトをよく見ると思います。そういった表現を実現しようという趣旨です。スタイルシートを活用して、画面いっぱいに広げたいと思います。 以前、どのような考え方でCSSを変更し横を画面いっぱいに広げればいいのかということをまとめたのですが、実はある問題が発生していました。 問題）レスポンシブデザインに対応できなくなった Twenty Elevenはもともとレスポンシブデザインになっていました（レスポンシブデザインって何？　という場合は、ググってみてください）。しかし、横幅いっぱいにヘッダーやフッターを広げると、なぜかレスポンシブデザインではなくなってしまったのです。iPhone で確認すると、サイトは単純に縮小されたように表示され、第一印象では「小さすぎて何が書かれているか分からない……」という感じです。なのでタップして拡大しない

Twitter CPIのTwitterアカウントでは、サイト、サーバー管理者のための重要なセキュリティ情報や、サイト運営者のためのヒント、お得なキャンペーン情報をお知らせしています。 Follow @cpiadjp Tweets by cpiadjp 掲載内容について、当社は情報の掲載には細心の注意を払っておりますが、完全性などについて保証を行うものではありませんので予めご了承ください。 掲載されている情報をご利用いただいた際に、損害が発生・誘発した場合や、情報自体の真偽性・合法性・道徳性・著作権の許諾等について問題が発生した場合などについて、当社は一切の責任を負いません。掲載されている情報を利用したサイト製作については、ご自身の責任において行ってください。

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

Bootstrap3を使ってて、フォームの横幅を変えたいなって時ありませんか？？ Bootstrap3のフォームの横幅のデフォルトはwidth:100%で設定されています。 ですので、普通にフォームを使用すると画面横いっぱいに広がってしまいます。 ↓こんな感じ

どうもpei(@pei_babo)です。 ご存知の通りBootstrapは「レスポンシブ・デザイン」を簡単に導入できるCSSフレームワークですね。 画面サイズの違うPC・タブレット・スマートフォンなど、どのデバイスでも見やすく・且つ操作しやすいイケてるWebページを簡単に実装出来てしまうという画期的なものです。 各コンポーネントがしっかりレスポンシブ化されているので、本家Bootstrapサイトの使い方を真似すれば特に気にせず勝手にレスポンシブ化されてて嬉しいのですが、「ちょっとだけ動き変えたいな。」という時もあると思います。 今回はその「ちょっとだけ動き変えたいな。」の部分から、Navbarのメニューがスマホなど画面サイズが小さい時に勝手にボタン化されて見やすくされてしまうのを防ぐ方法を紹介します。 プログラミングやWordPressを習得するのに一番近道な方法とは？ Navbarの動き

LESS環境の構築 CentOS 6.5-i386-minimalのBoxを起動し、LESSが利用可能なBoxを作成します。 manパッケージのインストール minimal構成のCentOSには、manがインストールされていませんので、予めインストールしておきます。 $ sudo yum -y install man nvmのインストール Node.jsは、バージョンアップも頻繁に行われているため、rbenvと同様に複数のnode.jsを切り替えて使用できるnvm(Node.js Version Manager)をgithubからインストールします。 $ git clone git://github.com/creationix/nvm.git ~/.nvm $ source ~/.nvm/nvm.sh $ git clone git://github.com/creationix/nvm

領域をはみ出したときに三点リーダー（…）で省略するtext-overflow: ellipsis;は、スマホサイトでは普通に使っていたけど、PCでは数年前に使おうとしてなんかのブラウザでダメだった記憶があって、使えないものとばかり思い込んでいた。 でも、ふとCan I use CSS3 Text-overflowをみたら、めっちゃ対応してた！IEなんて6から対応してるし、Firefoxも7から使えるようになってた。 実際に書いてみたら、いつものこんな感じのコードで普通に使えました。 overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 昔、JSでなんとかそれっぽくできないかみたいに、誰かががんばっていたのはなんだったのか。 わたしみたいに使えないと思い込んでて、意外としらない人いるかもしれないので、ブログに書いてみま

はてなブログのスマホ版(モバイル版)で、横幅320pxのAdsenseとlinkwithin(レコメンドエンジン)がはみ出て、横スクロールが出てしまう問題（通称スマートフォン横スクロールガクガク問題）の対処法です。 ネットで引っかかる対応策が、情報が古いのもあるのか「？」な対応なものが多かったもので、わりとまじめに考えました。 結論 8/18 2:00 ブコメで指摘があったので、レスポンシブル対応に1行追加*1。このブログのスマホ版フッター(プロフィールの上)をレスポンシブルにしてみましたので参考までに*2 「ダッシュボード→設定→詳細設定→headに要素を追加」と選択 <style> /* 342px(320px/93.75%)未満の横幅のとき、adsenseを10pxずらす */ @media screen and (max-width: 341px) { .mobile-adsens