PHPからJavaScriptにデータを受け渡すときに考えること - Qiita

2023/01/01 123 users Qiita String Array JSON unicode

PHPのstringは任意のバイト列を扱えますが、JavaScript/JSONはUnicodeで扱える文字しか扱えません PHPのint / floatはプラットフォーム依存ですが、JavaScriptのnumberは整数と小数を型レベルで区別しません JSONのarrayに対応する型はPHPのarrayのうちリストであるものです PHPは配列(リスト)と連想配列を型レベルで区... 続きを読む

新しくなったBootstrap 4の基本テンプレート、ナビゲーション、コンポーネントのまとめ | コリス

2018/01/30 162 users コリス コンポーネント rem ナビゲーション Sass

2018年1月18日、Bootstrap 4の安定版がようやくリリースされました。 Bootstrap 4ではFlexboxが採用され、それに伴いFloatは取り除かれ、CSSのソースはLessからSassに変更され、CSSの主要な単位はpxからremに変わり、デフォルトのフォントサイズは大きくなり、サポートブラウザからIE8,9は外れました。 ※pxはメディアクエリとグリッドのみ。 新しくなった... 続きを読む

5分で完璧に分かる！CSS Gridの基本的な使い方を解説 | コリス

2017/12/19 206 users コリス Flexbox CSS Grid レイアウト 実装

CSS Gridは、今まで使用してきたレイアウトの実装とは大きく異なります。flexboxはアイテムを一つの軸に沿って並べるので、floatの延長としてあまり難しくはないと思います。しかし、CSS Gridは軸が一つではなく、縦と横の二つの軸でレイアウトします。 CSS Gridの基本的な使い方を分かりやすく解説します。 Learn CSS Grid in 5 Minutes by Per Har... 続きを読む

x + 0.25 - 0.25 = xが成り立たないxとは何か｜Rui Ueyama｜note

2017/11/29 453 users スタンフォード Note 浮動小数点数 両辺 授業

スタンフォードのコンピュータサイエンスの授業で、ときどきこれは良問と思う問題がテストで出ることがある。僕の印象に残っているのは「xをfloatとするとき、x + 0.25 - 0.25 = xが成り立たないxを求めよ」というものだ。浮動小数点数を理解していないと、両辺が同じにならないケースがあるほうが不自然に思えるだろうから、この問題は浮動小数点数の奇妙さを結構うまく突いていると思う。この問題を元... 続きを読む

[CSS]Webページのこれからのレイアウトテクニック！FlexboxとCSS Gridは一緒に使用してこそ価値がある | コリス

2017/11/16 327 users Flexbox コリス CSS 主流 CSS Grid

Webページのレイアウト、一昔前まではfloat、最近のプロジェクトではFlexboxが主流だと思います。CSS Gridはどうでしょうか？ CSS Gridは主要なすべてのブラウザにサポートされ、採用を検討している、また既に導入している人も少なくないでしょう。 注意しておきたいのが、CSS GridがあればFlexboxはいらないという考え方です。 これからのレイアウトは、FlexboxとCSS... 続きを読む

これからのレイアウトはGrid Layoutで決まり？特徴で使い分けたいCSSレイアウト手法 - ICS MEDIA

2017/07/10 178 users Grid Layout ICS MEDIA レイアウト 特徴

新しいCSSのGrid Layoutはウェブページのレイアウトに役立ちます。従来FloatやFlexboxでつくっていたようなレイアウトは、Grid Layoutで置き換えられるものもあるでしょう。しかし、 すべてをGrid Layoutで置き換えるのが良いとはいえません 。Float、Flexbox、Grid Layoutには、それぞれ特徴があるためです。 特徴を生かし使い分けていくことで、より... 続きを読む

CSSレイアウトにfloatはもう古い！ Webデザイナー初心者でも始められるFlexbox入門 - ICS MEDIA

2016/08/22 945 users Flexbox ICS MEDIA CSSレイアウト CSS

ICS MEDIA Web制作 2016/08/22 CSSレイアウトにfloatはもう古い！ Webデザイナー初心者でも始められるFlexbox入門 « Prev ボックス要素の横並びをCSSで行う場合、これまでは float プロパティを使うのが主流でした。しかし、 CSS3の新機能「Flexbox」を使うと float よりも簡潔なコードで、ボックスの豊富なレイアウトが可能です 。本記事では... 続きを読む

CSSのfloatに困った時に見直したい6つのポイント、floatがどのように機能しているか分かりやすく解説 | コリス

2015/08/28 288 users コリス チュートリアル CSS 順番 配置

