タグ「2カラム」 - はてブログ

タグ 2カラム

新着順人気順 5 users 10 users 50 users 100 users 500 users 1000 users

(1 - 25 / 25件)

CSS Gridでposition: sticky;のスティッキーが効かないときの原因とその対応方法

2021/12/07 30 users スティッキー sticky position サイドバー原因

CSS Gridで2カラムのレイアウト（メインとサイドバー）を実装し、サイドバーにposition: sticky;を定義したけど、機能しなかったことはありませんか？ CSS Gridでスティッキーが効かないときの原因とその対応方法を紹介します。 Using Position Sticky With CSS Grid by Ahmad Shadeed 下記は各ポイントを意訳したもので... 続きを読む

シンプルさを追求した公式デザインテーマ「Neutral」を追加しました - はてなブログ開発ブログ

2020/07/07 10 users Neutral フォント細部レスポンシブデザインデザイン

はてなブログでは、新しい公式デザインテーマとして「Neutral」を追加しました。シンプルさを追求したデザインながらも文字サイズやフォントなど細部にこだわった2カラムのデザインテーマです。レスポンシブデザインにも対応しています。どうぞご利用ください。新しい公式デザインテーマ「Neutral」新しいデザインテー... 続きを読む

記事が読みやすい公式デザインテーマ「Smooth」を追加しました - はてなブログ開発ブログ

2019/01/23 28 users smooth レイアウト本文サイドバー本日

はてなブログでは、新しい公式デザインテーマとして「Smooth」を追加しました。本文の読みやすさと、サイドバーの見えやすさを両立した2カラムのレイアウトが特徴です。本日より、はてなブログのデフォルトデザインテーマとなります。どうぞご利用ください。新しい公式デザインテーマ「Smooth」新しいデザインテーマ「... 続きを読む

ブログを1カラムにした｜カスタマイズの参考にしたページのまとめ - ぐるりみち。

2018/04/16 31 users カスタマイズ 1カラムまとめ - 参考ツッコ

2018 - 04 - 16 ブログを1カラムにした｜カスタマイズの参考にしたページのまとめブログ ──のに、この数日でツッコんでくれたのがたった2人という悲しみ。やっぱりみんな、僕のブログなんて読んでないんすね……シクシク……。それとも、そんなにワシは絡みづらいキャラなのか……。まあそんな茶番はさておき、実際のところ、「それまで2カラムだったサイトが1カラムになっても気がつかない」のは、... 続きを読む

はてなブログテーマ「 UnderShirt 」を公開しました - LOGzeudon

2018/01/06 17 users サイドカラム LOGzeudon archive 確保特徴

2018 - 01 - 06 はてなブログテーマ「 UnderShirt 」を公開しましたつくってみたはてなブログ２カラムで、アイキャッチが大きくて、そこそこ使い勝手の良いはてなブログテーマ「 UnderShirt 」を公開しました。特徴一覧（archive）ページで、記事のアイキャッチ画像を大きく表示 PCではサイドカラムを表示、336px（レクタングル広告）確保レスポンシブ対応... 続きを読む

ブログのデザイン、試行錯誤中 - 勝間和代が徹底的にマニアックな話をアップするブログ

2017/12/18 15 users デフォルト 1カラム勝間和代タイトル集中管理

2017 - 12 - 18 ブログのデザイン、試行錯誤中とりあえず、これまでデフォルトで使っていたブログデザインですが、さすがにそれはないかなぁ、ということで、ちょっといじってみました。２カラムより、１カラムの方が見やすいですね。とりあえず、タイトルが目立つものにしました。あと、せっかくなので、はてなのブックマーク側のコメントも表示するようにしました。これだと、集中管理できて楽です。 ... 続きを読む

CSS Gridで、Webページでよく使うレイアウトを実装したシンプルなHTML/CSSのテンプレートのまとめ | コリス

2017/11/26 81 users コリス Flexbox 全幅ヘッダグリッド

CSS Gridを使って、ヘッダ・フッタ付きの2カラム、3カラム、カード型といったレイアウトをはじめ、テキストはグリッドに揃えて画像は全幅で表示など、Webページでよく使うレイアウトを実装するシンプルなテンプレートを紹介します。来年からは、CSS Gridで実装するのが主流になりそうですね。 CSS Grid Starter Layouts CSS GridとFlexbox、それぞれどう使いこな... 続きを読む

[CSS]最近のレスポンシブ対応サイトで使われているレイアウトのアイデア・実装方法のまとめ | コリス

2017/07/03 91 users コリス CSS スプリットスクリーンレイアウトまとめ

