ボックス要素の中にテキストが入る場合、縦方向の中央に揃えたいときがあると思います。 その場合どのように配置しているでしょうか。 インライン要素の場合は「vertical-align: middle;」を使えば中央に揃えことができるのですが、 pタグのようなボックス要素の中にテキストを入れたい場合、 うまいこと配置できないことがあり、 今回は、縦方向の中央揃えについて調べてみました。
テキストの縦方向の中央揃えについて - Qiita
ボックス要素の中にテキストが入る場合、縦方向の中央に揃えたいときがあると思います。 その場合どのように配置しているでしょうか。 インライン要素の場合は「vertical-align: middle;」を使えば中央に揃えことができるのですが、 pタグのようなボックス要素の中にテキストを入れたい場合、 うまいこと配置できないことがあり、 今回は、縦方向の中央揃えについて調べてみました。
box-shadow を使って複数の border を付ける方法 - Qiita
CSS を使って 1 つの要素に複数の border を付ける上手い方法 1 はないものかと調べていたところ CSSで複数のボーダーを付ける方法 | Ri-mode Rainbow | No:1134 という素晴らしい記事を見つけたので実際に試してみました。 こんな感じの枠が作れます。(HTML 内の記述は div 1 つだけです) このテクニックは CSS3 で導入された box-shadow プロパティを使って擬似的に border を実現するというものです。box-shadow には複数の値を指定できるという仕様を応用します。 確認したブラウザは Google Chrome (42.0), Firefox (35.0), Opera (27.0), IE 9 ～ IE 11 です。 box-shadow で枠を付ける方法 以下のように box-shadow : 0 0 0 <幅> <
Windows版php 5.5(xampp 1.8.3)でImageMagickを使えるようにする - eps_r
（追記）記事執筆当時はバージョンの適合がうまくない時期に引っ掛かっていたようなので、現在は別の解決法があると思います。 Windows7ローカルでもImageMagickくらい動くだろと思ってたら意外とややこしかった。 インストール ImageMagickのdllを含むWindows向けバイナリ(ImageMagick: Install from Binary Distribution) ただし今回は最新の6.8.9でなく6.7.0を SUNET's Index of /pub/multimedia/graphics/ImageMagick/binaries から導入した PECLのphp_imagick.dll 対応するバージョンで、スレッドセーフのやつを php/ext/ に放り込んで php.ini に extension=php_imagick.dll を追記する VCランタイム(
WindowsでxamppのPHPにImageMagickをインストール - モーグルとカバとパウダーの日記
CakePHPでPDFファイルを画像に変換するために、ImageMagickをインストールする必要がありました。 で、いろんなエントリーでWindowsのxampp環境にImageMagickをインストールするのは結構大変、と書いてあったのですが、確かにわかりにくかったのでメモ。 こちらのエントリーが一番簡潔にわかりやすくまとまっていました。 XAMPP環境でImageMagickをインストール | Styler 下記説明もほぼ同じなのですが、Ghostscriptを日本語版にしています。 VC++2008ランタイムのインストール 32bit Windowsの場合 Microsoft Visual C++ 2008 SP1 再頒布可能パッケージ（x86）インストーラ http://www.microsoft.com/ja-jp/download/details.aspx?id=5582 6
【第2弾】少しのコードで実装可能な20のCSS小技集
2019年5月17日 CSS はるか6年前に書いた記事「少しのコードで実装可能な20のCSS小技集」の第二弾です！（スパンながっ）簡単なコードで素敵な効果が得られる小技をダダっと紹介してみます。前回に引き続き、初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ 目次 画像を丸く表示 1本線のテーブル 1本線の水平線 線色を指定しなくても文字色と同一色になる 複数の背景画像 背景画像のサイズ Webフォントを使う 画像をモノクロやセピアにする リストマーカーの色を変更 グラデーション グラデーションボーダー フラットだけど立体的ボタン 画像をぼかす レスポンシブに対応した動画 要素を真ん中に配置 カンマで分けたリスト 文字を縦書き フォーカスすると伸びるテキストボックス iOSでボタンのスタイルをリセット 線のオフセット設定 HTML・CSSの全
エラー箇所など指定した要素にスクロールで移動する
photo by mollyali 縦長Webページの入力フォームなどで、バリデーション後にエラーを表示したいことがある。その方法はいくつもあるが、今回はエラー箇所にスクロールで移動する方法を実装する。 ※サンプルではjQueryを使用しているが、使わなくても対応可能（アニメーションが面倒だけど） 特定の要素にスクロールで移動する var position = $('セレクタ').get(0).offsetTop; $('body').animate({scrollTop: position}, 'slow'); 要素の位置を取得するには $('セレクタ').get(0).offsetTop を使う。 $('セレクタ').offset().top で位置を取得するとズレる場合があるので注意。 また、複数ある要素のうち1番目に移動したい場合は、 $(‘セレクタ:first’).get(0).
いい加減、<script src="http://.. と書くのはやめましょう - DQNEO起業日記
外部サイトのJSファイルを読み込むときに、こういう書き方するのはやめましょう。 <script src="http://example.com/js/jquery.js"></script> 理由 あなたのサイトが、いつの日かSSLに対応することになったとき、そのscriptタグがバグの原因になります。 ご覧のとおり、HTTPSページの中でHTTP要素を読み込もうとすると、ブラウザによっては安全装置が働いて読み込んでくれないのです。 上の例ではjQueryの読み込みに失敗していますが、エラーメッセージ「Uncaught ReferenceError: jQuery is not defined 」を見てもHTTPS/HTTPのプロトコルが原因だとはすぐ気づかないので、わかりにくいバグになってしまいます。 結論 JSファイル(とかCSSとか画像とか)を読み込むときは、"http:"の部分を省
CSS 3のセレクタ：最初と最後、偶数と奇数の要素にスタイルシートを適用 - builder by ZDNet Japan
今回から、CSS 3の草案「Selectors」で新しく追加されたセレクタについて紹介していきたい。これまでCSS 3のセレクタに十分に対応しているのはOperaだけだったが、FirefoxがFirefox 3.1（ベータ版）で、SafariもSafari 3.1で対応を進めたことにより、Internet Explorerを除く主要なブラウザで利用できるようになった。 今回は、「:first-child」と「:last-child」、「:nth-child()」と「:nth-last-child()」を紹介する。これらのセレクタを利用すると、最初と最後の要素や、指定したナンバーの要素、さらには奇数と偶数の要素に対してスタイルシートを適用することができる。そのため、これまでのように余計な やクラス名を追加することなく、さまざまなデザインを設定できるようになる。 たとえば、こうしたセレクタを利
CSSで文字テキストを非表示にする（隠す）方法 | SSC
今回はスマホサイト作成で作業を続けていく中で見つけた「小ワザ」をご紹介します。 合法的に（？）CSSでテキストを非表示にしたい タイトルロゴ画像を表示して、附随するテキストは隠したい、そんな時。 これまでは、text-indent:-9999pxでテキストを飛ばして画像に置換する方法が多く使われてきました。 しかし、それでは、9999px分の領域を使う分パフォーマンスも悪くなってしまい、更にはSEOスパムだと思われてしまう可能性があることから、最近は好まれなくなってきました。 参考サイト：text-indent:-9999pxでテキスト飛ばさなくてもテキスト非表示にして画像に置換できる方法 | delaymania それすら、今回の制作を通して知ったのですが…… 『ロゴのテキストを残しつつ画像を表示させるには〜？』と悩んでいた時、岡部さんが、『このクラス使えば〜？』↓ と。 .clearT
PHP で PDF のサムネイル画像を作成する - まいける's Tech Blog
必要に迫られたので、ちょっと調べてみたところ、意外に簡単。前提として、imagick モジュールが必要となるので、このあたりを見ながらインストールを済ませておいてください。 それで、その方法ですが <?php // 読み込む PDF をフルパスで指定 $file = '/foo/bar/test.pdf'; // サムネイルを作成するページを指定 $page = 1; // 実際の指定では、1ページが0になるので、調整 $page = $page - 1; $im = new imagick($file[$page]); // PNG 形式に変換 $im->setImageFormat("png"); // 長辺が 300 ピクセルになるようにリサイズ $im->thumbnailImage(300, 300, true); // 表示 header("Content-Type: imag
大きな背景画像を使った魅力的なWebサイトを作ろう
2014年9月9日 CSS, Webデザイン 以前このブログで背景に動画を使ったWebサイトの作り方を紹介しましたが、やはり動画を準備するのは少しハードルが高いと感じる人もいますよね。そこで今回は導入しやすく印象に残りやすい、大きな背景画像を用いたWebサイトの作り方を紹介します！ ↑私が10年以上利用している会計ソフト！ 背景に大きな画像を使うメリット・デメリット 大きな背景画像のメリットは、なんといってもその迫力です。言葉を使わずとも、そのWebサイトを通じて伝えたいイメージをストレートに表現できます。その写真が高画質で、クオリティが高いほど印象にも残りやすいので、近年海外を中心に多くのサイトで用いられている手法です。 しかし、いくつかの注意点をおさえておかないと、どんなに素敵な写真であっても効果が半減してしまいます。ひとつは画像が大きければ大きいほど、ページの読み込みに時間がかかって
Webデザインにシャドウを取り入れる時のポイントいろいろ
2016年3月10日 CSS, Webデザイン 要素に加えれば、画面に立体感をもたらすシャドウ。なんだか最近シャドウを取り入れたデザインをよく見かけるので、今回はシャドウを使う時の注意点やコツをまとめてみようと思います。 ↑私が10年以上利用している会計ソフト！ If you took a 3 year break from UI design, now you're all caught up: pic.twitter.com/4pdL17dXaF — Dylan Jones (@tDJ) March 2, 2016 このTweetにも描かれているとおり、1年周期でシャドウの扱いが変わっていますね。2014年は影なしの完全フラットデザイン。2015年はロングシャドウ。そして2016年はこれから紹介するぼんやりふんわりシャドウ。 CSSで実装するシャドウの基礎 通常のシャドウ 要素にシャド
美しいグラデーションをCSSで実装！配色に使える便利ツールや実例も！
2020年5月18日 CSS, Webデザイン, 便利ツール 背景に動画を使ったWebサイトや、大きな背景画像を使ったWebサイトに続き、最近は画面全体にきれいなグラデーションカラーを用いたサイトを見かける機会が増えてきました。そこで今回はグラデーションカラーをCSSで実装する基本的な方法から、画像に重ねる応用、配色選びに使えるサイト、実例集などを紹介します！ ↑私が10年以上利用している会計ソフト！ CSSでグラデーションを実装 グラデーションは background プロパティーに linear-gradient の値を使って色を指定します。意外と簡単。 body { background: linear-gradient(#05FBFF, #1E00FF); } See the Pen CSS linear-gradient by Mana (@manabox) on CodePen
Enterキーを無効にする方法 - Qiita
Enterキーを押すと、フォームが送信されることがある。 キーボード入力後、マウス操作してクリックする、という手間が省けてとても便利だと思う。 しかし、入力中にうっかり押してしまったりなど、期待しない挙動をしてしまうこともあるだろう。 この挙動は、HTMLの仕様がそうなっているからである。 ※ 古いブラウザでは以下の内容で対処できない場合があります。 ※ ブラウザの仕様が変わり、以下の内容では対応できなくなる場合があります。 対処方法① 送信ボタンを書き換える(テキストフィールドなどが2つ以上のとき) テキストフィールドなどがアクティブな状態で、Enterキーを押すとフォームが送信される。 <form name="testform1" action="test1.html"> <input type="text" name="text1" /> <input type="text" nam
imgタグで指定した画像の下にわずかな隙間（空白）が空いてしまう - CSSデザインノート
404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved
CSSのnth-childやnth-of-typeで表の縦(列)を一括装飾 [ホームページ作成] All About
表の列(縦方向)を一括装飾したい HTMLで作った表を装飾したいとき、行(横方向)単位だけでなく列(縦方向)単位で一括装飾したい場合があります。例えば下図の赤丸で示したように数値を掲載している列では、列全体を右寄せで表示したいでしょう。また、特定の列だけを強調したい場合には、縦方向に一括して背景色を加えたい場合もあるでしょう。 表の列をグループ化するcolgroup要素はあるが…… HTMLには、列をグループ化するためのcolgroup要素が用意されています。しかし、colgroup要素を使ってグループ化した列に対してCSSを適用する方法では、使える装飾の種類に制限があります。例えば、文字の表示位置の調整(センタリングや右寄せなど)はできません。しかも、装飾だけが目的なのにHTMLソースの編集も必要になってしまうため、作業が面倒です。 CSSだけで表の列を一括装飾する方法がある 表の列(縦
![CSSのnth-childやnth-of-typeで表の縦(列)を一括装飾 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/295eab3cc084e582820c15389455da67b677e600/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F4%2F0%2F5%2F3%2F4%2Ftopimg_large.jpg)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
margin,paddingにパーセント指定 : ねとめもー
html5-css3.jp - このウェブサイトは販売用です！ - リソースおよび情報
Javascriptで前のページに戻るを実装 - Qiita
nth-child() でx個目以降を指定するcss | eturlt.net