floatを使うと思った通りにならず、下に落ちてしまう、幅に収まらないなど、CSS初心者がつまづきやすい問題を解決するポイントを解説したチュートリアルを紹介します。 How Floating Works floatのルール 1. フロート要素を親要素から見るとどうなるか 2. 左や右にフロートさせる 3. フロート要素が押し下げられてしまう原因 4. フロート要素の配置の順番 5. フロート要素の... 続きを読む

シリアとヨルダン、「イスラム」フィルターを外すと見えてくるもの 人口と食料生産で読み解く国家の姿：JBpress(日本ビジネスプレス)

2015/02/08 179 users JBpress left;margin-right 博之

2015年02月09日(月) <div style="float:left;margin-right:10px;""> [ 中東・アフリカ ] シリアとヨルダン、 「イスラム」フィルターを外すと見えてくるもの 　人口と食料生産で読み解く国家の姿 [川島 博之] テレビや新聞で中東に関して各種の情報が伝えられているが、ここではもう少し根本から中東で起きていることを考えてみるために、シリアとヨルダンの... 続きを読む

保存版！CSS3で出来る素敵なデザインやアニメーションをまとめてみた

2015/02/04 523 users アニメーション CSS3 table-cell 保存版 横幅

この擬似クラスを使うことにより3番目のli要素にわざわざ別のクラスを付けなくても独自のスタイルを適応することができるので、運用性の向上が図れます。 ▼記事リンク Useful :nth-child Recipes | CSS-Tricks 要素を均等に横並び CSS3の「display:table-cell」は要素を均等に横並びにすることができます。「float」でも要素を横並びに出来ますが、横幅... 続きを読む

[css] floatを使わないで要素を横に並べる方法を使ったデザイン例 - NAVER まとめ

2014/10/25 335 users CSS inline-block NAVER display

ul,olのリストを横並びにするとき、floatを使う人も多いと思いますが、僕はdisplay: inline-block;を使って横並びにする方法が好きで良く使ってます。この方法は手軽で便利ですが意図しない隙間が生まれるというデメリットがあるので、その解決法も一緒にご紹介します。 続きを読む

CSSで2カラムを作ってみる｜Web Design KOJIKA17

2014/07/03 362 users CSS 2カラム Web Design KOJIKA17

CSSで2カラムといっても、その作成方法は様々です。 多くのパターンを理解することは、CSSに柔軟性を持たせることに、つながります。 1. floatを利用する 基本的な方法です。 子にfloatを利用すると、灰色の背景を敷いている親の高さが算出できなくなるため、背景色が出なくなったり、レイアウトが崩れたりします。 これらの問題を解決するには、clearfix か overflowを利用する必要が... 続きを読む

floatを解除する手法のclearfix と 次世代のレイアウトの話｜Web Design KOJIKA17

2013/06/20 898 users clearfix floatプロパティ CSS レイアウト

2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行うには、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが... 続きを読む

CSS で float した要素の高さが 0 になる問題の解決法 ( clearfix ) | monopocket.jp

2013/05/30 153 users clearfix clear CSS バック レイアウト

Web サイトのレイアウトをする際に CSS で float する場面は頻繁にあると思うが、このときに面倒なのが、float した要素の高さが 0 になってしまうということである。 この問題を解決するための方法として、clearfixというハックがある。 これは、高さを指定したい要素の後に無理矢理コンテンツを突っ込んで、そのコンテンツを非表示にする事で高さ指定させる方法である。 以下に clear... 続きを読む

floatを解除する方法のまとめ: 小粋空間

2013/03/27 678 users 小粋空間 After CSS 擬似要素 まとめ

CSSのfloatを解除（クリア）する方法をまとめてみました。 以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが、その後色々なテクニックがあることに気がつきました。 CSS の after 擬似要素で回り込みを解除する ということで、そもそものfloatの問題（というか仕様）と、その対処方法についてネットで調べた情報を一通りまとめました。 １．floatにより親要素の高... 続きを読む

リストの横並び時に生まれる<li>の隙間を解決する5つの方法

2012/05/12 108 users センタリング 隙間 ナビゲーション 現象 リスト

ナビゲーションやリストを水平に並べると、なぜか少し隙間が生まれてしまうことがあります。今回はこの現象の解決方法をいくつか紹介したいと思います。 結構簡単な方法なので、知っている人も多いと思いますが、もし知らない人がいれば、ちょっとは役に立つかと思います。基本的にはfloatで解決すれば良いと思いますが、floatを使うと都合が悪くなる場合などもあると思うので(width指定とか、センタリングとか)... 続きを読む