レスポンシブ対応のレイアウトはどのように拡大・縮小させるのか、また縦・横に積み重ねるのかに大別されます。ブラウザいっぱいに表示する1カラム、サイドバーを備えた2カラム、2カラムを均等に分割したスプリットスクリーン、カードやパネルを使ったレイアウトなど、最近のレスポンシブ対応サイトで使われているレイアウトのアイデアと実装方法を紹介します。ひと昔前まではJavaScriptを使用しないと実装できな... 続きを読む

マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法 | コリス

2017/01/11 599 users パディングアトミックコリスマージンロジック

Webページを制作にする時に、マージンやパディングをどのようにつけるか悩むことがあります。2カラムの隙間は、左パネルの右マージンorパディングなのか、右パネルの左マージンorパディングなのか。 Web制作の今までの考え方がきっと変わる、モジュール式のアトミックデザインにおけるHTMLとCSSの実装のロジックを紹介します。 Learning from Lego: A Step Forward in... 続きを読む

CSSで2カラムを作ってみる｜Web Design KOJIKA17

2014/07/03 362 users CSS Web Design KOJIKA17 float

CSSで2カラムといっても、その作成方法は様々です。多くのパターンを理解することは、CSSに柔軟性を持たせることに、つながります。 1. floatを利用する基本的な方法です。子にfloatを利用すると、灰色の背景を敷いている親の高さが算出できなくなるため、背景色が出なくなったり、レイアウトが崩れたりします。これらの問題を解決するには、clearfix か overflowを利用する必要が... 続きを読む

「２カラムの論文PDF」を「１カラムの余白にメモしやすいPDF」に変換する方法 | 情報科学屋さんを目指す人のメモ

2013/03/06 341 users 余白手書き論文論文PDF PDF

２カラム（２段組）の論文PDFを、１カラム（１段組）に変換して、余白にメモをとりやすいPDFを作成する方法を紹介します。この方法にたどり着くまで結構大変でした。１カラムに変換して読みたい！私は論文を読むときは、印刷して、余白に手書きでメモをとったり図を書いたりするのが好きです。というのも、後からもう一度内容を確認したいときに、メモのおかげで前回自分が注目したところをすぐ見つけられたり、同じこ... 続きを読む

はてなブックマークが全面リニューアル　「モダンで色彩豊か」なデザインに - ITmedia ニュース

2013/01/08 220 users 色彩全面リニューアル ITmedia ニュースデザイン

はてなは1月8日、ソーシャルブックマークサービス「はてなブックマーク」をリニューアルした。トップページのデザインなどを一新したほか、人気エントリーのアルゴリズムを見直した。「全面的な刷新の第1歩」としている。大幅なデザインリニューアルは2008年11月以来。「トップ」は、シンプルな2カラムで人気エントリを紹介し、その下に「新着ニュース」や同社のブログサービス「はてなブログ」の人気エントリー、人気... 続きを読む

ブログを2カラムからシングルカラムに変えた理由や変更後の変化など / Maka-Veli .com

2012/10/30 25 users シングルカラムチャレンテイストレイアウト前提

10月15日より、デザインを少し変更しました。全体的なテイストは変わらずですが、レイアウトをシングルカラムに。まず前提として大きな理由の1つは「飽きたから」なんとなく普通の設計が飽きちゃったなぁーというのが大きな理由です。なので「前が良かった」のは正しいご意見というか、一般的にはその方が良いのかもしれません。このブログは広告収入やPVを上げることが目的では無いので、色々含めてどんどんチャレン... 続きを読む

レスポンシブWebデザインで3カラムと2カラムを切り替えるためのCSS: 小粋空間

2012/10/24 60 users Media Queries メインコンテンツ小粋空間左右

レスポンシブWebデザインで、Media Queriesを使って3カラムと2カラムを切り替えるためのCSSの設定について紹介します。１．やりたいことまず、次のような3カラムレイアウトがあるとします。一番左がメインコンテンツで、その右側にサイドバーが2列並んだものです。あるいは、左右にサイドバーがあるオーソドックスな3カラムレイアウト。これらの3カラムレイアウトをデバイス幅によって2カラムレ... 続きを読む

本格的なブログ運営に使える2カラムの無料Wordpressテーマ12選 - NAVER まとめ

2012/08/12 86 users NAVER ブログ運営

無料のWordpressテーマはたくさんあるけど、個性的すぎて使いにくいものも多い。そこで、普通のブログでも使いやすいシンプルな２カラムのテーマを集めました。更新日: 2012年08月09日RSS 続きを読む

スペースを有効に、jQueryでスクロールすれば現れるコンテンツ｜Webpark

2012/06/26 70 users レイアウトメインコンテンツ時点 jQuery 説明

