CSS Gridを学ぶ人のために作成されたチートシートを紹介します。 CSS Gridの各プロパティと値でレイアウトがどのようになるか一目で確認できます。チートシートは高解像度版も無料でダウンロードでき、モニターの壁紙や印刷して机の脇に貼っておいても便利です。
レイアウトに関するsisicomのブックマーク (28)
-
sisicom 2023/08/16
-
効率アップ！マインドマップをビジネスに活用しよう丨EdrawMax
Chapter1：発想と創造性 ただアイデアをリストにするのではなく、マインドマップは、アイデアの関連性も示し、創造的な思考を促します。マインドマップは人間の脳の思考思惟と同じで、放射状のレイアウトで発想を表現するものです。一つの中心から、アイデアが次から次へ絶えることなくて流れてきます。ビジネス目標の策定、市場計画の立案、顧客サービスの改善など、ビジネスイベントのアイデアをブレーンストーミングし、洗い出す際に役立ちます。 >> 楽と思考整理しよう！マインドマップ思考法について << Chapter2：プレゼンテーション 仕事中、レポート発表、報告会、会議などのビジネスプレゼンテーションや発表シーンにおいて、ユニークで効果的な方法で情報を伝達するのは非常に重要です。マインドマップは、アイデアや計画をブレーンストーミングして明確に伝えるための優れたツールです。プレゼンテーションを作成する前に
-
CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説
CSS GridとFlexboxは、CSSで現在主流となるレイアウトのテクノロジーです。 CSS GridとFlexboxは表面的には似ているように感じるかもしれません。しかし、実際には異なるタスクに使用され、それぞれ異なるレイアウトの問題を解決します。 Flexboxが適してる場合、CSS Gridが適している場合、また両方を使用する場合、さまざまなレイアウトの問題を正しく解決する方法を紹介します。 Grid vs. Flexbox: Which should you choose? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ページ全体のレイアウト 隙間が必要なレイアウト 1次元と2次元のレイアウト ラッパー CSS Gridは将来、Flexboxを時代遅れにするでしょうか？ ページ全体のレイアウト CSS Gridはコ
-
CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する
2021年12月28日 CSS 大きさの異なる複数のボックスを隙間なく並べてタイル状に表示したい！そんな時もありますよね。モザイクレイアウト、Masonryレイアウト、Windows 8 Metroスタイルレイアウト…などなど、さまざまな呼び方のあるこのレイアウト。今回は display: grid という新しい配置方法を使ってレイアウトを組んでみますよ！もちろんレスポンシブにも対応させたいと思います！ ↑私が10年以上利用している会計ソフト！ CSSグリッドの基本の書き方は動画で確認！ 基本的な記述方法は動画でも紹介しています。初めてCSSグリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう！ 1. どんなレイアウトにするか書き出す グリッドレイアウトは少し複雑で、何も考えず組んでいくとどこの要素がどうなっているのか…こんがらがってきちゃいます。ご利用は計画的に！慣れるま
-
あなたはCSSプロパティ”display”をどのぐらい知っているだろうか？ | POSTD
CSSプロパティの1つである display は、CSSレイアウトに用いるプロパティの中でも極めて重要なものです。よく使われているのは、 block や inline 、 none あたりでしょう。 table や inline-block も、今ではかなり一般的になってきたと言えます。一方、 flex は新たに登場したものです。きっとユーザに気に入られるでしょう。これはレイアウト用に特別に作られたdisplayプロパティです。さらには、この先、 grid がまもなく私たちの秘密兵器となるでしょう（現在、盛んに取り組まれています）。これもまた、レイアウトに特化したプロパティです。 本記事は、当初予定していたよりもずっと長くなりました。ご希望に応じて、自由にサブセクションに飛んでお読みいただければと思います。もし、お時間を割いて全体を読んでいただけるのでしたら、大変嬉しく思います???? 目
-
【保存版】Macで親指シフトを導入すべき理由と設定、練習方法のまとめ
親指シフト。キーボードで日本語入力をするのに最適な入力方式と言われるている。作家やブロガーなど文章を生業にしている人たちに使用者が多いように思える。（初稿：2015年3月8日、更新：2020年8月19日。古くなった情報を更新。Lacailleの設定も追加。） このページでは親指シフトに関心のある人、これから導入しようと考えている人のために私が親指シフトにしようと決めて普通に打てるようになった過程で分かったことをまとめた。 私の場合、すでに親指シフトを使っている人の話を素直に聞いて、このページでも紹介しているテキストをもとに、3日でキーの配列は覚えることができた。 テキストに書いてあるとおり、1週間もしたら、このまま続けていたらいけそうな感覚が持てた。1ヶ月も経つとだいぶ慣れ、この記事を書いている今（初稿のとき）は、だいたい2ヶ月経過したところで、ローマ字入力のスピードまではまだいかないが、
-
紙面に近づけたい！HTML＋CSSで作る文字レイアウト12個 | PRESSMAN*Tech
印刷する紙のデザインと異なり、Webデザインは環境によって見た目が変わります。どの環境でも同じレイアウトで見せるには画像として書き出せば確実なのですが、テキストの部分はそうもいきません。 DTPデザイナーの方からも「こんな文字のレイアウトはWebだと無理？」といったご相談を受けることがよくあります。 今年に入って、HTML5＆CSS3に対応したブラウザのシェアもかなり増えてきましたので、今回は文字のレイアウトに関するHTMLとCSSをご紹介したいと思います。 目次：段組み縦組み（縦書き）行末揃え（両端揃え）先頭文字スタイル（ドロップキャップ）段落先頭1字下げ2行目から1字下げ（ぶら下げインデント）行頭禁則文字ふりがな（ルビ）圏点（傍点、脇点）大文字と小文字の変更スモールキャップス（スモールキャピタル）長体、平体（水平比率、垂直比率）※IE以外のブラウザは、2014年7月4日現在の最新版にて
-
文章の作り方 - 伝わるデザイン 研究発表のユニバーサルデザイン
研究者や研究に関わる大学生や大学院生は、一年を通じて研究室ゼミや学会などで研究成果の発表を行なわなければなりません。また、近年、科学者でない人たちに対する一般向けのプレゼンや講演（アウトリーチ活動）の機会も増えてきています。他にも、研究論文や報告書を書いたり、研究費調達のために予算申請書やプロジェクトの提案書を作成したりすることも、研究者にとって欠かせない仕事です。これらはいずれも情報を他者（研究仲間や審査員、一般市民）へ伝えようとする行為であり、正確かつ効果的な情報の発信が望まれます。しかし、自己流で資料を作成して、闇雲に情報を発信していても、スムーズに情報は伝わりません。ときには誤った情報が伝わってしまい、研究の価値を正当に評価してもらえないことさえ起こりえるのです。 情報を正確にかつスムーズに他者に伝えるためには、情報をデザインすること、つまり文章を読みやすく整えたり、図表を見やすく
-
-
ウェブ制作者がチェックしておきたいアイデア満載のUIを備えたウェブデザインのまとめ -2014年上半期
うまくトレンドを取り入れ、デザインの細部まで徹底的にこだわり、気持ちのいいインタラクションとアイデア満載のUIを備えた素晴らしいウェブサイトを紹介します。 画像の一部だけ動くシネマグラフを使ったコンテンツ、ペルソナを使ったユーザー中心のレイアウトなど、最新のトレンド情報もお見逃しなく！ VOTD.tv シンプルですっきりしたデザインだけでも素敵ですが、ロゴ、ナビゲーションやサムネイルやコンテンツなどの随所に仕掛けたインタラクションの芸が非常に細かく、楽しませてくれます。
-
『デザインは8の倍数でできている』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか？」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ（サイズ）を指します。 【第１部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p
-
-
ウェブサイトやブログによくあるリストデザインが流行のグリッドデザインよりも有効なわけ
「ウェブの未来を担う次のUIデザインは『カード』にあり」と言われるなど、ウェブサイトを格子状にレイアウトしたグリッドデザインは人気で、多くのアプリやウェブサイトで採用されていますが、実際にグリッドデザインと以前からあるリストデザインの2種類をテストしてみたところ、「リストデザインの方が明らかに見やすく、ユーザーの反応がいい」という結論が出ました。 List Beats Grid: Linear Feeds Perform Two to Three Times Better Than Grids http://blog.getprismatic.com/list-beats-grid-linear-feeds-perform-two-to-three-times-better-than-grids-2/ グリッドデザインとリストデザインのどちらが本当に効果的なのか？ということを調査したのはソ
-
SMACSS 読んだ - CHROMA
Scalable and Modular Architecture for CSS (日本語) を読んだのでそのメモです。 CSSルールのカテゴライズ カテゴライズを行い、それに準じた命名をセレクタに付ける。 ベース レイアウト モジュール 状態（ステート） テーマ レイアウトには1つ以上のモジュールを保持する必要がある。 モジュールは最利用可能なパーツとする。 命名規則 レイアウト、状態（ステート）、モジュールにはプリフィックスを使用する。 レイアウトのスタイルにはlayout-を付ける。または、ドキュメントなどでコーディング規約をまとめてあるなら省略してl-と付けても良い。 状態（ステート）にはis-を付ける。 モジュールは作成される数が多いので、モジュールごとにプリフィックスを付ける。 /* Example */ .comment { } .comment-user { } ベースル
-
やっぱりか･･･米Googleがページレイアウト分析のアルゴリズムを更新
なんか先週くらいから検索流入が減ったと思っていたら、案の定予想したとおりアルゴリズムの更新があったんですね。。 今回更新があったのは、ページレイアウト分析アルゴリズム(トップヘビーアルゴリズム)というやつで、ちょうど同時期に国内でも検索順位が大きく変動したそうです。 Photo:Google Food By brionv いやー、著者情報周りの件もあったのですが、それにしたってずいぶん変わったなぁと思っていたんですよ。 もしやアルゴリズムに何か変化があったのか? と思って先週末あたりにちょいちょいリサーチしてみたんですが、特にこれといった情報が発見できず、杞憂かと思っていたところに本日未明頃のマット・カッツ氏のツイートが･･･。 SEO folks: we recently launched a refresh of this algorithm: http://t.co/KKSXm8Fq
-
-
floatを解除する手法のclearfix と 次世代のレイアウトの話
floatを解除する手法のclearfix と 次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくな
-
SEO対策が簡単にできる！テンプレートとチェックリスト – 2013年最新版
作成：2013/06/10 SEO対策 > もし、あなたが 良いコンテンツを配信しているのに、全然アクセスが伸びない ソーシャルであれだけ話題になったのに、SEOは全然ダメ そういった現状なら ナルシストなSEO対策になっている可能性があります。 テクニックを使わなくても 「ユーザーの気持ちを考えた」コンテンツ作りを行うと、キーワードを問わず上位表示は簡単です。 下図は2013年3月に立ち上げたグルメ系サイト。 直近、2ヶ月間(4/1~6/1)のアクセス推移。 公開からたったの２ヶ月で1日のページビューが200から、10,000付近まで上昇し続けました。 月間だと、現在20~30万PV。 月３回程度の更新で、シェア数も数えるほど。 グーグルが推奨すること、王道とされていること、ユーザーを考えたレイアウトを構築すれば正攻法でここまで可能です。 毎日更新の呪縛から開放されたい人 ソーシャルで無
-
Page not found | abdz.do
When I started this blog, way back in 2006, I had no clue how long it would last. I actually had no idea I could even write about something for more than a couple of days. It is funny how things go. Once I read in a book that the secret of happiness was low expectations. That explains why, for over a decade, I have been running this site. It also explains why you might end up on this page. Not los
-
パンダ・アップデート分析の決定打になるか！？、Googleの品質評価ガイドライン更新版が流出
[対象: 上級] 検索結果の品質評価をチェックするマニュアルとしてGoogleが用いているガイドライン文書がまたもや部外者の手に渡りました。 このドキュメントのなかにパンダアップデートが定義する“コンテンツの質”の理解にきわめて役立ちそうなセクションが新たに追加されています。 僕が知る限りでは評価ガイドラインの流出は今回で3度目です。 1度目は、バージョンが 2.1 で日付けが2007年4月6日、2度目はバージョンが 3.18 で日付けが2011年3月30日でした。 今回外に出たのは、バージョンが 3.2.7 で日付けは2012年6月22日です。 まだ最近ですね。 目次を眺めつつ前回とほとんど変わっていないと思っていたらそんなことは決してなく、ページ品質の評価に関するセクションが追加されていました。 まだざっと眺めただけで詳しく読んでいないのですが、たとえば最高品質のページは次のような特徴
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しました