[CSS]ナビゲーションやリストなど、inline-block要素の間にできる隙間を解決する方法 | コリス

2012/04/23 118 users コリス NAV Three CSS TWO

ナビゲーションを実装する時など、ul要素を使って水平に並べると意図しない隙間ができてしまうのを解決する方法を紹介します。 デモ 解決方法 floatでいいんじゃないの デモ まずは、元となるコードから。 HTML nav要素を使い、a要素で各アイテムを実装します。 <nav> <a href="#">One</a> <a href="#">Two</a> <a href="#">Three</a>... 続きを読む

float解除の決定版。clearfixを考えたら、進化した。 : Web Design KOJIKA17

2011/04/05 953 users clearfix clear CSS 理論 ソース

現在floatを解除する方法として、"clearfix"がよく使用されていると思います。 しかしclearfixが初めて公開されたのが、2004年5月8日。 それ以来、7年間ほとんど形を変えずにclearfixが使用されてきました。 ブラウザもCSS3を多く対応してきている中で、「それで良いのか？」という疑問を新しい形を模索してみました。CSSの理論とかよくわからんので、ソースだけ見る。clear... 続きを読む

[CSS]overflowを使ってfloatの問題を解決するスタイルシートのテクニック | コリス

2011/03/10 712 users overflow Demo コリス フロート ラッパー

下記は各ポイントを意訳してものです。はじめにDemo 1: overflow:auto;Demo 2: overflow:hidden;overflowを使って生じる問題点と解決方法はじめにフロートベースのレイアウトをする際、ラッパーとなるコンテナがフロートしている子要素に対して高さを拡張しないことは、普通によくある問題です。デモ：１ フロートをクリアする要素を配置して解消した例しかし、この問題を... 続きを読む

[CSS]画像を使用せずに、背景をストライプやチェック柄にするスタイルシート | コリス

2010/12/26 313 users コリス Stripes ストライプ CSS height

対応ブラウザはFirefox 3.6+, Chrome, Safariです。 デモページでは画像を使用せずに、ストライプなど計6種類の背景パターンが紹介されています。 スタイルシートは下記のようになります。 CSS：ストライプ 全てのベースとなる指定です。 L.8-10で、ストライプのサイズを指定します。 .stripes { height: 250px; width: 375px; float:... 続きを読む

たった一行でclearfixを使わずにfloatを解除するテクニック : HTMLコーディングのノウハウ ： HTML/XHTML、CSSコーディング最安保障～クロノドライブ～

2010/11/30 174 users clearfix XHTML overflow Hidden

.sampleBox { overflow: hidden ; } .boxLeft { float: left; width: 150px; } .boxRight { float: right; width: 150px; } サンプルページ ポイントとしては、floatする要素をdivで囲み、そのdivにoverflow: hiddenを適用させることです。たったこれだけで、floatによる... 続きを読む

[CSS]floatを解除する「clearfix」のIE6/7に対応した改良版 | コリス

2009/12/09 384 users clearfix コリス visibility CSS 改良版

floatを解除する際にclearを使用せずに解除する「clearfix」の改良版をPerishable Pressから紹介します。 The New Clearfix Method いわゆる旧タイプのclearfixはMac IEも対応ブラウザに含まれているため、スタイルシートは下記のようになります。 旧タイプのclearfix .clearfix:after { visibility: hidd... 続きを読む

ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い:phpspot開発日誌

2009/12/09 629 users jQuery Masonry phpspot開発日誌

ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以... 続きを読む

CSS 3における新しいレイアウト手法：ボックスレイアウト - builder by ZDNet Japan

2008/11/13 209 users builder by ZDNet Japan CSS 3

今回は、floatプロパティとボックスレイアウトを利用した段組みを比較していく。また、CSS 3で段組みのレイアウトを実現する「Multi Column」との違いも確認する。 ウェブページのレイアウトでは、ヘッダーやサイドバー、コンテンツなどをどのように配置するかがポイントとなる。現在、配置のコントロールにはfloatやpositionプロパティを利用するのが一般的だが、CSS 3の「Advanc... 続きを読む

clearfixを使わないでやるには。｜CSS HappyLife

2008/11/09 295 users clearfix CSS CSS HappyLife うち

2008年11月11日お昼頃 overflow部分を一部加筆しました。 ウチのとあるページのコメント数が28になって、何となく嬉しい今日この頃。 さて、今回はこんなタイトルですけど、こんなエントリーをしようと思ったのは、floatを指定した要素の親要素の高さが算出されない時の解決手段として、clearfixでぐぐれみたいなのをよく見かけたり、あまりにもclearfixが有名だから、最近CSS覚えた... 続きを読む