このブログのように2カラムのレイアウトでメインコンテンツが長いと、スクロールしたときにサイドのスペースがなくなってしまいもったいないですよね。サイドのコンテンツが終わった時点で固定されたコンテンツが現れたら無駄なくスペースを使えるのではないでしょうか。ということで、サイドのコンテンツが終わったら固定されたコンテンツが現れるようにする方法を紹介します。説明が下手で、イメージしにくい方もおられる... 続きを読む

[CSS]雑誌風のレイアウトがきた、どう実装する -解答編 | コリス

2011/04/21 116 users div要素 HTML エントリーコリステキスト

昨日のエントリー「雑誌風のレイアウト、さぁどう実装する？」の解答編です。雑誌風のレイアウトは、下記のように2カラムのテキストの真ん中上に画像を配置したものです。まずは、HTMLから。画像を二つに切るとかは、無しですよ。 HTML 各パラグラフをdiv要素で内包し、画像とそのdiv要素をdiv要素で内包して実装します。続きを読む

ブログをリデザインしました。ついでにデザインについても考えてみた。 : Web Design KOJIKA17

2011/03/28 25 users Web Design KOJIKA17 デザインブログ

今回、色々突き詰めて考えながら、ブログのデザインを新しく設計し直しました。リニューアルしたポイントをまとめてみます。リニューアル前のデザインよくある感じのデザインです。ポイントは以下の通り。2カラム赤、白、黒が基本色1カラムにした理由。ブログサイトでよく見かけるレイアウトは2カラムや3カラムのレイアウトが非常に多いように思えます。また私自信も2カラム、3カラムのブログ構築しかしてきませんでした。... 続きを読む

実用的なユーザビリティの10のポイント：ガイドライン編 | コリス

2009/09/30 579 users コリス tumblr ユーザビリティウェブページフィールド

ユーザーにあなたのウェブページを容易で、そして楽しくアクセスできるようにする実用的なユーザビリティの10のポイント（ガイドライン編）をSmashing Magazineから紹介します。 Tumblr 多くのフォームは2カラムのレイアウトを採用し、ラベルはフィールドの左に配置されています。一見よさそうに思えますが、これは採用すべきではありません。なぜなら、フォームは一般に垂直に方向付けがされている... 続きを読む

コーディングをさっと済ませるためのCSSテンプレート集 | CREAMU

2008/08/22 657 users リキッドキャプチャ CREAMU 3カラムコーディング

コーディングはさっと済ませたい。そんなあなたにおすすめなのが、『Blank Themes, Frameworks and Templates: Resources to Speed Up Your Development Time』。コーディングをさっと済ませるためのCSSテンプレート集だ。以下にいくつかご紹介。 ↑のキャプチャはDynamic Drive。2カラムや3カラム、固定幅、リキッド... 続きを読む

リニューアル後のmixiを2カラム/750px幅化するユーザースタイルシートを書いてみた : akiyan.com

2007/10/01 375 users akiyan.com stylish mixi ついカッ拡張

別に2カラム原理主義者というわけではないのですが、カラム変更オプションが無くなったのでついカッとなって書いてみました。適用前、適用後適用前適用後解説 Firefox向けで、ユーザースタイルシートの適用は「Stylish」拡張をインストールすると便利です。 2カラムにするだけではなく、個人的にほとんど使わない機能へのナビゲーションまで削除しちゃってるので、ちょっと注意が必要です。リニューアル... 続きを読む

美しいレイアウトを計算してくれるツール :: Love & Design ::

2006/08/31 605 users 白銀比 DESIGN レイアウト LOVE 黄金比

以前 Webデザインと黄金比の関係でご紹介した、白銀比、黄金比、白金比、第二黄金比を使った美しいレイアウトを計算してくれるツールが、さらに再分割できるようになりパワーアップしました。電脳狂想曲　レイアウトの小技使い方と説明実際に画像を表示しながら分割ができるので、サイドバーや画像の大きさを決めるときや、ロゴやメニューを配置するときに便利です。【使用例】段組（２カラム）するとき横幅780... 続きを読む

スタイルシートによる崩れない　2カラム　3カラム・レイアウト

2005/09/21 872 users レイアウト 3カラムスタイルシートモジラ float

ネットサーフィンをしていると、floatを使って段組しいていて、レイアウトが崩れているサイトを時々見かけます。ほとんどの場合が、左のみwidthを指定しているが、右に指定していない場合です。これはWINのIEでのみ段組されて表示されますが、モジラ等では、右部分は下に回りこんで表示されます。　ということで、ここでは上下にヘッダーとフッターを置いたサンプルを使いながら、メイン表示部分を左右2段にスタ... 続きを読む

スタイルシートによる崩れない　2カラム　3カラム・レイアウト

2005/09/18 1365 users レイアウト 3カラムスタイルシートモジラ float

(1 - 25 / 25件)