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は配列(リスト)と連想配列を型レベルで区... 続きを読む

CSSで実装したレイアウトの構造や階層を簡単に確認できる、私のお気に入りのCSSハック -My favorite CSS hack | コリス

2019/09/10 86 users コリス Grid Flexbox 階層 CSS

flexboxで実装したレイアウトはもちろん、floatでもgridでもCSSで実装したレイアウトの構造や階層を確認できるスタイルシートを紹介します。 ページ上の各要素のサイズ・マージン・パディングなどに不整合がないか簡単に確認でき、スニペットやブックマークレットに登録しておくと便利です。 My favorite CSS hack by Ga... 続きを読む

【CSSレイアウト】floatとflexboxはどっちが簡単か比較してみた。 │ ジャングルオーシャン

2019/04/02 53 users Flexbox ジャングルオーシャン CSS レイアウト 友人

【CSSレイアウト】floatとflexboxはどっちが簡単か比較してみた。 2019.04.02 プログラミング CSS, HTML, UI, レイアウト みなさん、こんにちわ！ ジャングルオーシャンのラファエロです！！ つい最近、Webデザイン初心者の友人からこんなことを言われました。 「CSSでレイアウトしたいんだけど、ネットで調べてみるとfl... 続きを読む

【CSS】Flexboxの使い方を徹底解説！基本から実践まで(サンプルあり) | creive【クリーブ】

2018/10/19 60 users display クリープ CSSプロパティ Flexbox

「Flexboxは、どんなことができるのか、いまいち分かっていない。」 「Flexboxって、横並び機能のfloatやdisplayとどう違うの?」 CSSの学習を始めた人の中には、こう思う人もいるでしょう。Flexboxは、従来、javascriptや他のCSSプロパティを駆使しながら実現していた複雑なレイアウト設計を簡単に実現します。今後、設... 続きを読む

新しくなった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... 続きを読む

x86/x64における小数から整数への丸め処理命令の変遷 - Cybozu Inside Out | サイボウズエンジニアのブログ

2017/08/14 73 users 小数 整数 サイボウズ サイボウズエンジニア Double

2017 - 08 - 15 x86/x64における小数から整数への丸め処理命令の変遷 C/C++ プログラミング 開発環境 こんにちは、サイボウズ・ラボの光成です。 今回は小数を整数に丸める処理に関して、x86/x64における命令がどのように変わってきたかを紹介します。 C++における小数から整数への変換ルール まずC++における浮動小数点数型（float, double）を整数型（int, i... 続きを読む

CSSリセットの新しい考え方、リセットと有用なコンポーネントだけのスタイルシート -Shoelace.css | コリス

2017/08/09 67 users コリス Flexbox コンポーネント グリッド リセット

レイアウトにfloatを使用していた頃はグリッドを構築するために、複雑なHTMLやテクニックが必要になることがありました。しかし、flexboxやCSS Gridの登場で、レスポンシブ対応の柔軟なグリッドを簡単に利用できるようになりました。 そんな時代に合わせて、グリッドは無し、有用なコンポーネントが簡単に利用できるリセット用のスタイルシートを紹介します。 Shoelace.css Shoelac... 続きを読む

[CSS]ワンランク上に！Webページのレイアウトを美調整するスタイルがまとめられたスタイルシート -fractures | コリス

2017/07/10 94 users コリス パディング Grid Flexbox 矩形

float, flexbox, gridのレイアウトでよく使うスタイル、マージンやパディングを調整するスタイル、矩形・角丸・円形を実装するスタイル、幅や高さを調整するスタイル、要素を配置するdisplayやpositio ...記事の続きを読む 続きを読む

これからのレイアウトは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]レイアウトでテキストは幅一定で、画像だけ幅いっぱいに表示させるスタイルシートのテクニック | コリス

2017/05/17 91 users コリス マージン CSS レイアウト テクニック

テキストはスマホでは両横にマージンを保持しつつ幅いっぱいに、デスクトップでは指定した幅で表示し、常に画像だけ幅いっぱいに表示させるレイアウトを実装するスタイルシートのテクニックを紹介します。 floatやflexboxだ ...記事の続きを読む 続きを読む

CSS Grid Layoutを使う前に知っておきたい、floatやflexboxなど既存の実装にどのような影響を与えるか | コリス

2017/03/29 58 users Flexbox コリス inline-block Grid

CSS Grid Layout は先日リリースされたChrome 57がサポートし、デスクトップ用のすべてのブラウザで利用できるようになりました。 floatやflexbox、vertical-alignやinline-blockなど、Webページでよく使用するレイアウトの実装に、CSS Grid Layoutがどのような影響を与えるかについて紹介します。 Grid “fallbacks” and... 続きを読む

Flexboxでレイアウトを作成する時に覚えておきたい、子要素がどのようにサイズ変更されるかアニメーションで解説 | コリス

2017/03/03 96 users Flexbox コリス Flex アニメーション レイアウト

普通にレイアウトするのであれば、FlexboxでもFloatでもそんなに変わりなく利用できます。Flexboxは、flex（収縮する）の名の通り、収縮してサイズ変更できることが大きな特徴です。 Flexboxを使ってレイアウトを作成する時に役立つ、Flexboxのプロパティがどのように収縮して機能するかアニメーションで分かりやすく解説します。 Even more about how Flexbox... 続きを読む

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. フロート要素の... 続きを読む

韓国で姦通罪廃止へ、コンドーム会社株が急騰 韓国の憲法裁判所が7対2で違憲判決、62年間の法律に終止符：JBpress(日本ビジネスプレス)

2015/02/27 71 users JBpress left;margin-right 祖先

2015年02月27日(金) <div style="float:left;margin-right:10px;""> [ アジア ] 韓国で姦通罪廃止へ、コンドーム会社株が急騰　韓国の憲法裁判所が7対2で違憲判決、62年間の法律に終止符 [アン・ヨンヒ] 2月18日～20日までの旧正月連休に土、日まで含めて今年は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を利用する必要が... 続きを読む

オーストラリアにも脅威を与えた中国海軍の遠洋パトロール 強化スピードは予想以上と米国が警告：JBpress(日本ビジネスプレス)

2014/02/19 86 users JBpress 有事 left;margin-right

2014年02月20日(木) <div style="float:left;margin-right:10px;""> [ 国防 ] オーストラリアにも脅威を与えた 中国海軍の遠洋パトロール　強化スピードは予想以上と米国が警告 [北村 淳] 中国海軍戦闘即応戦隊がパトロールしたのは、まさに日本の“迂回生命線”そのものであり、「南シナ海だけでなくロンボク海峡やマカッサル海峡といえども、有事の際には中... 続きを読む

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... 続きを読む