タグ

レイアウトに関するyanbowのブックマーク (6)

  • ダイニングテーブル不要論。あえて置かないインテリア。

    いわゆるLDK空間のある住居を新築、リノベーションされる際に「ダイニングテーブル」をどうするか?キッチンやリビング家具とのデザインの調和についてや、置くと空間が狭くならないかな?と悩まれている方も多いのではないでしょうか? LDK空間 つまり リビング、ダイニング、キッチン空間ですので、ダイニングスペースには当然ダイニングテーブルが無ければダイニングスペースでないだろ!事をする場所がいるのでダイニングテーブルが必要!と置く事を前提でLDK空間のインテリアを考えられるのが一般的でしょう。 しかし、ここではあえてダイニングテーブルを置かない場合のメリット及び、ダイニングテーブルの代わりになるスタイルの提案・LDKインテリアプランニングについてお話します。 ▽キッチン関する記事も併せてご覧ください。 WAILEAオーダーキッチン~理想の住生活空間を求めて~ 【目次】 1:ダイニングテーブルを無

    ダイニングテーブル不要論。あえて置かないインテリア。
  • ドラッグ&ドロップでサイトを作れるようにするJS「VvvebJs」:phpspot開発日誌

    GitHub - givanz/VvvebJs: Drag and drop website builder javascript library. ドラッグ&ドロップでサイトを作れるようにするJS「VvvebJs」 jQuery+Bootstrap4で出来ていて、レスポンシブなサイトをみたまんま、作れて便利そうです。 Bootstrapの基コンポーネントも全部そろっており、HTMLコーディングの手間を省けます 関連エントリ JSで3Dレンダリングエンジン「LemonJS」 マガジン形式のグリッドレイアウトを実現する「stratum.js」

  • Flexbox入門 - 横並びを実現する定番のCSS - ICS MEDIA

    ボックス要素の横並びをCSSで行う場合、昔はfloatプロパティを使うのが主流でした。しかし、CSSの「Flexboxフレックスボックス」を使うとfloatよりも簡潔なコードで、ボックスの豊富なレイアウトが可能です。記事ではウェブページの作成を通してFlexboxの特徴と使い方について解説します。 この記事で学べること Flexboxの使い方 スマートフォンへのレスポンシブ対応 Flexboxはボックスレイアウト用のCSS Flexboxとは、ボックスのレイアウト方法を定めるCSSの機能です。ボックスとは、HTML上の各要素が生成する領域のことです。下図のHTMLコードのウェブページでは、div要素・h1要素・p要素がそれぞれボックスを生成します。 Flexboxでは、ボックスを横ならびにしたり、右寄せ・中央寄せ・左寄せをしたりと、さまざまなレイアウトを少量のコードで実現できます。 サン

    Flexbox入門 - 横並びを実現する定番のCSS - ICS MEDIA
  • これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例:phpspot開発日誌

    CSS: Elastic Videos これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例。 ブロックのサイズが変更された際において動画を固定サイズにしてしまうとレイアウトが崩れてしまいますが、公開されているサンプルを使うと、HTML5動画、embed/iframeの動画をレイアウトに合わせてCSSで自由に伸縮可能。 解像度の違う、iPhone等でも動作を確認しているそうで、どんな環境でも動画をページにフィットさせたい用途に有用です。 通常サイズ。ブロックいっぱいに広がる動画 幅をiPhoneなみに小さくしてみた例。動画も縮んでます。 IEでも動くみたいです。 これは覚えておいたほうがよさそうです。 関連エントリ フリーで新しめのXHTML/CSSで書かれたサイトテンプレート45 ぜんぶピュアCSSでやっちゃおうというJavaScriptの代替デモ56 Ajaxスタ

  • レイアウト作りを簡単にしてくれるCSSグリッドシステム

    CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね! Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。 1. CSSグリッドシステムとは? CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にし

  • シンプルでフリーな使えるCSSのレイアウト集715:phpspot開発日誌

    715 Awesomely Simple and Free CSS Layouts | Design Shack シンプルでフリーな使えるCSSのレイアウト集715が紹介されています。 1から作らないでもこうしたものに頼ればすぐに出来ますね。自分の好みの使いやすいページを覚えておくとレイアウト作成をすぐに終わらせ、肝心のツール部分に集中できそうです。 Primary CSS: 22 Layouts Little Boxes: 16 Layouts CSS Easy: 8 Layouts Max Design: 25 layouts Iron Meyers: 224 Layouts 関連エントリ 42個のフリーCSSレイアウト-サンプル集「Free Faux Column CSS Layouts」 22のレイアウトが収まったCSSフレームワーク「PrimaryCSS」 複雑なCSSレイアウト

  • 1