A4サイズ印刷専用WEBページを作る方法について
WEBページをA4サイズで印刷できるようにする場合、様々な設定が必要になります。 A4で連続して印刷される場合と、A4用紙1枚で収まるケースとでCSSが変わってきます。 印刷ボタンを非表示にしたり、ヘッダー・フッターを非表示にする設定も忘れずにおこないましょう。 任意に印刷向けWEBページを作る 本記事はA4印刷向けのWEBページを作る大まかな手順です。 印刷を前提としたページを前もって準備するタイプですね。 印刷を前提としていないWEBページをユーザーが印刷する場合、ある程度ユーザー任せで構わないと思います。 元々印刷向けに作っていない事を唄っておけば、多少レイアウトが変でも文句は言われないはずです。 あえて印刷ボタンを準備するケース しかしあえて印刷専用ページとして公開する場合は、きちんとした整備が必要になります。 まず内容はA4判サイズに収まるコンテンツを準備するようにしましょう。
【帳票CSS】A4印刷用のHTMLを作ろう（Chrome用） | deep-space.blue
Chromeできれいに印刷できる帳票をHTMLで作ろう！ 今回はこちらの請求書のWordテンプレートを参考にしながら帳票CSSを書きます。 請求書テンプレート（Word版）http://financial.mook.to/excel/001w.htm 作成したデモ https://deep-space.blue/testing/css-example/css-print/ 用紙設定 <body> <section class="page"> </section> </body> /* A4縦用のベース設定 */ @page { size: A4 portrait; /* 横の場合はlandscape */ margin: 0mm; } /* 各要素の余白リセット */ *{ margin: 0mm; padding: 0mm; } /* 印刷時の調子を整える */ body { width
最低限の CSS のみで Masonry のようなグリッドレイアウトを組む方法 ｜ SiTest (サイテスト) ブログ
今回は、高さの異なるコンテンツを隙間なく敷き詰めるレイアウトを CSS だけで実現する方法をご紹介します。 Javascript や CSS のライブラリは使わず、ピュア CSS のみで手軽に実装してみました。 まず、はじめに今回作るレイアウトについて確認しておきます。 百聞は一見にしかず、ということで実際のウェブサイトを例に見てみましょう。 STUDIO LEMON DENCHI インテリアショップ unico | ブランドサイト ご覧のような、高さの違うパネルがタイル状にびっしりと敷き詰められたレイアウトが今回作ろうとしているものです。 画像が多く、あえて整然とした配置のリズムを崩しているので、楽しげに見えるレイアウトですね。 これを CSS の float や flex-box を使って実装しようとしても、なかなか困難です。 また、こうしたレイアウトを実現するためのライブラリが色々と
CSS Gradient — Generator, Maker, and Background
CSS Gradient is a designstripe project that lets you create free gradient backgrounds for your website. Besides being a css gradient generator, the site is also chock-full of colorful content about gradients from technical articles to real life gradient examples like Stripe and Instagram. Why we made this? See gradients were super played out back in the early web days, but now they’re so ubiquitou
CSSのスクロールスナップの便利な使い方、実装の注意点を徹底解説
CSSのスクロールスナップが登場して早4年、現在ではほぼすべてのブラウザにサポートされ、採用しているWebサイトやスマホアプリも増えてきました。 CSSのスクロールスナップについて、基礎知識をはじめ、各プロパティの機能や使い方、スクロールスナップの実際の使用例、実装の注意点などを紹介します。 CSS Scroll Snap by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSのスクロールスナップを使う理由 スクロールコンテナの基本 スクロール コンテナの注意点 CSSのスクロールスナップとは scroll-snap-stopの使い方 scroll-paddingの使い方 scroll-marginの使い方 CSSのスクロールスナップの使用例 block値とinline値について アク
【CSS】コピペするだけ！アコーディオンボックスのつくり方
やり方はかんたん！紹介するコードをコピーして、CSSファイルに貼りつけるだけです。 WordPressをお使いの方は「style.css」（テーマを使っている方は子テーマの「style.css」）に貼りつければOKです。 アコーディオンボックスのコードまずは基本となるアコーディオンボックスを表示させてみましょう。 こんな感じ↓のボックスです。 /*--------------------------------- アコーディオンボックス --------------------------------*/ .acbox{ width: auto; font-size:0px; /* ラベルと開く部分を分離する時は数値を入れる */ margin:0 10px; /* ボックス全体の位置調整 */ } .acbox label{ width: auto; font-size: 16px; /
【HTML・CSS】コピペで簡単！ボックス（囲み枠）デザイン記事まとめ | さかぽんブログ-MIYAZAKI LIFE
HTML・CSSを使って、ボックス（囲み枠）デザインをコピペで実装できるサイト・記事を、”あのデザインどこにあったっけ？”という備忘録代わりに、精査しながらまとめています。 ノンデザイナーがWebデザインをすることになった際に、大変助かるありがたいサイトばかりです。 その他の記事まとめは、こちらからどうぞ。 【HTML・CSS】コピペで簡単!記事まとめ デザイン例が充実！おしゃれなデザインの囲み枠 【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30／サルワカ 囲み枠のサンプル画像をずらっと並べるだけで、すごい数！シンプル系から、おしゃれなものまで、囲み枠のデザインが揃っています。ひとつひとつデザインの解説と、HTML＆CSSのコードが紹介されていて、とてもわかりやすいです。勉強にもなる！ 女性向けサイトにぴったりな囲み枠デザイン コピペで可愛く装飾！ CSSのみでデザインする囲み
CSSのみでモーダルウィンドウを作成
jQueryなどのJavaScriptを使って作成することが多いモーダルウィンドウですが、CSSのみでも作成することが可能です。 JavaScriptが使えない制作環境での実装におすすめです。 モーダルウィンドウの実装イメージモーダルウィンドウの実装イメージ本記事で実装するLightbox風モーダルウィンドウのイメージです。 実装するモーダルウィンドウの特徴jQuery、JavaScript不使用jQuery、JavaScriptを使わず、HTMLとCSSのみで実装します。 <inputタグ> 、<labelタグ>不使用<inputタグ>、<labelタグ>で実装するモーダルウィンドウもありますが、本記事のモーダルウィンドウはCSSの:taget擬似クラスを利用しています。 Yahoo!ショッピングの商品ページなど、 <inputタグ>使用不可の制作環境でも利用できます。 レスポンシブ対応
Web制作の面倒な作業をラクにするCSS便利ツール87個まとめ
この記事では、Webデザイン制作の面倒な作業をラクにするCSS便利ツール87個をまとめています。なお、新しいツールを随時アップデートしています。 CSS FlexboxやGridをつかったレイアウト生成ツールや、レスポンシブ対応の画像ツール、配色に困ったときに便利なツール、多彩なCSSアニメーション、話題のニューモーフィズムなど、CSSスタイリング時間節約や、さまざまな問題を瞬時に解決することを目的に作成された便利なツールが揃います。 Web制作に活用したい最新ツールと合わせてチェックしてみてはいかがでしょう。 これだけあれば困らない！Web制作を快適にする最新オンラインツール48個まとめ Web制作�の面倒�な作業をラクにするCSS便利ツールまとめ CSS box-shadow Examples さまざまなサイトで実際に使われているCSS box-shadowを集めているライブラリ。お好
簡単! CSSでできるSVGアニメーション - Qiita
svgアニメーションのやり方 この項目はadobe illustratorを持っていることを前提に書いています。 まずはじめにHTMLの簡単なテンプレートから <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>SVG アニメーション</title> <link rel="stylesheet" href="style.css"> <style> </style> </head> <body> </body> </html> cssの名前はsyle.css 素材作り レイヤーの名前はlogoにして、文字は必ずアウトライン化をしてください 素材ができたら右のタブからアセットの書き出しを選び、ドラッグアンドドロップ。名前を決めたら書き出ししよう svgについて svgと
【コピペ改変OK】CSSで作れる吹き出しデザイン8選
サイトのコンテンツはテキストだけだと単調になりがちですが、吹き出しがあると目を引きますし楽しくなりますよね。また、会話形式のコンテンツが吹き出しで作られていると親しみが湧くはずです。この吹き出し、画像は使わずにCSSだけで作ることができてしまいます。 この記事では吹き出しの作り方の説明から吹き出しのデザインサンプルも用意しました。コピペも改変もOKですのでご自由に使ってみてください。 まずは吹き出しの基本！三角部分の作り方 吹き出しから飛び出ている三角の部分はborderプロパティを使えば簡単に作れます。 以下のサンプルは上下左右に異なる色を指定したものです。三角が4つ集まっているように見えますね。 See the Pen border-color-test by Beco (@becolomochi) on CodePen. HTML [html] <div class=”box”></
CSSで背景画像にぼかし加工と半透明カラー加工を同時に行う - Qiita
.top{ z-index:0; overflow: hidden; background-color: rgb(0,163,175);/*半透明カラーの色*/ } .top::before{ content: ''; background: url('../../assets/img/hogehoge.jpg');/*背景画像のURL*/ opacity: 0.5;/*半透明カラーの透明度*/ filter: blur(8px);/*ぼかし度*/ position: absolute; /* 参考: http://designcolor-web.com/2016/09/14/css-blur-effects-background/*/ top: -8px; left: -8px; right: -8px; bottom: -8px; z-index: -1; }
スライドショーに使える！CSS Animation 4選 ～CSS初心者がCSS Animationに入門してみた～ - Eyes, JAPAN Blog
Eyes, JAPAN Blog 1997年からほぼ毎日更新！会津大学発のベンチャー企業、株式会社Eyes, JAPANによるBlog。 コンピュータ、ネットワーク、Hi-Tech Gadget、魔法の様な技術などのGeekなネタから会津のローカルネタまで。 僕とCSS Animation 最近CSS Animationに入門しています。僕は普段セキュリティに興味があり、大学でチームを組んでCTFに参加したり、大学院の研究対象にはマルウェアを選択しています。 そんな僕がなぜCSS Animationに入門したのかというと、きっかけはCSS Animationの個人サイトを運営している@yui540さんという方の作品を見たことでした。 youtubeでCSS Animationを使った演出講座（ https://www.youtube.com/watch?v=wFJ8WB4G4KM ）をやら
CSSでスクロールのスナップが可能に！scroll-snapプロパティの基礎知識と便利な使い方
CSSのscroll-snapプロパティを使用すると、スマホのホーム画面のようにちょっとずらすだけで、すぐに次のコンテンツを表示させることができます。今まではJavaScriptの領域でしたが、これからはCSSのみで実装できます。 scroll-snapプロパティの基礎知識と便利な使い方を紹介します。 Practical CSS Scroll Snapping 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 スクロールにスナップさせる「scroll-snapプロパティ」 「scroll-snapプロパティ」のサポートブラウザ 「scroll-snapプロパティ」の基礎知識 親要素の「scroll-snapプロパティ」 子要素の「scroll-snapプロパティ」 「scroll-snapプロパティ」の便利な使い方 スクロールスナ
[CSS]素晴らしいテクニックが満載！囲いや区切りなどのラインを実装するスタイルシートのまとめ
divやp、hrなどで実装された囲いや区切りのスタイルに、一手間加えた素敵なデザインにするスタイルシートのテクニックを紹介します。 かわいいデザインからスタイリッシュなものまで、実装のアイデアが素晴らしいものばかりです。
![[CSS]素晴らしいテクニックが満載！囲いや区切りなどのラインを実装するスタイルシートのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/a545d68e72312cfa64f79c7d1932afa3d3078686/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014120205-19.png)
【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選
ほとんどのモダンブラウザがCSS3対応となったことで、これまではPhotoshopなどのデザインアプリで再現していたようなデザインスタイルも、HMTL/CSSで表現できるようになってきており、その進化はますます加速しています。 今回は HTML と CSS、わずかな JavaScript で実装できる、表現力の高いテキストエフェクト用コードスニペットをまとめてご紹介します。コードニペットは各エフェクト別にカテゴリ分けしているので、ウェブサイト制作に活用したいエフェクトを見つけてみましょう。 ナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめ CSS3の広がる可能性！美しいテキストエフェクト用コードスニペット24個まとめ CSSスタイリングで表現できる！すごいテキストエフェクト33個まとめ コンテンツ目次 1. アニメーション・テキストエフェクト 2. グリッチ・
アニメーションが気持ちいい！コピペで実装できる最新HTML/CSSスニペットまとめ
ウェブサイト制作において、わずかなアニメーションを実装した「マイクロインタラクション」の重要性が高まってきています。メインとなるコンテンツの邪魔せずに、魅力的なデザインを追加できるだけでなく、ユーザーにも分かりやすく情報を伝え、特定の要素に注目を集めることもできます。 今回は、素敵なアニメーションを実装した、HTML/CSS/JSスニペットをまとめてご紹介します。どれもアイデア性にあふれるクリエイティブな動きが表現されています。今後のデザイン制作に活用してみてはいかがでしょう。 詳細は以下から。 アニメーションが気持ちいい！コピペで実装できる最新HTML/CSSスニペットまとめ ページの読み込みに多少時間がかかります、しばらくしてからスクロールするとよいでしょう。 Waves ３つのレイヤーを重ね、それぞれ@keyframesを指定することで、カラフルな波ウェーブ・エフェクトを実現していま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS clip-path Editor
CSSアニメーション制作に役立つライブラリ・ツール14選
【CSSで簡単に】固定した背景をスクロールして別の画像や要素に切り替えるFixed Backgrounds CSS6選【コピペで簡単実装】
