[CSS]高さが分からない要素やテキストを中央寄せに配置するスタイルシートのまとめ
テキストやdiv要素など、高さが分からない要素を外側の容器の高さが不明でも、上下・左右・上下左右・ビューポートの上下左右の中央寄せに配置するCSSのテクニックを紹介します。 イラスト: Girls Design Materials 2016年1月12日にIEの古いバージョンのサポートが終了し、Windows 7/8はIE11、VistaはIE9がサポートブラウザになりました。Vistaはアレなので、実質IE11を考えてWeb制作をすればよいことになります。 参考: Internet Explorer サポートポリシー変更の重要なお知らせ そんなIE11時代、そして万が一のIE9を考慮した中央寄せに配置テクニックを紹介します。 テキストや要素を左右の中央寄せに配置 テキストや要素を上下の中央寄せに配置 テキストや要素を上下左右の中央寄せに配置 テキストや要素をビューポートの上下左右の中央寄せ
![[CSS]高さが分からない要素やテキストを中央寄せに配置するスタイルシートのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/e06dab83915ff3fa91a0d356ebe7f551b51c01f7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016012101.png)
今こそ見直したい！ 元Apple Storeスタッフが教えるバッテリー消費を改善する8つの方法
どうもハンサムクロジです。 みなさん、iPhoneのバッテリーは長持ちしてますか？ 新iOSのアップデートがリリースされた直後などはバッテリーの持ちに関する話題が大きく取り沙汰されますが、そういった分かりやすいきっかけが無いと、バッテリーの持ちが悪くても対処方法が見つからなかったりしますよね。 ということで今回は、Apple Storeの元スタッフが教えるバッテリー消費を改善する8つの方法をご紹介したいと思います！ バッテリーの異常消費が無いかチェック まずはiPhoneのバッテリーが異常消費されていないかチェックしてみましょう。 設定アプリを開いて、一般→使用状況→バッテリーの使用状況と入り、そこで「使用時間」と「スタンバイ」を比較します。iPhoneの画面を常に開いていたのでなければ、使用時間とスタンバイに差があるはず。差が無ければバッテリーが異常消費されている可能性があります！ 上の
Flexboxで決まり！ | Webクリエイターボックス
これからのCSSレイアウトはFlexboxで決まり！FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ 対応ブラウザーCan I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari 用に -webkit- のベンダープレフィックスが必要です。IE については 11 から正式に対応。IE10 にも対応していますが、書き方が少し変わって
Illustratorを使うとき、私が手放せない10個のスクリプト｜DTP Transit
最近、セミナーでスクリプトを紹介すると評判がよいので、10個選りすぐってみました。 これらを提供してくださっている作者さんたちに感謝します。 はまりどころを見つけると「むちゃくちゃ早く終わる」「手作業ではムリ」なことが実現できるので、「ここでこういうことができると快適になるのに」をリストアップしておいて、たまに棚卸ししてみるとよいと思います。 追記 2017更新版を公開しました。 Illustratorを使うとき、私が手放せない10個のスクリプト（2017更新版）＋ 入手できるスクリプト一覧 - DTP Transit なぜ、スクリプトを使うの？ Illustratorでの作業を効率化するには、キーボードショートカットやアクションを使う方法がありますが、そもそも次のような場合には、有償のプラグインを使うほか、スクリプトを使う方法があります。 Illustratorではできないこと できるけ
コピペだけ！CSSでWEBデザインの幅が広がる便利テクニック集 | Code部
なるべくスマートなソースで効率良く実装したいの開発者というもの。そんな方のためにCSSだけで様々なデザインができてしまう疑似要素と疑似クラスの活用方法をご紹介致します！吹き出しデザインなどのよく使うテクニックも紹介していますので、ぜひご覧るださい！前回の『知らなきゃ損！?リンクの色をお洒落に変えるCSSテクニック！』では擬似要素と擬似クラスの基本的な概要と使用例をご紹介しました。今回の実践編では、擬似要素と擬似クラスを応用した実践的なデザイン＆コーディングテクニックをご紹介していきますね！実践編では、基礎編でご紹介できなかったプロパティも登場します。どれも便利なプロパティなので、是非使い方を抑えて頂ければと思いつつ、それでは早速、実践的な使用例をご紹介していきますね。 擬似要素や擬似クラスの実践的な使用例 色違いのリスト 擬似クラス:nth-child()を使ってリストの偶数行と奇数行のス
ノンデザイナーでもできる！写真を使ったイケてるメイン画像の作り方 - CAMPHOR- Tech Blog
こんにちは、あんみつ（@murata_atsumi）です。 この記事はCAMPHOR- Advent Calendar 2014の20日目の記事です。 私ブログが超苦手で普段からあんまり書かないから、何書こうか迷ったのですが、 一応CAMPHOR-には主にデザインの部分で関わることが多いので、 デザインのことを書こうと思います！ はじめに エンジニアの皆さん、そしてそうじゃない皆さんも、たまに『メイン画像』を作らなければいけないときがあるんじゃないでしょうか。 メイン画像というのは、こういうのとか （引用：https://www.cyberagent.co.jp/recruit/fresh/internship/ ） （引用：http://tokyometro10th.jp/future/opendata/ ） こういうのとかですね。 または、Facebookページのカバー画像や、OGP用
Photoshopで、1枚のレイヤーから線画だけ抽出する方法
MS Office カテゴリ MS Office (107) 関連タグ Access (46) Excel (94) OfficeScripts (2) PowerPoint (8) Python (4) VBA (92) YouTube (8) イラスト (45) 入門 (39) Web カテゴリ Web (85) 関連タグ facebook (4) jQuery (10) linux (3) Photoshop (18) PHP (24) tips (23) twitter (10) WordPress (76) YouTube (8) アプリ (29) イラスト (45) デザイン (15) ブログ (40) 入門 (39) 分析 (21) Adobe カテゴリ Adobe (28) 関連タグ facebook (4) Fresco (2) Illustrator (8) JavaS
[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)
[CSS]box-shadowを使って、三連リングのようなカワイイ囲いを作るテクニック
三連リングのようなカワイイ囲いをスタイルシートで実装するテクニックを紹介します。 左のSingleだと、divは一つだけ！ 左のSingleを例に、実装方法を紹介します。 HTML div一つにclassを加えます。 <div class="hoja">SINGLE</div> CSS 複数のリングは、box-shadowで作成します。アニメーションさせたくない場合は、keyframesは必要ありません。 ※利用する際は、ベンダープレフィックスを加えてください。 参考：面倒なCSS3のベンダープレフィックスを自動で付与するスクリプト -Prefix free .hoja { color: #dcdce2; position: absolute; top: 50%; left: 50%; margin-left: -180px; margin-top: -90px; width: 180px
![[CSS]box-shadowを使って、三連リングのようなカワイイ囲いを作るテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/bef7bf928dc917611c060c7f63ae5b39c925d844/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014112601.png)
[CSS] スマホ対応は超重要! 私が最低限やっている6つのこと | ヨッセンス
こんにちは! ヨス（プロフィールはこちら）です。 今現在、Google検索では「スマホ対応」がされているかどうかは超重要になっています。 具体的にいうと、PCの検索順位はスマホでの検索順位が適応されているのです！ 今回は、ブログのスマホ対応でのポイントをくわしく解説します。 スマホ対応で困った6つのこと 今回は私がスマホ対応のために最低限やっている6つを紹介するのですが、分かりやすいように「問題点」を見出しにして紹介しますね。 スマホで見たら画像がはみ出す?! まずはこちらの比較画像をご覧ください。 画像サイズ（左: 変更前・右: 変更後） スマホで見た時に、上画像の左側のような画像を見たことありませんか? これは画像サイズがパソコンのままになっているんですね。大きいのではみ出しています。 これをスマホで見た時は自動で上画像の右側のように縮小してほしいんです。 でも大丈夫! CSSの<im
![[CSS] スマホ対応は超重要! 私が最低限やっている6つのこと | ヨッセンス](https://cdn-ak-scissors.b.st-hatena.com/image/square/f65ab4b0dcf3e460e3895ac786ca89120feaa297/height=288;version=1;width=512/https%3A%2F%2Fyossense.com%2Fwp-content%2Fuploads%2Fcss-for-smartphone-300.jpg)
WordPress：最初・最後・奇数・偶数の記事にそれぞれclassを付けたり、表示内容を変更する方法 - NxWorld
実装方法を教えてもらったので、復習も兼ねた備忘録です。 WordPressで記事を表示する際に、特定の件数時にclassを付けたり表示する内容を変更させる方法です。 やろうと思えばスタイルの調整とかclass付ける程度であればCSSやjQueryで疑似classを使って実装することも可能ですが、中身をガラッと変えるときや特定の件数後に何かを表示させたいというときなどに非常に便利です。 最初とそれ以外とでclassを変更する たまに実装しているブログを見かけることもある、記事一覧などで最初の記事だけ背景色や文字サイズを変更するといったことをやりたいときに便利な方法です。 実装にはまずfunctions.phpへ下記のように記述します。
知っておくと便利！あのサイトでさりげなく使われていたCSS小技集 - コムテブログ
TL;DR 2014/12/01：続編である「最近のサイトで使われていた CSS 小技集」を書きました。 今回は CSS のみで実現できるもの、動きあるエフェクトやこれから使用頻度が高くなりそうなものをメモしておきます。さり気なく使いたい CSS テクニックです。 画像 １．キュレーションサイト風のランキングボタン キュレーションサイトがサイドバーに「よくつけてる」ランキングボタンです。counter-incrementで数値を増加させ、content: counter()でカウンターを表示します。人気の記事を表示させる WP プラグイン等と組み合わせるといいですね。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 html <ul class="sample"> <li><img src="xxx.png" /><span class="post-title">テストテストテ
Tips_パスに沿ってオブジェクトを並べる – イラレラボ illustrator-labo
単純なオブジェクトなら簡単です。散布ブラシを使えばよろしい。ですが、並べたいのはグラデーションやら効果やら使った複雑なオブジェクトです。ブラシを使う方法は使えません。CC以降ならラスタライズしてしまえば可能ですが…。 実はけっこう以前からどーにかできないか悩んでいたネタです。 今回@AJABON氏がスクリプトを描いてくれたのでパスに沿って回転しない方法ならば解決しました。 パスに沿って回転させる方法は未解決なので誰か思いついたら教えてください。 オブジェクトはシンボルパネルにドラッグして登録しておきます。 楕円ツールでシンボルの幅と同じ直径の円を描きます。 ブラシパネルにドラッグします。散布ブラシにチェック、数値はそのままで登録します。 沿わせたい基準にするパスに散布ブラシを適用し、オブジェクトメニュー ＞ アピアランスを分割 し、グループを解除します。（ブラシのパーツの円とブラシ定義用の
構図を考えれば写真はもっと上手くなる！！色々な構図を知ろう
前回の記事では、三分割構図に関して詳しく紹介しました。 【写真を上手に撮るコツ】iPhoneでも出来る三分割構図！！ | hideaki matsubara 今日も良いhide 簡単に言うと構図とは、 「どんなバランス・配置で、目的としているの物を撮影するか」 という事です。 構図には、色々な種類があります。 詳しい説明はちょっと割愛させていただきますが、 今回は、写真付きで構図の紹介をしていきたいと思います。 カメラを買ったけど、なんだか写真がイマイチの方も、 スマホで撮影する方も、是非とも参考にしてみて下さい。 それではいってみましょう!! ▼写真撮影に使える8つの構図をご紹介！！ 1.三分割構図 2.シンメトリー構図 3.日の丸構図 4.対角線構図 5.斜線構図 6.対比構図 7.パターン構図 8.山型構図 1.三分割構図 前回詳しく紹介した三分割構図。 構図の中ではもっともポピュラ
【Illustrator】オープンパスで線の位置を変更する（内側・外側）方法
CSから追加された「線の位置」機能、あれ、オープンパスにも使いたいですよね。というわけで、今回はオープンパスで線の位置を変更する方法をご紹介したいと思います。 完成予定図（使用ソフト：Adobe IllustratorCC2014） CS6で動作確認済み。CS5からできると思います。 Step0 はじめに 「ピクセルグリッドに整合」は解除 「ピクセルグリッドに整合」設定をしていると、上手くいかない事があります。この方法を試す時は、必ず設定を解除するようにしてください。 最後の補足をよく読んでご利用ください！ 後ほど詳しく説明しますが、この方法は可変線幅プロファイルを使用し「移動しているように見せているだけ」ですので、注意しなければならないことがあります。必ず最後までチュートリアルをお読みください。 Step1 直線ツールで線を引く 直線ツールで線を引きます。 直線ツール/Line Segm
Photoshopを使ってシネマグラフを作る方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
動画を準備する シネマグラフの完成度は動画のできにかかっています。主な条件は以下の3つです。 ネマグラフがうまくできる条件 1. カメラが固定されていること シャッターを押すちょっとしたブレでもつなげると気になったりするので、三脚＆リモートシャッターなんかがあるといいと思います。 2. ループの繋ぎ目が気になりにくい動きであること 髪の毛のふわふわとか水がチョロチョロ流れる動きなど、動きが単純で短い時間でも成立するものが向いています。しかしこういった動きはすでによく使われていて、マンネリなのも事実ですね……。アイデアをひねり出すのが一番大変な作業かもしれません。 3. 動いてる部分の背景に動きがないこと 後で詳しく説明しますが、動画の上に静止画を置いて、動かしたい部分に穴を空けるというのがおおまかな手法なので、動かしたい部分以外にちょっとでも変化があると違和感が生まれます。 以上の点を踏ま
[CSS]紙、ステッチ、リボンなどのかわいいエフェクトを簡単に実装できるコードをまとめたスタイルシート -Beemuse
p, div要素などで実装したシンプルなHTMLに紙やステッチのかわいいスタイルを簡単に実装できるスタイルシートをまとめたフレームワークを紹介します。要素を少し増やすとリボンも簡単に実装できます。 Beemuse Beemuse -GitHub 使い方は簡単、CSSファイルを外部ファイルとして記述し、あとはHTMLにclassを追加するだけで、さまざまなかわいいスタイルを利用できます。 <head> ... <link rel="stylesheet" type="text/css" href="css/beemuse.min.css" /> </head> 各デモは:before, :after の疑似要素を使用しているため、IE8+でご覧ください。一部のスタイルはIE10+になります。
CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。
Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 任意の値 height: 任意の値 これだけ。これだけで親要素に対しての上下左右中央寄せを実現できます。 追記： 親要素にはposition: absolute;かposition: relative; を設定してください。body に対してセンター寄せしたい場合はそのままでOKです！ 今までtop とleft の値を50%にとって、要素の高さと幅の分だけマイナスのmarg
[CSS]ぼよよーんと気持ちいいアニメーションでエレメントをページに表示させるスタイルシートのテクニック
パネルを構成する画像、ラベル、見出し、テキスト、そして全体をそれぞれ個別のタイミングでぼよよーんと気持ちよく弾むアニメーションで表示するスタイルシートのテクニックを紹介します。 使いどころは限られるけど、こういうの好き。 bounceIn animated 実装はこんな感じになります。 HTML HTMLは、画像、ラベル、見出し、テキスト、ラッパーの5つで構成されています。 <div class="cu-card animated bounceIn"> <div class="cu-card-image animated second bounceIn"> <img src="http://placehold.it/640x360/99ff99/ffffff" /> <div class="cu-card-label-group animated third bounceIn"> ラベル
WordPress：プラグイン有効時に読み込むCSSやJSを削除する方法 - NxWorld
WordPressでプラグインを使用する際、プラグインによっては見栄えを整えたり動きを付けるために独自のCSSやJSを自動的に読み込むものがありますが、多くの場合それらはプラグインの機能を使用していないページにまで読み込まれます。 それを特定のページでしか読み込ませないようにしたり、いっそのこと全ページから削除する方法です。 今回はプラグインを有効化するとCSSとJavaScriptがそれぞれ全ページで読み込まれるもので、WordPressを使ったことがあるなら多くの方が使用したことがあると思う「Contact Form 7」を例に説明します。 September 14, 2014 追記 エントリー公開時に紹介した方法はそれぞれwp_print_styles()とwp_print_scripts()を使用していましたが、これらはWordPress Ver 3.3から非推奨となっていました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
