新しいCSSプロパティ「display: grid」とは？Flexible Boxはもう古い！？ | | リーテラトバリタブログ
リーテラトバリタブログ Webの技術（プログラミングなど）について、自身が触れたものや問題が生じて解決したこと、理解したことなどを書いています。よく他の方が書かれている技術系ブログに助けられているので、自分も誰かの一助となれればと。ただ、基本へっぽこです。ご容赦ください。そしてたまにWebとは一切関係のない趣味の話とかも書くかもです。。 グリッドレイアウトのための新しいCSSプロパティがあるんだって 「display: grid」なる存在を知る グリッドレイアウトを表現するCSSとして、新たに「display: grid」というプロパティが登場するということを知った私です。 調べてみると、現在リリースされている最新版ブラウザにはどれもまだ実装されていません。次のメジャーアップデートから投入されるようです。（2017年2月現在） Can I use…: CSS Grid Layout そのた
[CSS]レスポンシブ対応のMasonryレイアウトをスクリプト無し、ピュアCSSで簡単に実装できる -driveway | コリス
去年くらいまでは、こういったレスポンシブ対応のMasonryレイアウトはJavaScriptで実装するのが主流でした。jQueryのプラグインも数多くリリースされています。 そんなレスポンシブ対応のMasonryレイアウトをスクリプト無し、CSSで簡単に実装できるdrivewayを紹介します。CSSアニメーションを使ったインタラクションにも注目です！ 実装が簡単 インタラクティブ レスポンシブ対応 カスタマイズが簡単 拡張性も豊か 実装にはFlexboxが使用されており、2016年1月12日にIEの古いバージョンのサポートが終了し、実質IE11+となった現在、多くのプロジェクトで利用できるでしょう。 ちなみに、2017年4月11日にVistaのサポートも終了します。 参考: Windows 製品のサポート ライフサイクル について drivewayのデモ デモではdrivewayで実装され
![[CSS]レスポンシブ対応のMasonryレイアウトをスクリプト無し、ピュアCSSで簡単に実装できる -driveway | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/a99bb8a10dc67f32f5120a14ca9f4d9546de9b36/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016042601.png)
Masonry系の最強スクリプト、レスポンシブ対応のレイアウトが簡単に実装できる -Muuri
カードやパネルをレンガ状に配置し、ドラッグして配置をアニメーションで変更、ソートやフィルタリング機能も可能なグリッドレイアウトが簡単に実装できるスクリプトを紹介します。 マウスで操作しても、タッチデバイスで操作しても、非常に快適です。 Muuri Muuri -GitHub Muuriのデモ Muuriの使い方 Muuriのデモ デモはモダンブラウザ、IE9+でご覧ください。スマホやタブレットでも動作します。 ※スマホだと各パネルが大きいので、操作しにくいかも。
CSSでフルスクリーン(全画面) ＋ 縦横中央配置レイアウトを作る【3ステップ + おまけ】
シングルページのWebサイトを作るとき、要素をフルスクリーンで表示させるレイアウトを取り入れることもあるかと思います。フルスクリーンレイアウトを実装する際に、ウィンドウの幅や高さをJavaScriptを使って取得したりしていましたが、CSSを使うとそんなことをする必要もなく、いとも簡単に実装できることが最近わかったので紹介します。ついでにフルスクリーンレイアウト時に使いたい「縦横中央配置」、「背景画像のフルスクリーン表示」の実装方法についても紹介します。 フルスクリーンレイアウトのデモ http://codepen.io/maechabin/full/MmOGWb/HTMLの用意ベースとなるHTMLは以下の通りとします。「2つのp要素を含んだ、3つのdiv要素」を用意します。それぞれのdiv要素をフルスクリーンサイズにして縦横中央配置にするのが目的となります。 <div class="bo
[JS]異なる高さを単に揃えるだけでなく、グルーピングや列に応じて揃えることも可能な便利スクリプト -matchHeight
デモページ：幅1,200pxで表示 これは、ボーダー無しの状態。 jquery.matchHeight.jsの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとしてhead内に記述します。 <head> ... <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.matchHeight.js"></script> </head> Step 2: HTML 適用するパネル全てに同じclassを付与します。 各パネルが横一列に配置された場合は、全て同じ高さに。複数の列に配置された場合は各列で一番高いも
フレックスボックスの基本概念 - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
Flexboxを使いこなして柔軟過ぎるCSSレイアウトを実現しよう。
毎朝アクセス解析を見ていると、IE8 以前のバージョンからの流入が激減しており、喜びを隠せない日々を過ごしています。 実際、クライアント先の学習塾の 4 月から 7 月の IE だけの平均を見ると、IE9 が 10%、IE11 が 75%、残りが IE7、8、10 という割合です。そして、IEでの流入数が減った分、モバイルからの流入が増え続けており、モバイル率が 7 割近くまで上がりました。 古いブラウザの割合が減ることは、Web制作者にとっては嬉しいことで、対応する時間が大幅に減ります。そして、対応ブラウザのバージョンが上がると、Flexbox だって使えるようになります。(←前置き長い) FlexboxがCSSレイアウトを楽にするこのサイトは、IE9 以下からの流入が 3% 未満なので、完全に無視して CSS レイアウトは Flexbox を使っています。Flexbox は CSS3
Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする
実は、bootstrapの知識だけでは足りません（涙） 本気でweb制作を仕事にしたいなら、現場で通用する実践的なスキルを「短期集中」で身につけましょう。 【独学 vs スクール】メリットとデメリットを比べて、おすすめの学習方法もお伝えします。 続きはこちら Bootstrap、使ってますか？ 便利ですよね。その便利さを物語るように、本当にいろいろなサイトで利用されてます。 ネットで配布されてるWordPressのテーマやHTMLテンプレートのベースに使われていることも多いです。気づいてないうちに使ってしまっているひとも、たくさんいることでしょう。 今回は、便利なのだけど、使いこなすには少し理解が難しい「bootstrapのグリッドシステム」について解説します。bootstrapでレスポンシブデザインを作るとき、欠かせないテクニックです。 グリッドシステムは、頭で理解しようとせず、目で見て
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
座標をオフセット指定で操作できるCGRectOffset - hachinoBlog
経緯 下記のように赤いViewのスグ隣に青いViewを配置したいとする。 今まではCGRectGet系メソッドを使って下記のようにやっていた。 //赤いViewの配置 UIView *redView = [[UIView alloc] initWithFrame:CGRectMake(60.0f, 150.0f, 100.0f, 100.0f)]; redView.backgroundColor = [UIColor redColor]; [self.view addSubview:redView]; //青いViewの配置 UIView *blueView = [[UIView alloc] initWithFrame:(CGRect){ CGPointZero, CGSizeMake(100.0f, 100.0f) }]; blueView.backgroundColor = [UIC
表示されるテキストによって高さを調整する - Toyship.org
iPhoneアプリで画面に複数行の文字を表示するにはUILabelかUITextViewを使います。 そのときに、表示するテキストの長さによってテキスト表示エリアの大きさを変えたいことがあります。 NSStringのメソッドを使う方法、NSAttributedStringのメソッドを使う方法、UITextViewのテキスト描画が終わったら微調整する方法、があります。 NSStringのsizeWithFont:constrainedToSize: を使う NSStringにsizeWithFont:constrainedToSize:というメソッドがあり、指定したフォントでテキスト描画をしたときのサイズを計算することができます。 UILabelとUITextViewで使うことができます。（UITextViewでは微調整する必要があります。） UILabelとUITextViewに適用したコ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【応用】Flexboxレイアウトまとめ - Qiita
これは簡単でいいね！コンテンツの区切りを斜め線にするテクニック（レスポンシブ対応） -Angled Edges
プロなら知っておきたい！Photoshop文字設定とCSSプロパティの相互関係 | それからデザイン スタッフブログ