CSSの知っておくと便利なテクニック！ ラッパーが異なるコンテンツのツラをcalc()関数のパディングで揃える

2022/03/24 14 users Calc パディング ヘッダ づら ラッパー

メインのヘッダは固定幅、記事のヘッダは流動幅、ラッパーが異なるコンテンツのツラを揃えるCSSのテクニックを紹介します。 下記のようにヘッダのロゴと記事のタイトルを揃えたい時はありませんか？ CSSのcalc()関数を使用した動的なパディングを使用すると、簡単に実装できます。デスクトップの大きいスクリーン、スマ... 続きを読む

こいつ、動くぞ！ 商用利用無料、シンプルにデザインされたSVGもフォントも揃った高品質なアイコン -Boxicons

2021/11/10 346 users SVG アニメーシ フォント こいつ アイコン

1,500種類以上のアイコンが揃った、Webサイトやスマホアプリにぴったりなシンプルにデザインされた無料アイコンを紹介します。 オープンソースで個人でも商用でも無料で利用できます。また、SVGアイコンとアイコンフォントで利用できるので、サイズやカラーの変更はCSSでできます。アイコンはリスト、固定幅、アニメーシ... 続きを読む

シンプルなCSSで実装できる！記事は中央に固定幅、画像は幅いっぱいに、フルブリードレイアウトを実装するテクニック | コリス

2020/10/16 200 users コリス CSS レイアウト HTML 応用

記事のテキストが多いサイトで見かけるレイアウト、記事は中央に固定幅、画像は幅いっぱいに表示するフルブリードレイアウトをシンプルなHTMLとCSSで実装するテクニックを紹介します。 記事の固定幅は自由自在、画像の幅いっぱいも最大値を制限するなども簡単にでき、いろいろな応用も効く実装テクニックです。 Full-Ble... 続きを読む

CSS Flexboxで、Webページによく使用されるUIコンポーネントを実装するテクニックのまとめ | コリス

2020/02/26 21 users ヘッダ コリス ナビゲーション レイアウト HTML

CSS Flexboxを使用してWebページによく使用されるUIコンポーネント、ヘッダでロゴを左端にナビゲーションを右端に、固定幅のサイドバーと流動幅のメイン、フォームで入力欄とボタンの高さを合わせる、同じHTMLで異なるレイアウトのカードを実装するテクニックを紹介します。 CSS Flexbox: 5 Real World Use Cases by Ahm... 続きを読む

Flexboxを使う時に覚えておきたい！固定幅と可変幅を組み合わせたレイアウトを簡単に実装する方法 | コリス

2019/07/18 66 users Flexbox コリス CSS ナビゲーション 可変幅

幅が決まっている固定要素と幅が決まっていない柔軟な可変要素をうまく組み合わせたレイアウトをFlexboxで実装するCSSのテクニックを紹介します。 画像とテキストを並べたり、ナビゲーションだったり、横に並べた際に高さが異なってしまったり、さまざまなレイアウトを解決するテクニックです。 Making width and flexib... 続きを読む

外部コンテンツをiframeサイズで拡大縮小させたり、固定幅コンテンツをウィンドウサイズでピッタリ表示させる方法 : アシアルブログ

2014/09/19 95 users ウインドウサイズ 鴨田 レスポンシブレイアウト iframe

こんにちは、鴨田です。 タイトルが長くなってしまってすみません。 皆さんの中で、自分のサイトコンテンツの中で、 iframeを使って外部サイト(自分で更新できない)を表示したいときに、 iframe内のコンテンツを拡大縮小出来なくて困ったことがあったり、 サイトコンテンツをレスポンシブレイアウトではなく、 固定幅のまま、あらゆるブラウザで、 ウィンドウサイズに合わせてピッタリに拡大縮小したい、 と... 続きを読む

[CSS]CSS3アニメーションでブラー効果をかっこよく使ったナビゲーションを実装するチュートリアル | コリス

2011/10/20 96 users ブラー コリス Opera 半透明 エフェクト

アニメーションを伴ったテキストシャドウや半透明を利用して、ブラーのエフェクトを使ったナビゲーションを実装するCSS3のチュートリアルを紹介します。 デモページ 対応ブラウザは、Chrome, Safari, Firefox, Operaです。 IEは、IE9でまだテキストシャドウやアニメーションはサポートされていません。 7つのデモの実装 HTML メニューはすべてリスト要素で実装しており、固定幅... 続きを読む

「IPAexフォント」が無償公開、IPAフォントの等幅とプロポーショナルを統合 - ニュース：ITpro

2010/02/26 171 users プロポーショナル ITpro 慣例 IPA IPAフォント

独立行政法人 情報処理推進機構(IPA)は2010年2月26日、「IPAexフォント」を無償公開した。公開中の「IPAフォント」の「等幅（固定幅）」と「プロポーショナル（変動幅）」を一つに統合した。IPAフォントも新版Ver.003.02を公開した。 「従来のIPAフォントは、過去のシステムとの互換性の観点から、固定幅と変動幅のフォントを分離していた。しかし、一般的な日本語の慣例に従った文書を作成... 続きを読む

窓の杜 - 【NEWS】IPA、新フォント「IPAexフォント」公開、「IPAフォント」もバージョンアップ

2010/02/26 397 users IPA IPAフォント プロポーショナル NEWS 新フォント

NEWS（10/02/26　19:55） IPA、新フォント「IPAexフォント」公開、「IPAフォント」もバージョンアップ 日本語と英語が混在しても固定幅とプロポーショナルを使い分けずに使える 「IPAexフォント」v001.01 「IPAexフォント」と「IPAフォント」を比較 独立行政法人情報処理推進機構（IPA）は26日、商用・非商用に限らず無償で利用できる日本語フォント「IPAフォント」... 続きを読む

[CSS]100%幅のヘッダとフッタを天地に固定表示するスタイルシート | コリス

2009/07/05 390 users ブッダ コリス div ヘッダ CSS

ビギナーズ向けに解説された、100%幅のヘッダとフッタを固定幅のコンテンツの天地に固定表示するスタイルシートをNoobcubeから紹介します。 Fixed Header & Footer Layout: A Beginner's Guide demo スタイルシートはIE6をはじめとする主要ブラウザをターゲットにしており、IE6用のスタイルシートファイルやdivの入れ子でIE6に対応しています。 ... 続きを読む

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

2008/08/22 657 users リキッド キャプチャ CREAMU 3カラム 2カラム

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

GIGAZINE - 画像を使わず、角にアンチエイリアスをかけて丸くする「curvyCorners」

2006/06/16 465 users アンチエイリアス GIGAZINE div要素 実例 参照

「curvyCorners」はフリーのJavaScriptで、角が丸いコーナーをDIV要素で簡単に作ることが可能。特徴は画像を使ったのと同じくらい角がなめらかに丸くなる点と、いたって利用が簡単な点。 どれぐらい丸くなるのかという実例とコードのダウンロード、設置方法は以下を参照。 例その1、3ピクセルの白いボーダーを使い、角は半径20ピクセルで丸くなってます 例その2、固定幅と高さで画像を固定し、角... 続きを読む