HTMLとかCSS ひよこちゃん向けシリーズ、【float】編です！CSSの【float】について本気出して説明してみた。left right ,clearってなに！？？ HTMLとかCSSとかこれから！な、ひよこちゃん向けシリーズ、【float】編です！ 2016/07/15 一番最後のほうにfloat clearfixの修正版追加しました。 float(フロート)とはなんぞや？ floatとは、要素（<div>とか<p>とか）を右に寄せたり、左に寄せたりするときに使います。 よくサイトで見られるサイドバーとかサイドメニューとかもfloatで配置することが多いですね。 まずは、プロパティをおさらいしておきましょう！ left 【左に寄せる】 right 【右に寄せる】 none 【やっぱフロートやめる】 inherit 【継承させる】←使うことあまりない プロパティは以上です。基本的にi
CSSレイアウトでfloatを使用した際、通常は親要素内にfloatする要素があり、floatに続く要素にclearを指定し回り込みを解除します。（これが基本です。）clearfixとはclearプロパティを使わずにfloatを解除する手段です。 例えば親要素内でデザイン上どうしてもfloatを解除する為のボックスを設けたくない場合などに利用します。 一部のブラウザで親要素内でfloatを解除しなかった場合に起こる現象として、親要素内に指定した背景画像が表示されない、或いは親要素の下まで表示されないなどがあります。 以下にサンプル解説します。 サンプルソースと通常指定 <div id="mainbox"> <!-- 親要素 --> <div id="box-a"> *** </div> <!-- float --> <div id="box-b"> *** </div> <!-- floa
Yahoo! UI Library Grids CSSを使ってページレイアウト - WEBデザイン BLOG
このブログは、MT（Movable Type[ムーバルタイプ] 3.31-ja）を導入して制作されています。デフォルト（初期設定）のレイアウトだとイマイチに思ったのでカスタムメイドでのレイアウトで制作してあります。ベースは、Yahoo! UI Libraryが公開されましたのでそちらのGrids CSSを使ってページレイアウトしています。 このYahoo! UI Library Grids CSSは、かなり使えるものだと思います。多くのユーザーを相手にアクセシビリティーを考えて設計されたCSSレイアウトなのでCSS（スタイルシート）を覚えようと思っている方にも参考にするととてもいい情報です。今回は、自分なりにこのYahoo! UI Library Grids CSSを解る範囲で説明・紹介いたします。 かなり使えるCSSソースなので、是非DLしてお使いになることをオススメします。ソースのDL
webの仕事をしながら家でもwebサービスとかを作ったり作らなかったり、成長と挫折の記録・・・かもしれない仕事で某ポータルサイトのモバイルページを構築するようになって1年近く。 ノウハウがある程度溜まってきたのでxhtmlのことを中心に色々とまとめてみる。 目次 雑多なこと ヘッダー divタグ spanタグ brタグ hrタグ imgタグ aタグ サンプル 雑多なこと 出力は基本Shift_JISで（ドコモ基準） 静的ページを作るときは拡張子を.xhtmlにしないとドコモ端末がxhtmlをhtmlと認識してしまう。 （というか静的ページは絵文字とかヘッダー周りで色々不便なので、止めといた方がいい） 動的ページを作るときはapplication/xhtmlをヘッダとして送信してやらないとドコモ端末がhtmlと認識してしまう。phpだと出力前にこんな感じの処理。 header("Conte
最近、cssでよく使用しているのがclearfixです。 親ボックス内で子ボックスをフロートする場合、親ボックスの背景画像が表示されなかったり親ボックスのマージンがなくなってしまったりと問題がありました。 clearfixを使ってからは、結構スムーズにCSSを設定できるようになりました。 ソースは以下です。 .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-table; min-height: 1%; } /* Hides from IE-mac \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* End hid
かのうです。 サイブリッジは今夏休み！でも私は休みをずらして9月末の祝日と合せて大型連休にしうと企んでいます。今のところまだ予定はないんですけどね笑 そういえば「iモードブラウザ2.0」のお話 2009年5月以降に発売開始されたdocomo端末に「iモードブラウザ2.0」が搭載されていますよね。 デザイナー向けの新しい機能は下記ですが、まだまだ完全に普及したとは言えないので、結局のところ「XHTML+CSS」での携帯サイト構築が必要ですね。 ・外部スタイルシートを含むCSS対応 ・サイズ制限が500Kバイトに ・Shift_JIS、UTF-8の文字コードが利用可能 ・JavaScript対応（Ajax含む） ・ページ埋め込みFlash動画（FLV）対応 ・クッキー対応 ▼docomo公式サイト iモードブラウザについて XHTML+CSSでの3キャリア対応の落とし穴 なんで普及もしばらく時
iPhone アプリケーション開発 まとめ Wiki 当サイトは、iPhoneアプリケーション開発に関する情報のまとめWikiです。iPhoneアプリケーション開発に興味がある方なら、どなたでも編集可能です。 トップページページ一覧メンバー掲示板編集 App Storeの審査基準 最終更新：ID:vByJYZkaEA 2011年03月30日(水) 18:20:05履歴 Tweet App Store Review Guidelineに記載されているリジェクト項目の訳です。 素人翻訳なので、誤訳が含まれる可能性が大いにあります (;´Д｀) Functionality - 機能に関するもの Metadata (name, descriptions, ratings, rankings, etc) - メタデータ(名前、概要、レート、順位、など)に関するもの Location - 位置情報に関
JavaScriptを理解する
java script を理解する。。。 愛用本 詳解 HTML & JavaScript 辞典 IE でしか動かない物が多いと思いますので Using the W3C DOM もチェックして修正してください。 算術演算子 演算 演算子 加算 + 減算 - 乗算 * 除算 / 剰余算 % 代入演算子 演算子 意味 = 代入 += 足して代入 -= 引いて代入 *= 掛けて代入 /= 割って代入 %= 割った余りを代入 単項演算子 演算子 意味 ++ １足す -- １引く - 符号の反転 関係演算子 演算子 意味 > 大きい時 >= 以上 < 小さい時 <= 以下 == 等しい時 != 等しくない時 真と偽 真は true 偽は false 論理演算子 演算子 意味 && (and) 比較対象が真ならば真、それ以外ならば偽 || (or) 比較対象のどちらかが真ならば真、それ以外は偽 ! (
デフォルトでは表示されていないボタンを追加したり、エディタ部分に任意のクラスやスタイルを適用させるなど、WordPressのビジュアルエディタをカスタマイズしたいときに使えるプラグインやTipsなどを備忘録兼ねてまとめました。 普段からビジュアルエディタを多用しているのであれば、これらをいろいろ組み合わせてみることでより便利に使いやすくできると思います。 ビジュアルエディタを簡単にカスタマイズできるプラグイン「TinyMCE Advanced」 「TinyMCE Advanced」は投稿画面などに用意されているビジュアルエディタをより便利にしてくれるプラグインで、有効化することでデフォルトでは表示されていないボタンが追加したり、並び順を任意のものに変更することができます。 使い方もプラグインをインストール・有効化するだけと簡単で、自分好みにカスタマイズしたい場合は「設定 → TinyMCE
逆引きRuby/Tk
逆引き Ruby/Tk Widget 全般 幅や高さを設定する #!/usr/bin/env ruby require "tk" TkLabel.new { text "Hello!!" width 10 height 10 pack } Tk.mainloop ボタンで大きさが変わるサンプル。 #!/usr/bin/env ruby require "tk" l = TkLabel.new { text "Hello!!" pack } TkButton.new { text "Wide" command { l.width(l.width + 10); print "width: #{l.width}\n" } pack('fill' => 'x') } TkButton.new { text "Narrow" command { l.width(l.width - 10); prin
zshのinfo の読書メモ
これは zsh manual を読みながら書いたメモである。 僕には判りきっている部分とか、必要としない機能とか、意味が判らない場所とかは適当に読み飛しているので注意 1. The Z Shell Manual 1.1 Producing documentation from zsh.texi html 版マニュアルは http://zsh.sunsite.dk/Doc/ にある 2. Introduction zsh は、スタンダードなシェルの中では ksh に最も近い。 2.1 Author zsh をはじめたのは Paul Falstad <pf@zsh.org>. 現在は zsh-workers mailing list <zsh-workers@sunsite.dk> でメンテされていて、コーディネータは Peter Stephenson <pws@zsh.org>. 彼へのコン
CSS 回り込み解除の決定版 | ユージック
CSS 回り込み解除の決定版 2007年1月19日 ここ最近コーディングをしていてDRY(Don’t Repeat Yourself)同じ作業を繰り返さないという考え方をCSSやマークアップにも取り入れていきたいと思うようになりました。そこで今回はfloatに関する便利なTIPSをご紹介します。 floatをかけた要素の後続要素は自動的に回り込んでしまいます。それを解除するためにclearを後続要素にかけてfloat解除しますが不自然さを感じます。というのも別の所でその後続要素を回り込ませたい場合などがあれば、floatの解除の解除といった同じ作業を繰り返してしまうからです。 そこでfloatの後続要素にclearをかけずにfloatした要素を含んだ親のブロック要素にclassをつけるだけで後続要素を回り込まなせないような方法があります。 classは2つでも3つでも付けることができますの
やっとできました！ アイキャッチの表示。 アイキャッチとは、その名の通り目をキャッチするためのもので、一般的には画像・写真が使われています。人は写真に注意を惹きつけられてしまう癖があるため、ブログなどの記事に注目してもらうためにこのアイキャッチが有効なのです。 WordPress にも実装されていて、アイキャッチ、またはサムネイルなどと呼ばれています。テーマによってはただ写真をアップロードするだけで表示されるものもありますが、中には自分でカスタマイズしないと表示されないテーマもあります。 ですので、ここでアイキャッチ（サムネイル）の一般的な実装方法について試行錯誤して分かったことをまとめておきたいと思います。 アイキャッチ画像を設定すると、ブログが消えた！？ とにかく、めちゃくちゃ苦労しました。ワードプレスの記事投稿画面に「アイキャッチ画像を設定」という項目があるので、そこから簡単に設定で
アイマス シンデレラガールズ 11話 「Can you hear my voice from the heart？」 海外の感想 : かいがいの
2015年03月29日23:59 カテゴリデレマス Tweet アイマス シンデレラガールズ 11話 「Can you hear my voice from the heart？」 海外の感想 Can you hear my voice from the heart？以下、AS、MAL、Reddit、4chan、YTより引用。(DAISUKIで公式配信中です。) 不明 で、Pくんはどうしてこの二人にユニットを組ませたんだ？文字通りの 情熱以外の理由があるんだったら、自分は見逃してしまったようだが。 凛 ：また揉めてる・・・(They're at it again・・・) 未央：あの2人にユニット組ませるって絶対無理があるよね・・・ (Putting those two together in a unit was a bad idea.) 卯月：イメージ的には正反対な感じですよね。 (T
レスポンシブHTMLメールを作成することがあったので、覚書です。 おもに「テーブルレイアウトで、PCの時には横並びのカラムを、スマホの時には縦並びにする」 方法についてです。 普段、あまりHTMLメールを作成することがない方もいらっしゃるかと思いますので、 まず、HTMLメールを作成する際の大前提を。 だいたい以下のような感じです。 テーブルレイアウト Outlook（2007/2010/2013）がfloatに対応していないなど、 メーラーによって、CSSのサポート状況にばらつきがあります。 多種多様なメーラーでレイアウト崩れを起こさないためには、 テーブルレイアウトが基本です（今更感はありますが）。 ※主要メーラーのCSSサポート状況は以下で確認できます。 Guide to CSS support in email | Campaign Monitor CSSはインラインで記述 Gma
HTML、CSS、JavaScriptのお勉強まとめ 学習書籍「これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん」 ソース：https://github.com/tseno/Basic_HTML_CSS_JavaScript 第2章 申し込みフォームの作成 cssファイルの先頭に@import url(sanitize.css)を置くとcssがリセットされる。または、@import url(https://cdnjs.cloudflare.com/ajax/libs/10up-sanitize.css/4.1.0/sanitize.min.css); margin: 10px auto; のように、左右指定をautoにすると中央寄せされる。 margin ：要素の外の余白、padding：要素の中の余白。 box-shadow: 0 0 8px rgba(
レスポンシブなサイトで高さが可変のブロック要素の一覧をレイアウトする際にてこずったので、課題になったこととその解決方をメモしておきます。ニュースサイトなどに良くあるサムネイル画像とタイトルのブロック要素の一覧で、画面サイズに合わせてカラム数が変わる以下のようなレイアウトです。ちなみに、Flexboxを使わないやり方です。nth-child()とclearを使った方法、inline-blockを使った方法、さらに、flexboxを使った方法の3つをまとめてみました。 レイアウトの条件 レイアウトの条件を整理しておきます。 表示件数が変わる 表示件数が変わる場合でも同じHTMLとCSSでレイアウトする ブロックによって高さが異なる 画面サイズに合わせてカラム数を変える 上の条件だとli要素をfloatしてメディア・クエリで画面ごとに幅を指定すれば簡単にできそうです。ところが、ブロックの高さが変
TopCoderでプログラムしてみた。
未復習問題の正解率（uwiさんのSRMさーち（べーたばん）を利用しています。） Googleスプレッドシート その他未復習問題 ●TopCoder ・SRM524別解 DIV1 500ptsでトポロジカルソートの練習 ・SRM526別解 DIV1 500ptsで negamax木・RMQ ・SRM561 Grundy数 ・TCO 11 Round 5 250pts（ニコ生オープン） ・TCO 11 Round 4 250pts（ニコ生オープン） ・TCO 12 Round 1C, 2A, 2B, 2C ・TCO 12 Round 1B Fox and Doraemon （DP解） ●CodeForces ・C. Smart Cheater #107 Div1 C セグメントツリー http://codeforces.com/contest/150/problem/C ・D. Subway
ぴのBlog 一貫して一貫性が無いブログ。競馬予想メモ・時々料理‥。 http://pinotan.blog15.fc2.com/ htmlソース上では下方に置いてある検索窓などを、position:absoluteでページ上部に絶対配置する。よく使われる手法だと思うんですが、Win IE（Windows Internet Explorer）ではposition:absoluteを指定した要素が表示されない場合があるみたい（IE6/IE7 beta 2）。IEのバグ？(仕様なのかバグなのかは知りません)例えば下記のような順序で組まれた物。 カラム : float カラム : float 検索窓 : position:absolute フッター : clear:both html上では検索窓がfloatとclearに挟まれている。検索窓はfloatとは無関係に配置出来るはずだが
ほんと、便利なんですよ。 ぶっちゃけCSS3って最高やな！と思うんですが、ある意味それ以上に疑似クラスって奴を理解して使えるようになると、今までイライラしてたこととか、やりたかったコトとかが可能になるんですよね。 次回のブロネクがブログの見た目デザインについてなので、それに引っかけて、疑似クラス・疑似要素を理解しちゃうと、かなり捗るし、いろいろ表現が増えますので、ちこっと紹介したいと思います。 とにかく、疑似クラス・疑似要素ってなんだろうか？？CSSまったくわからん！という方にはさっぱり難しいかも知れませんが。個人的に一番有名な疑似クラスは リンクタグのaa:hover a:visited この:hoverや:visitedの部分が疑似クラスです。 aタグ（アンカー要素）はリンクの色や見た目を修飾するためのモノですが、リンクの中でもホバー状態のとき、訪問済みリンクの時と、同じaタグでも条件
CSS Nite in Nagoya 2007、CSS Nite in Osaka、CSS Nite Vol.18でアンケートにご協力いただいた中で「CSSに取り組む際に最初につまずいたところはどこですか?」という設問に対する回答をシェアします。 5月11日追記： 益子貴寛（サイバーガーデン）さんからコメントいただきました。 ざっくり見たところと、以下の3つ概念（考え方）レイアウト（特にfloat）ブラウザ互換が特につまずいた（つまずく）ポイントのようですね。 入れ子状のdivにつけるmargin・padding。 各ブラウザによるmargin・paddingの認識の違い。 複数ブラウザでの統一。 CSSの記述場所→勝手にヘッダー。 各ブラウザによる表示の崩れ。 class名、id名の管理。 勝手にclassを作る。 フロートの挙動の違い。 divの使い方。 IDとクラスの違い。 クラ
Internet Explorer のバグ - CSSバグリスト
インライン要素に指定した上下マージンは無視される インライン要素にマージン関連のプロパティを指定することはできるが、実際は上下マージンが設置されないように見える。 Category: Internet Explorer, Windows, ver.6 Tag: margin, インライン要素 未知の要素は空要素として扱う WinIEは、未知の要素を空要素として扱う。ただし、開始タグと終了タグがそれぞれ個別の空要素になる。 Category: Internet Explorer, Windows, ver.6 特定のコメントより後のスタイル宣言が無視される HTML文書で用いている文字コードと外部スタイルシートで用いている文字コードが異なっているとき、外部スタイルシート内で特定の文字をコメントにすると、それより後の部分のスタイル宣言が無視される。 Category: Internet Exp
新 App Store 審査ガイドライン 翻訳&差分ガイド 2018年6月号 - Qiita
はじめに これは2018年6月4日付けで変更された App Store 審査ガイドラインの翻訳&差分ガイドです。 前回からの主な変更点は、iOS 12 関連、試用期間、仮想通貨、リモートデスクトップ、プライバシー周りなどです。 試用期間は、これまでサブスクリプションで対応していましたが、これからは非消耗型アイテム (Tier 0) で対応可能です。 仮想通貨について、特にデバイス上でのマイニングは 2.4.2 と 3.1.5 で釘を刺されています。 リモートデスクトップについては、直近の Steam Link 騒動を受けて変更したかのような内容。これなら iOS 版の Steam Link が配信できるかも。 プライバシー周りは、全体的に変更されています。おそらく、GDPR を意識したものかと思われますが、GDPR の対象関係無く対応が必要です。明示的に GDPR が登場するのは、5.1.
Dropbox のセキュリティに関するお話
先日、WIRED VISION に 「Dropboxの暗号化は嘘」：FTCへの告発 という記事が掲載されてちょっとした話題になっていますが、このサイトでも何度か Dropbox オススメだよと書いているので、一応この件に関しても触れておきたいと思います。 ちょっと乗り遅れた感はありますが…先日、WIRED VISION に 「Dropboxの暗号化は嘘」：FTCへの告発 という記事が掲載されてちょっとした話題になっていますが、このサイトでも何度か Dropbox オススメだよと書いているので、一応この件に関しても触れておきたいと思います。 結論だけ先に言うと何を騒いでいらっしゃるの？なんですが、その辺の理由と、あと最後にこの手のサービスを使う際の注意点とかをまとめています。 さて、今回は告発ってことで記事になっていますが、実は本件、もうちょっと前 （4月の中旬） に Dropbox のセキ
rake db rake doc rake gems rake log rake middleware rake notes rake rails rake routes rake secret rake stats rake test rake time rake tmp [参考記事] rake --helpとrake -Tの実行結果 rake -T rakeタスクの一覧を表示する。 rake db:abort_if_pending_migrations Raises an error if there are pending migrations 実行されてないmigrationを表示する。 rake db:charset Retrieves the charset for the current environment's database データベースの文字コードを表示する。 my
2013年、いよいよHTML5、CSS3がガンガン活用されてきました。 最近はCMSでWebサイトを作成することが多いのですが、やはり、ゼロからコーディングする事もあります。そこで、今まで使っていたリセットCSSを見直し、もっと効率良く作業できるようカスタマイズしました。ブラウザごとの違いをリセットするためのCSSに、よく使うCSS3をコメントアウトで入れておきました。 CSS3は、アニメーション系以外で頻繁に使うもの、テキストシャドウ、ボックスシャドウ、ボックスシャドウ内側、角丸、トランジション、透明、背景のみ透明、グラデーションのコードと、おまけでスマホ対応時の記述を書いておきました。使わなかったものは、サイト制作後に、消すだけです。 また、Float解除時に使う、「 clear:both; 」と、 背景色・背景画像を残したい時に使う「 .clearfix 」も書いておきました。 .
clearfixについて このエントリーでは僕が業務で使用しているclearfixについてちょろっと書いてみたいと思います。 色々見てみましたが他の方の記事にはなかったようなので・・・（近しいのはありましたが） CSSを始めて、誰もが困る表示を解決してくれるclearfix。 基本を知っている方でも、この方法は知らない方も居そうなので是非興味がある方はご覧下さい。 clearfixって何？ と思う方は以下のリンクを読んで見てください。 clearfixでfloatを解除 | d-spica clearfixとは – webデザイナーのメモ – Yahoo!ブログ では詳細は続きから。 一般的なclearfix 一般的に知られているclearfixは2通りあるかと思います。 content:” “;型 Coliss様より引用/* new clearfix */ .clearfix:a
という点について分析したNBER論文が上がっている。論文のタイトルは「Inequality of Fear and Self-Quarantine: Is There a Trade-off between GDP and Public Health?」で、著者はSangmin Aum（明知大学校）、Sang Yoon (Tim) Lee（ロンドン大学クイーン・メアリー校 ）、Yongseok Shin（セントルイス・ワシントン大学）。 以下は導入部の一節。 Our model provides a framework for quantitative analysis and can be used to evaluate and predict the aggregate and distributive effects of real-world policies in variou
PUSH! to open / dylancantwell 毎度です、 えばさん ( @Ebba_oBL ) でございます。 かなり今更な感じはするのですが、従来のSNSボタン（各オフィシャルのものを並べたもの）からフラットなテイストのボタンに置き換える事にしました。 見た目がスッキリする他、表示速度の短縮にも一役買うということらしいです。 実際に設置してみたもの 上記の画像が実際に設置してみたものです。 この形がボクのベストと思っている物なのです。6種のボタンがあって、それぞれのカウントが要素の右下に出るというもの。 カウントが右下に出る物は、どこかのブログサイトで拝見して「真似したい」と思って真似たものなのですが、どこのブログサイトさんか失念してしまいました…ゴメンナサイ。 ただ、この形をいきなり表示してくれるソースは見当たらなかったので、いくつかの記事を参考にさせていただいて、改変さ
in te redi: はてなブックマークをカスタマイズ
posted by nano on June 10, 2005 06:51 tohatenatips はてなブックマーク日記 - デザイン編集機能の追加について(はてな) はてなブックマークににデザイン編集機能が追加されました。はてなブックマーク導入時に要望したトップページにリンクを貼る機能もこれで実現できます。 デザインガイド(はてなブックマーク) はてなブックマークの構造(?d:kamioka) とりあえず、上のエントリを参考にこのブログのメニューをのせてみたのですが、はてなのバナーより上にメニューを持ってきたので、どこぞのiframeサイトみたいな感じに； →はてなブックマーク - nanomemo ソースをメモ。気に入ったのがあったらコピペして下さいませ ・ページのヘッダ <hatena name="usersearch"> <div id="ban"> <div class
in te redi: はてなブックマークをカスタマイズ
posted by nano on June 10, 2005 06:51 tohatenatips はてなブックマーク日記 - デザイン編集機能の追加について(はてな) はてなブックマークににデザイン編集機能が追加されました。はてなブックマーク導入時に要望したトップページにリンクを貼る機能もこれで実現できます。 デザインガイド(はてなブックマーク) はてなブックマークの構造(?d:kamioka) とりあえず、上のエントリを参考にこのブログのメニューをのせてみたのですが、はてなのバナーより上にメニューを持ってきたので、どこぞのiframeサイトみたいな感じに； →はてなブックマーク - nanomemo ソースをメモ。気に入ったのがあったらコピペして下さいませ ・ページのヘッダ <hatena name="usersearch"> <div id="ban"> <div class
Delphiメモ
これは私がプログラム開発時に参考になったソースや、 思いついた関数など書き溜めた物です。 Delphi使いの方に参考になればと思い載せました。 全選択でテキストにコピペして保存すると、 アウトラインプロセッサで使用できる階層化テキストになります。 （もはや私はコレ無しでは開発できません・・・） .◆Delphi全般 ..基礎 ＞ユニット解説 Delphiの「ファイル」から「ユニットを使う」を選べば、 unit1の「implementation」にunit2が追加される。 ユニットは大きく2つの部分に分かれます。 Unit ClassUnit; //クラス名 interface //宣言部 他のユニットからでも参照できる。 uses Dialogs; //参照するユニットを指定 type TClass = class MyRecode, MyRecode2 : Integer; pr
結局どれをつかえばいいの？floatの解除方法を3つ比較してみる これからWEBデザイナーを目指す高校生のブログ
ボックスやリストを横並びにしたい時に使うfloatプロパティ。便利な反面、「親ボックスからはみ出る」「親ボックスの背景画像が表示されなくなる」「親ボックスのマージンがなくなる」などの問題が起きてしまうことがあります。 そういった場合はfloatを解除してあげれば良いのですが、解除にはいろんな方法が存在します。そのなかで「clear:both」「clearfix」「overflow」の三つの解除方法について、それぞれの長所や短所をまとめました。 floatにはいくつかの解除方法があります そもそも、なぜfloatの解除にいくつも方法があるのでしょうか。 それはそれぞれのプロパティがそれぞれ違う方法でfloatを解除しようとしているからです。 子要素を親要素の高さを指定しない状態で、floatを解除せずに使用すると親要素はfloatした子要素を認識することができません。 そして親要素の中には何
float(フロート)を使った場合、親要素が領域をなくして潰れてしまいます。それを回避するためにはfloatを指定した要素の後にclear:bothをかける必要があります。 しかしデザイン上、そううまくかけれるとは限りません。そこで頼りになるのがclearfixと言われるハック方法です。 clearfix以外でフロート解除をする方法はこちら clearfix(クリアフィックス)の記述 clearfixはCSSに記述して、クラス名に指定して適応させます。 clearfix(クリアフィックス)の記述 .clearfix:after{ content: "."; display: block; height: 0; font-size:0; clear: both; visibility:hidden; } .clearfix{ display: inline-block; } /* Hides
どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。 STINGER8のカスタマイズは一通り行ってきましたが、ブログ内のコンテンツやアクセス数も徐々に多くなってきたので、そろそろブログの「顔」を変更することにしました。 私のブログではヘッダー部分に、ロゴ画像とメニューバーというシンプルなデザインで運営してきましたが、もう少し「見栄え良く」かつ「便利性を高く」という部分に着目してみます。 そこでよく利用されているのが追尾式のメニューや、横幅一杯に表示されて個性溢れるインパクト大なヘッダー画像です。 特に追尾式のメニューは追尾自体は簡単ですが、キレイに表示するのが難しかったので断念していたんですが、今回本気で乗り出すことにしました。 という訳でSTINGER8のメニュー追尾と画像表示が上手くできたので、スマホ表示の最適化も含めてご紹介していきます。 ヘッダーの
レスポンシブデザインに対応した縦メニューを作ってみました。できるだけ詳しく解説してみますので、これを参考にサイトに合わせて自由にカスタマイズしてもらえたらうれしいです。 まずは実際に見てください。ブラウザを伸縮させながら見ていただければと思います。レスポンシブウェブデザインの確認にはブックマークレットのViewport Resizerも便利です。 では解説していきます。 HTML <div id="navigation"> <div id="toggle"><a href="#">menu</a></div> <div id="menu"> <h3>Tittle1</h3> <ul> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>タイトル | サイト名</title> <meta name="description" content="ディスクリプション" /> <meta property="og:type" content="website" /> <meta property="og:title" content="タイトル" /> <meta property="og:image" content="/img/icon.png" /> <meta property="og:url" content="http://example.net/" /> <me
はてなブログでCSSのみを用いてフラットデザインのおしゃれなスマホ用シェアボタンをつくってみた - 技術を磨くだいぱんまん
2017/9/22更新 はてなブログのシェアボタンカスタマイズ第3弾は以下の記事から。とにかく動作を軽くしたい方は是非お試しあれ。 はてなブログでめっちゃ動作の軽いシェアボタン作った！ - 技術を磨くだいぱんまん はてなブログのシェアボタンカスタマイズ第2弾は以下の記事から。1弾よりこっちのほうが圧倒的におすすめです。 おしゃれなシェアボタンをCSS＆Webフォントで作ってみた【はてなブログのPC＆スマホ用】 - 技術を磨くだいぱんまん このシェアボタンのいいところは3つ。 CSSのみ（javascriptなし）で作ったので、動作が軽い 色合いが綺麗 一列でシェアボタンを表現できる（横幅320pxベース） コードを載せておきますので、ご自由にお使いください。*1ただ、本当に手作り感満載のコードですので、そこはご愛嬌ということで。 ちみなに、今回のカスタマイズは、はてなブログPro会員でない
WordPressでダブルレクタングル広告を設置する方法
１、WordPressの〔外観〕→〔テーマの編集〕からPHP編集画面に入る ２、記述するPHPファイルを見つけ出す 全ての固定ページに書き込みたい場合は〔page.php〕 全ての投稿ページに書き込みたい場合は〔single.php〕 全ての固定・投稿ページに書き込みたい場合は〔page.php〕〔single.php〕 ３、広告を表示したいエリアを見つけ出だし、下記コードを記述する。 PHPファイルに記述するコードは以下のコードだ。 ※PHPファイル編集時は最善の注意を払って作業しよう！ 万が一に備えてバックアップを取っておくと安心できる。 <!--*************************************************************** アドセンスダブルレクタングル広告 ****************************************
“「Domo arigato, Bernanke-san」とクルーグマン教授が皮肉っている件＝Tim Duyの指摘”と題された本石町日記さんの直近のエントリを読んで、意外に思われた方も多いのではないだろうか？ 常日頃リフレ派的な言説を吐くTim Duyを取り上げて、「まあ、フェアな見方ではないかと思う」「私はTim Duy派ですが…」という評価を下しているからである。 その一方で、本石町日記さんは、最近のツイートで、リフレ派と一線を画し、現行のFRB（や日銀）の政策を支持するかねてからの姿勢を改めて明確にしている（例：ここ）。 反面、今回のエントリで取り上げられたTim Duyは、これまでFRB（や日銀）に対し、たとえば以下のような厳しい言説を吐いてきている。 ●2009/11/20エントリ「追い詰められたFRB（The Fed in a Corner）」より The Fed has ma
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの【float】についてちょっと本気出して説明してみた。 | たねっぱ！
clearfixで指定するfloatの解除｜上級CSSレイアウト講座
xhtmlを中心にモバイルサイト構築ノウハウまとめ - 適当な日々
【CSS 】clearfixを使ってfloatを解除する | バシャログ。
XHTML+CSSでの携帯サイト構築～3キャリア対応の落とし穴～/Mobile - サイブリッジラボ
App Storeの審査基準 - iPhone アプリケーション開発 まとめ Wiki
WordPress：ビジュアルエディタをカスタマイズする際の備忘録 - NxWorld
WordPressの記事一覧にアイキャッチを表示させてみた（＋αで個別記事にも） – PresentNote
レスポンシブHTMLメールを作成する際の覚書 ｜ Tips Note by TAM
「これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん」まとめ - Qiita
表示件数と高さが変わるブロックの一覧を、画面サイズに合わせてカラム数を変えて表示する方法
IEで position:absolute した要素が消えるバグ - ぴのBlog
CSS脱初心者への道！疑似クラスと疑似要素を理解すると表現が広がるよ！ * prasm（プラズム）
CSS Nite公式ブログ:アンケート集計：CSSに取り組む際に最初につまずいたところはどこですか?
rakeのタスク一覧 - [Ruby on Rails/Ruby] ぺんたん info
2013年のリセットCSS。HTML5とCSS3対応！ | ホームページ制作｜大阪・東京
2行で終わるclearfix | kzms2 – html,css,javascript
英韓の明暗はどこで分かれたのか？ - himaginary’s diary
【Wordpress】今更ですが、フラットな感じのカウント付ソーシャルボタンを設置しました | ハヤクユケ
clearfix(クリアフィックス)の使い方｜CSS | オレのWEBPAD
STINGER8のヘッダー大改造！メニュー追尾や画像をキレイに表示する技｜きにぶろぐ.com
普通の縦メニューをレスポンシブデザインに対応させてみる｜Webpark
【HTML】初期開発コーディングテンプレートと CSS コーディング規約
クルーグマンの皮肉とDuyの反語 - himaginary’s diary