いままでの印刷、これからの印刷 | 前編 ブラウザによって異なる印刷対応状況
いままでの印刷、これからの印刷 前編 ブラウザによって異なる印刷対応状況 スマートフォンの登場で、Webサイトそのものを印刷して情報を保存するニーズは低減しましたが、ユーザーや、サイトの性質により印刷が必要とされる場合もあります。これまで制作はどのような対応をしてきたか、また印刷手法にはどのようなものかあるか、それぞれの経験を語ります。 はじめに スマートフォンの登場で、Webサイトそのものを印刷して情報を保存する方法はあまり提供されなくなってきたかもしれません。ですが、ページやサイトの性質によっては、いまだに印刷が必要とされる場合もあります。これまで制作側はどのような対応をしてきたか、また現在、どんな有効な手法があるのか、技術情報を交えた座談会でお届けします。 参加者 座談会の参加者は次のとおりです。 中村 享介（@kyosuke） フロントエンド・エンジニア 高津戸 壮（@Takazu
ブラウザにおける縦書き | 前編 縦書き実装の今
はじめに 本記事では、2015年11月末での、縦書きに関するCSSの実装状況とプロパティについて解説します。また、先日行ったCodeGridのWebアプリケーションのリニューアルでは、記事タイトルやナビゲーションなどで、一部縦書きを利用しています。 縦書きを利用した部分の実装方法と、利用する際の注意点などに関しては、実装を担当した小山田が次回解説します。 2015年は、縦書きに関する実装が各ブラウザで進み、縦書きWeb普及委員会や縦書きWebデザインアワード - 縦書きWeb普及委員会といったコンテンツが登場し、2016年はさらに興味を引くものになっていくと思われます。この縦書きに関するCSSについて、本記事を通して理解を深めていきましょう。 縦書きに関連するプロパティとその実装状況 縦書きに関するプロパティは、現在のところ3種類存在します。 writing-modeプロパティ書字方向（横
[CSS] IEで印刷のレイアウト崩れ対策 | WEBエンジニアの雑記ブログ
Internet Explorer（9 ~ 11）にて印刷時にレイアウト崩れが発生しかなり苦戦したので、共有 + 自分の後学の為に公開しておこうと思います。 1. 印刷時読み込むCSSの設定 レスポンシブサイトを構築しているとよくある話ですが、印刷時サイズって横幅約700px（A4）なのでスマホ版レイアウトが表示されがちですが、それを解消する為に下記のいずれかを記述すると思います。 //パターン1 印刷用CSSをheadタグに追記する <link rel="stylesheet" type="text/css" media="print" href="print.css"> //パターン2 共通用CSSに印刷用CSSのインポートを追記 @import url("print.css") print; //パターン3 各CSS内の該当部分にメディアクエリを使用した追
![[CSS] IEで印刷のレイアウト崩れ対策 | WEBエンジニアの雑記ブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/913ed2b2b71cd0201fdb22129ed43049ef324b06/height=288;version=1;width=512/http%3A%2F%2Fwebsite-engineer.com%2Fwp-content%2Fuploads%2F2017%2F06%2Fcss3.jpg)
【決定版】印刷用CSSはこれでいこう！ | m-pixel labo blog
「いざホームページが完成！と思ったら、印刷するときに思い通りの画面じゃなかった！」といったことはありませんか？Webサイトは本来PCなどのディスプレイで出力することを目的としているので、印刷には不向きなものです。 今ではスマートフォンやタブレットなどの持ち歩く端末が普及したために、印刷の必要性が下がったとはいえ、ページによっては印刷したいというものもまだまだあります。そこで今回は印刷用のCSSをどのようにして作るのか、見ていきたいと思います。 印刷用CSSの書き方（基本編） まずは印刷用のCSSを用意します。CSSでは、出力する端末に応じてメディアタイプをかき分けることができます。例えば以下のような種類が存在します。 screen（スクリーン、ディスプレイ） print（プリンタ） tv（テレビ） projection（プロジェクター） all（上記の全て） などなど このうち今回使用する
今どきのおしゃれなリンクのhoverを実現するCSSアニメーションサンプル21選 | sounansa.net
ナビゲーションメニューとかのリンクにマウスを載せたときのアニメーションのサンプルでおしゃれなものを見つけたので紹介します。 CREATIVE LINK EFFECTSこのページでデモを確認できますので、マウスを載せてみてください。 いっぱいあって、どれを使おうか悩んじゃいますね。 こういうのをナビゲーションメニューに使われているのを最近よく目にするようになりましたが、クリエイティブなhoverアニメーションがこれからのWEBデザインの定番になりそうなので、ぜひ憶えておきたいテクニックです。 尚、ソースはこちらからダウンロードできます。 http://tympanus.net/codrops/2013/08/06/creative-link-effects/ よろしければこちらの記事もどうぞ 2015年版 まだまだあるよ！今どきのおしゃれなリンクのhoverを実現するCSSアニメーションサン
二行目の最後を「...」をクロスブラウザで実現 - Qiita
文字が溢れたら「...」を出すのは text-overflow: ellipsis がありますが、一行の場合にしか利用できません。二行目に「...」を出すのは、 -webkit-line-clamp というのがありますが、クロスブラウザでは利用できません。 CSSだけで実現するのは不可能だと思ってたんですけど、出来ちゃいました。 実物はこちらでご確認ください。 .lineclamp { /* config */ line-height: 1.5; height: 3em; background-color: #fff; /* config end */ position: relative; padding-right: 1em; overflow: hidden; } .lineclamp:before { content: "..."; position: absolute; righ
CSSで実装できる可愛いデザインに使えそうなボタンデザインやホバーエフェクト 10＋ - NxWorld
自分用に一覧化したものがほしくて作ったのでシェアします。 あくまで個人的に思ったものなので多少合わないと思うものもあるかもしれませんが、可愛らしいデザインや遊び心あるような感じのサイトで使えそう・相性が良さそうだと思ったボタンデザインやホバーエフェクトです。 いずれも画像やJavaScriptなどは使用せずに見た目から動きまで全てCSSで表現しており、CSSなのでカラー変更やフォントサイズの変更なども容易にできます。 閲覧の際にChrome又はFirefoxで見てもらえるとほぼ問題なく動きの確認ができると思いますが、ブラウザによって動きや見栄えが説明と異なる場合があります。 基本的に必要だと思う記述は全て掲載しておりますが、例えばfont-familyやfont-sizeなどのように環境によって大きく記述が異なるようなものは省略して紹介しているので、場合にはよって実装してみたものと紹介して
スマートフォンサイト構築時に気をつけたいポイント集
作成：2015/10/5 更新：2017/04/16 Web制作 > 開発環境 スマートフォンサイト構築時のコーディングで気を付けたいポイントを次回コーディングの時のためにメモしておきます。 エンジニア速報は Twitter の@commteで配信しています。 全般 viewport デバイスを横向きにした時の処理一例です。 一般（ページ拡大表示）ピンチアウト/ピンチインOK。通常はこれを使うことが多い。 <meta name="viewport" content="width=device-width"> サイズを変更せず、ピンチアウト/ピンチインOK <meta name="viewport" content="width=device-width,initial-scale=1.0"> 2倍に拡大した状態でページ表示 <meta name="viewport" content="wi
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
CSSのフォントサイズの指定の仕方 - Qiita
基本 px pxとは、画面の色情報を持つ最小単位 例えば、font-size:16pxのときに1文字は、1pxが縦16個・横16個並んだの正方形の中に表示される em emとは、1文字分を表している単位 ページでfont-sizeを何も指定していない場合、どのブラウザでも16pxなので、1em=16pxになる emの由来 emは印刷業界で用いられていたもので、組版における相対的な長さの単位。emという呼称は大文字Mに由来しており、古くはMの活字の字幅とボディサイズがほぼ一致し、正方形に近かったため mではなくemなのは、ラテン文字のＭの名称がemで、発音も/em/であったため rem rem (root em) は、常にルート（html）要素を基準にしたem emは親要素を基準にする emや%で指定すると、親要素の影響を受けてしまうので文字サイズの調整に手間がかかることがある % %とは、
【WordPressでCSSが効かない場合の対処法】 - Webサイト専門プログラマの言いたい放題
ワードプレスだとCSSが効かないことがある 「静的なHTMLサイトの場合は問題なくCSS（スタイルシート）が書けるのに、ワードプレスだとCSSが効かないことがある 。いったい何故？」という体験をしたことはありませんか？ なぜワードプレスでCSSが効かないことがあるの？ 結論から言いますと、「他のCSSのほうが優先順位が高いから」です。 ワードプレスで作ったページをブラウザで開いて、ソースの内を見てみると、多くの場合次のようになっています。 <head> ・・・ <link rel="stylesheet" src="●●●/テーマ名/style.css" /> ・・・（１） <link rel="stylesheet" src="別のCSS" /> ・・・（２） <link rel="stylesheet" src="別のCSS" /> <link rel="stylesheet" src
CSSで印刷レイアウトをコントロール
Webサイトを制作する上で印刷された時の見栄えを考慮しなければならないことがたまにあります。 考慮しないでコーディングをしてしまうと印刷時にコンテンツが複数ページにわたってしまい変なところで別ページに分割されることがあります。 それをこんな感じに綺麗に改ページを行うためのHTMLの構成とCSSの組み方を考えてみます。 ※Chromeを使って確認したコードなのでChromeで確認して下さい。 HTML構成 まず、HTMLの構成から考えてみます。 １つのページは<section>タグを使用します。 そして、複数のページを<article>タグでまとめます。 つまりHTMLとしては下記のような構成になります。 <article> <section> <h1>１ページ目</h1> </section> <section> <h1>２ページ目</h1> </section> <section> <h
フォームのIME-MODEを指定する - CSSテクニック - acky info
positionを使ったCSSテクニック テキストリンクをpositionでずらしてクリック感をつける フォームのradiobutton、checkbox、selectのずれを調整する positionプロパティのrelative、absoluteの簡単な使い方 フォームに関するCSSテクニック :focusを使って入力中のフォームに背景色をつける 検索ボックスのデザインをCSSで整える フォームの送信ボタンにロールオーバーをつける フォームのradiobutton、checkbox、selectのずれを調整する フォームのIME-MODEを指定する 疑似クラスを使ったCSSテクニック liやtr、tdの背景色を交互に付ける :focusを使って入力中のフォームに背景色をつける テキストリンクをpositionでずらしてクリック感をつける 検索ボックスのデザインをCSSで整える フォームの
IE11のダブルタップ・ズーム無効で艦これが捗る
普段使いではけっこう便利なタッチパネル操作におけるダブルタップのズームだけど、やはり艦これやってるとウザイと思ってしまうこともあるわけで…開発と建造、お前たちだーッ！ …はぁはぁ… なので無効化できないかなーと調べていたところ、マイクロソフトコミュニティにてInternet Explorer操作中にダブルタップの動作を変更することでズームを無効化する方法を発見したのでした。IE限定だけどまぁ自分はSurface2使いなんで他のブラウザなんて存在しないしー。ブラウザによってはダブルタップ時の挙動を変えられるものもあるはずなので調べてみるといいですね。 以下上記リンクを参考にした手順。Internet Explorer 10以降限定なのでWindows 7搭載のタブレットPCでIE10を積んでいればお試しも可能…かな？ メモ帳を起動する(スタート画面で「notepad」とタイプして検索するなど
ホームページ制作なら渋谷のウェブ制作会社【スタイル】
【スタイル】は東京都渋谷区でホームページ制作を行うウェブ制作会社です。ウェブサイト制作、SEO対策、ウェブマーケティングなどを承っています。良質テンプレートでの格安ホームページ制作プランもあります。
紙面に近づけたい！HTML＋CSSで作る文字レイアウト12個 | PRESSMAN*Tech
印刷する紙のデザインと異なり、Webデザインは環境によって見た目が変わります。どの環境でも同じレイアウトで見せるには画像として書き出せば確実なのですが、テキストの部分はそうもいきません。 DTPデザイナーの方からも「こんな文字のレイアウトはWebだと無理？」といったご相談を受けることがよくあります。 今年に入って、HTML5＆CSS3に対応したブラウザのシェアもかなり増えてきましたので、今回は文字のレイアウトに関するHTMLとCSSをご紹介したいと思います。 目次：段組み縦組み（縦書き）行末揃え（両端揃え）先頭文字スタイル（ドロップキャップ）段落先頭1字下げ2行目から1字下げ（ぶら下げインデント）行頭禁則文字ふりがな（ルビ）圏点（傍点、脇点）大文字と小文字の変更スモールキャップス（スモールキャピタル）長体、平体（水平比率、垂直比率）※IE以外のブラウザは、2014年7月4日現在の最新版にて
デザイナーやディレクターも知っておきたい、ページ表示速度の高速化の基本
スマホからウェブにアクセスするユーザが増え、ウェブサイトの表示速度の高速化がより重要な制作の課題になっています。1ページもののサイトなら、フロントエンド・エンジニアが一人で実装できるかもしれませんが、ある程度の規模のウェブサイトではワークフローやサイト全体の設計にも関わってきます。また、表示速度の高速化の方法を知らなければ、最適化しやすい、より高度なデザインは実現できないでしょう。エンジニアだけでなく、デザイナーやディレクターがこういった情報を知っていれば、よりスムーズに結果を出せるウェブサイト制作ができるはずです。 ページ表示速度の改善にはいろいろな方法がありますが、この記事では一番効果がありそうなところから攻めていきたいと思います。自分もまだまだ勉強中なので、まずはfilament groupのScottさんの記事 やClearleftのJeremyさんの記事 を参考に、フロントエンド
cssとは？使い方と学び方の基礎まとめ - プログラミング学習の窓口
プログラミングの基礎であるhtmlを勉強していると、必ず出てくる言葉がcss。 現代のwebサービスにおいて、htmlとcssはいわば兄弟のようなもので切っても切れない関係と言えるでしょう。 では、cssとはいったいどういうものなのでしょうか。 簡単に言うと、Webページの文字の色や大きさ、背景、配置といった見た目を設定する言語の一種です。 静的ページも動的ページも見た目の部分の多くはこのcssで制御されています。 もしcssを詳しく学ぶなら、独学もいいですがプログラミングスクールがおすすめです。費用は当然かかりますが、アドバイスがもらえることと、学習スケジュールが管理されるので、強制的に頑張れる仕組みが作れるのもメリットと言えるでしょう。 The post cssとは？使い方と学び方の基礎まとめ first appeared on プログラミング学習の窓口.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
text-shadowを使ってテキストにさまざまなスタイルを与える全23種類のスタイルシートのまとめ | コリス
Redirecting