8の倍数でWebデザインしてみてわかったメリット・デメリット | Maromaro Blog
Webデザイナーのみなさんこんにちは。Maromaroの私です。 Webサイトをデザインする際、余白やブロックの値に5の倍数を使用するのが一般的です。 私も基本的に5の倍数でデザインをしていましたが、何年か前にこちらの記事を読みました。 デザインは8の倍数でできている http://ameblo.jp/ca-1pixel/entry-11837685575.html この記事の内容は、サイトデザインの際に8の倍数を基準にすると良いよ、ということが書かれています。 要点としては以下のようなものです ・ 様々なディスプレイが8の倍数でできている ・ iPhoneのUIも8の倍数でできている ・ 8の倍数を基準にしたデザインのガイドラインがあれば、それに従ったデザインは合理的でかつ美しくなる ・ また、優れた造形に共通する数値である黄金比も導入する ・ ガイドラインがあることで、サイト幅、余白、
CSSフレックスボックス(display:flex)の使い方 [無料ホームページ作成クラウドサービス まめわざ]
HTMLのレイアウト方法で最も新しいフレキシブルボックスをまめわざでも利用しています。 手軽に並列レイアウトができるスタイルですが、他の並列レイアウトとの使い分けはどうすべきか、flexにしかできない表現はあるのかを、実例を挙げながら解説します。
![CSSフレックスボックス(display:flex)の使い方 [無料ホームページ作成クラウドサービス まめわざ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/6fd81d279134a62bc4badc391345ceb7051e7ee5/height=288;version=1;width=512/https%3A%2F%2Fmamewaza.com%2Fimg%2F1466995529664s.jpg)
Flexboxを使うなら知っておきたい「flexアイテム」の幅の計算方法
Flexboxを使っていて「なんでこの幅になるんだろう？」と疑問に思ったことはありませんか？ 僕はFlexboxを使い始めたころ「flexアイテム」の幅がどうやって計算されるのかわからなくて、レイアウトにはまってしまいました。調べて整理したのでシェアします。 仕組みをしっかり理解しておくと、問題が起こったときに対処しやすくなります。ということで、flexアイテムの幅の計算方法、行ってみましょ〜！ まずは結論から — flexアイテムの幅の計算方法 結論からざっくり言ってしまいます。 display: flexを指定した親要素を「flexコンテナ」、その中にある子要素を「flexアイテム」と呼びます。 上図のようにスペースが余っている場合、この「flexアイテム」にはflex-growの指定にしたがって余ったスペースが分配される仕組みになっています。 下図のようにflex-grow（またはf
3つだけ覚える「flexbox」の使い方 - Qiita
3行で説明、flexboxとは CSS3から導入されたfloatに変わる新しいレイアウト方法です。 伸びたり並んだりします。 俺、flexboxのプロパティ何回ググるんだろう問題 flexboxのプロパティめっちゃ多いですね。正直覚えきれませんし、覚えるつもりもなくなってきます。それに、別に複雑なことをやりたいわけではないですね。 具体的には、下記のようなことができれば十分なんです。 リキッド2カラムレイアウト スティッキーフッタ（最下部に吸い付くフッタ） この程度のものであれば、覚えるべきflexbox関連のCSSプロパティの数も絞れそうです。 覚えておくべき３つのプロパティ display: flex flex: 1 flex-direction: column これだけでわりとこなせます。以下で、実例をもとに説明します。 2カラムレイアウト さて、よくある2カラムレイアウトです。 で
背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ
CSS3 が主要ブラウザに対応したことから、これまではむずかしかったアイデアやコンセプトも、手軽にスタイリングできるようになってきています。今回は、背景デザインにスパイスを加えるエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめています。 コピペで利用できる手軽なものから、これってどう表現するんだろうという面白スタリングまで、注目をあつめるテクニックを中心に揃えています。デザイン制作に悩んだときに活用してみてはいかがでしょう。 詳細は以下から。 背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ ※ デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 ※ ページの読み込みに多少時間がかかります、すこし待ってからスクロールするとスムーズに表示されます。 Pure CSS Cinema Effe
[CSS]レイアウトでテキストは幅一定で、画像だけ幅いっぱいに表示させるスタイルシートのテクニック
テキストはスマホでは両横にマージンを保持しつつ幅いっぱいに、デスクトップでは指定した幅で表示し、常に画像だけ幅いっぱいに表示させるレイアウトを実装するスタイルシートのテクニックを紹介します。 floatやflexboxだと難しいレイアウトですが、CSS Grid Layoutを使うと非常に簡単に実装できます。 Breaking Out With CSS Grid Layout by Tyler Sticka CSSのレイアウトでありがちなバグ・仕様？ 実装のゴール CSS Grid Layoutを使った実装 新しいテクニックの使い方 実装の注意点 CSSのレイアウトでありがちなバグ・仕様？ 固定幅のコンテナ内からビューポートの幅いっぱいに配置するには、calc()を使うと簡単なコードで実現できます。 参考: Breaking Out With Viewport Units and Calc
![[CSS]レイアウトでテキストは幅一定で、画像だけ幅いっぱいに表示させるスタイルシートのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/95b9bf7cb5d8e0330f03fd5b859ade0fd7df26b3/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017051511-03.png)
CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
最近見かけるレイアウト・ナビゲーション・スライダー・フォームなどがどうやって実装されているのかのまとめ
Webページやスマホアプリで見かけるレイアウト、ナビゲーション、ボタン、スライダー、フォーム、タイムライン、ボタンなど、CSSを使って実装されたテクニックがまとめられたコンテンツを紹介します。 デザインのアイデアとして、またそれが実装可能かどうか、実装はどうやっているのか、何かあった時にチェックすると便利です。
マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法
Webページを制作にする時に、マージンやパディングをどのようにつけるか悩むことがあります。2カラムの隙間は、左パネルの右マージンorパディングなのか、右パネルの左マージンorパディングなのか。 Web制作の今までの考え方がきっと変わる、モジュール式のアトミック デザインにおけるHTMLとCSSの実装のロジックを紹介します。 Learning from Lego: A Step Forward in Modular Web Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様・元サイト様にライセンスを得て翻訳しています。 最近のWeb制作の手法は、数多くあるフレームワークやUIキットからあらゆる種類のコンテンツのブロックを組み立てています。しかしながら、モジュール性と汎用性はまだWeb要素レベルでは達成されていないと言えるでしょう。 LEGOブロックの考え方を
Rails で、Controller に定義されている action を一度に取得する方法はありますか？ - QA@IT
平素よりQA＠ITをご利用いただき、誠にありがとうございます。 QA＠ITは「質問や回答を『共有』し『編集』していくことでベストなQAを蓄積できる、ITエンジニアのための問題解決コミュニティー」として約7年間運営をしてきました。これまでサービスを続けることができたのは、QA＠ITのコンセプトに共感をいただき、適切な質問や回答をお寄せいただいた皆さまのご支援があったからこそと考えております。重ねて御礼申し上げます。 しかしながら、エンジニアの情報入手方法の多様化やQAサービス市場の状況、＠ITの今後のメディア運営方針などを検討した結果、2020年2月28日（金）15:00をもちましてQA＠ITのサービスを終了することにしました。 これまでご利用をいただきました皆さまには残念なお知らせとなり、誠に心苦しく思っております。何とぞ、ご理解をいただけますと幸いです。 QA＠ITの7年間で皆さまの知識
phiary
Code デモのコードです. html <body> <div class='row'> <div class='item item1'>item1</div> <div class='item item2'>item2</div> <div class='item item3'>item3</div> <div class='item item4'>item4</div> <div class='item item5'>item5</div> </div> </body> css body { margin: 0px; } .row::before, .row::after { clear: both; content: ''; display: block; } .item { float: left; width: 50vw; height: 100vh; text-align: c
Font-Awesomeでアクセシビリティを確保しながらウェブフォントを活用する - Qiita
2016年4月12日にリリースされたFont Awesomeの最新バージョン4.6。アクセシビリティ的に難があると言われていたアイコンフォントの弱点を補うため、アクセシビリティを重要視したバージョンとなっているようです。 具体的には15個のアクセシビリティ関連のアイコンが追加され、ドキュメントにアクセシビリティの項目が追加。さらに、aria-hidden="true"がデフォルトになりました。 追加されたアクセシビリティ関連のアイコン アメリカン手話通訳（american-sign-language-interpreting / asl-interpreting） 補聴器（assistive-listening-systems） 音声解説（audio-description） 視覚障害者（blind） 点字（braille） 字幕（cc） 耳が聞こえない（deaf / deafness /
Bootstrap3 でinputとアイコンを並列させる方法 - kiddikn
Bootstrap3 でアイコン付きinput form を作る お問い合わせ画面やユーザ登録画面などで 書き込む欄とアイコンが並んだ図のようなフォームを作りたいことありませんか？ 僕はこれとdatepicker for bootstrapを併用してカレンダーを使ったデータ入力をしようとしています！ ここのデモで実装されているinput フォームとカレンダーアイコンをつくろうと真似してたんですが、 簡単には出来ませんでした。 理由は簡単で、Bootstrap3 に対応していなかったからだと思います。 そこでこのページを参考に、以下の様に変更しました！ <div class="form-group"> <div class="input-group date StartMonth col-lg-4 col-lg-offset-4"> <input name="StartMonth" size
動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
CSS3アニメーションでつくるインターフェイス表現 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
flexbox order の入れ子について
【応用】Flexboxレイアウトまとめ - Qiita
CSSで面倒なコード、HTML5の新要素やスニペット、FacebookのOGPやTwiterカードなどのコードを生成できるオンラインツール
CSS：ホバー時のアンダーラインアニメーションの実装サンプルとmixinを用いた実装方法 - NxWorld
[CSS]ビューポート幅（vw）に対してレスポンシブ対応の文字サイズを指定するテクニック -Responsive font size![[CSS]ビューポート幅（vw）に対してレスポンシブ対応の文字サイズを指定するテクニック -Responsive font size](https://cdn-ak-scissors.b.st-hatena.com/image/square/0e988256232f0d626498e49d6ce0a326ccb9d200/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201701%2F2017013101.png)
