[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)
Webにも紙にも使える、囲み枠デザインの基本テクニック
2016年1月20日 Webデザイン テキストを四角で囲ったシンプルな枠。もちろんWebだけでなく、印刷物でも多く使われていますよね。今回は、デザインをする上では欠かせないと言っても過言ではないこの囲み枠にフォーカスしてみようと思います。新米デザイナーさんや、デザイナーじゃないけど資料作成をする機会の多い営業さんの参考になれば幸いです！ ↑私が10年以上利用している会計ソフト！ 呼び方は「囲み枠」で正しいのか…謎ですが、テキストを囲んでいるボックスのことです。海外では「パネル」「テキストボックス」等と呼ばれています。 こんな時に使うと◎ 強調する時 「今なら20％オフ！」「期間限定！」等、注目して欲しい要素に利用されます。Webサイト上ではアラートメッセージでよくみかけますね。図はBootstrapのアラート要素。 要素の差別化 補足や注意書きなど、メインのコンテンツと区別して表示したい時
【Webデザイナー必読】PhotoshopやHTMLなどのスキルを劇的に上げられる記事まとめ30選
Webデザイナーとしてのキャリアを歩み始め1年目。基本的なスキルを学び、業務をひと通りこなせるようになったものの、先輩デザイナーと比べると、差を感じてしまうという方もいるのではないでしょうか？ Webデザイナーはクリエイター系の職種であるため、「センス」が重要視されるシーンが多いです。しかし、“学び”によってスキルアップできるのもまた事実。むしろ、テクノロジーの発展が著しい業界ということから、プロとして仕事を続けるのであれば学び続けなければならないのは宿命かもしれません。 そこで、今回は「Photoshopを使ったデザイン」や「HTMLなどの言語を使ったコーディング」、「Webデザイナーとしてインプットしておきたい情報」に関する30記事をご紹介します。 Photoshopなど、デザインに関する記事10選1.良いデザインって？技術を学ぶ前に知っておきたいデザイン・レイアウトの基本的なこと こ
Flexboxで決まり！ | Webクリエイターボックス
2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が
背景のデザインに迷った時に！これから使ってみたい背景素材のまとめ
落ち着いたデザインにもあうシックなグラデーション、繊細な幾何学柄を使ったパターン、コピーやロゴを鮮やかに見せる背景など、アイデア満載ときめくようなデザインテクニックを使って作成されたものから定番ものまで、無料の背景素材を紹介します。
[WordPress]ダッシュボードの使い勝手を向上させるカスタマイズTIPS 10
ログイン画面のロゴ変更 まずはおなじみのカスタマイズから。 WordPressロゴをサイトのロゴに変更します。複数のメディアを運営している時などに判別しやすいです。 functions.php内 //ログイン画面のロゴ変更 function login_logo() { echo '<style type="text/css"> #login h1 a { background: url('.get_template_directory_uri().'/images/login_logo.png) no-repeat; width: 320px; height: 70px; background-size:100% auto; } </style>'; } add_action('login_head', 'login_logo');
![[WordPress]ダッシュボードの使い勝手を向上させるカスタマイズTIPS 10](https://cdn-ak-scissors.b.st-hatena.com/image/square/1c6e8d439bbe9e018807c9d2af64018ebe3412b1/height=288;version=1;width=512/http%3A%2F%2Fwebimemo.com%2Fwp-content%2Fuploads%2FDashboard-Customize-TIPS-10.png)
コピペだけ！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用
Webデザインのパーツを作る時参考になるパーツギャラリーサイト14サイト ｜https://wp.yat-net.com/name
2014年 12月 15日 Webデザインのパーツを作る時参考になるパーツギャラリーサイト14サイト カテゴリ： Webデザイン タグ：ギャラリーサイトデザイン作成まとめ Webサイトをデザインする際、「この部分のデザインどうしようかな？」っていう事が結構あるのですが、パーツに特化したギャラリーサイトがいくつかあるので、記事にまとめておきます。よく知られているサイトが多いのですが、是非ご参考になればと思います。 Croppy http://croppy.org/ twitter等で仲良くさせて頂いているなつきさん（@Stocker_jp）が運営されてるサイトです。自分が保存したいサイトのキャプチャをブラウザ上で切り取り、アーカイブにして掲載することが出来ます。 ブブンデザインアーカイブ http://bubundesignarchive.jp/ ブラウザに表示しているパーツをPhotosh
Webコンテンツの成果が上がるレイアウトの法則とは？ | 誰も語らなかったWebコンテンツ作成技法
優れたコンテンツ構成の鉄則を探る！優れたコンテンツとは顧客の悩みを解決できるため、検索やお気に入りから訪問者を獲得できます。そして、そのコンテンツは別のページに誘導する力があり、しかもゴールに結びつける力があります。 前回説明したように、こうしたコンテンツは、天才的なアイデアや人並みはずれた文章力で作られるのでしょうか。実際にはそうではありません。普通のビジネスパーソンが、普通に考え、普通の文章力で作ったものが成果を上げているのです。 意図的ではない分、成果が小さいことがもったいないのですが、これを意図的に行っていけば、狙った成果をより大きなものにできるはずです。それでは、コンテンツの成果が上がる構成とはどんなものなのか解説していきます。 コンテンツの見出しは画像を使わず2行のテキストで作る前回説明したように優れたコンテンツは、検索集客力が高く検索から顧客と出会う力を持っています。検索から
[続編] 効率的になった！最近のサイトで使われていたCSS小技集 - コムテブログ
TL;DR 前回（あのサイトでさりげなく使われていた CSS 小技集）の続きとなります。今回はマウス操作によりインタラクティブな動きを出したり、簡単にボックスを等間隔・等幅にしたりと CSS のみで実現できる方法を書いておきます。 インタラクティブ １．マウスオーバーで自動スクロールさせる 最近、マウスオーバーで縦長のページを部分的に見せる WordPress テーマが少しづつ出てきました。こちらは簡易的ながらマウスオーバーにて縦長の画像を見せるコードです。長めの画像を用意してはみ出した部分はoverflow: hidden;で隠しながらtransitionで遅延させ擬似的にスクロールしているように見せます。 html <div class="box-fixed"> <div class="field-wrap"> <div class="field-detail"></div> </di
![[続編] 効率的になった！最近のサイトで使われていたCSS小技集 - コムテブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/25fee8f1468dfd9f1f2b34b6da4ca43e4f44c4df/height=288;version=1;width=512/https%3A%2F%2Fcommte.net%2Fwp-content%2Fuploads%2Fai_css_interactive_trends.png)
[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)
和風デザインWebサイトの制作ポイントや素材を実例とともにまとめました
2017年7月14日 Webデザイン, ダウンロード, 色彩 今月はじめに初めて箱根旅行で洗練された美しい温泉宿に宿泊して以来、「和」な雰囲気やデザインの素晴らしさに魅了されたManaです。伝統的な配色や配置、書体等、見ていて飽きの来ない魅力がありますよね！和風デザインには大きく分けて4つの特徴があります。それぞれの特徴を理解し、うまくデザインに反映していきましょう！ ↑私が10年以上利用している会計ソフト！ 1. 配色 「和風デザイン」と聞いて思いつくのはどんな色でしょうか？おそらくビビッドなピンクや透き通るような水色ではなく、わさびやからし、えんじのような、少しくすんだ色合いを思いつく人が多いかと思います。日本には伝統的な色や配色というものが存在し、それらを上手に使うことでグッと和の雰囲気漂うデザインに近づきます。 伝統色 日本の伝統色 和色大辞典では日本の伝統色をカラーコードとともに
[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)
ログイン ‹ 夜職の世界｜ナイトワークのお悩み研究所 — WordPress
Powered by WordPress ユーザー名またはメールアドレス パスワード ログイン状態を保存する ← 夜職の世界｜ナイトワークのお悩み研究所 へ移動 言語
しっかりと理解しておきたい！レスポンシブWebデザインを使いこなすための9つの基本原則
レスポンシブWebデザインは、デスクトップやスマホやタブレットなどさまざまなサイズのスクリーンの問題に対する素晴らしい解決方法です。 レスポンシブWebデザインをより深く理解するための基本原則を紹介します。 9 basic principles of responsive web design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 レスポンシブWebデザインのツールもリリースされているので、ぜひ！ FROONT -Responsive Web Design Tool レスポンシブとアダプティブ Webデザイン フロー 相対的なユニット ブレイクポイント 最大限と最小限の値 オブジェクトのネスト モバイルファースト or デスクトップファースト Webフォントとシステムフォント ビットマップ画像とベクター レスポンシブとアダプ
知っておくと便利！あのサイトでさりげなく使われていた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">テストテストテ
【WEBデザイナー必見！】トップデザインに取り掛かる前にするべき事前準備などなど | ウェブ戦略・コンサルティング UNIONNET Inc.
2014.10.15 こんにちは！ 最近ササッキーと呼んでいただけるので、喜んでこの名前で記事書いていきます(｡･ω･｡)ゞ 本日は、 に感化され、これのデザイナーバージョンを公開しちゃおう！と思い立った次第です。 デザイナーがトップデザインする前にすべきこと、またその理由を4ステップで紹介しています。 前提として、ユニオンネットではディレクターさんに打ち合わせ～サイトマップ＆構成＆ワイヤーフレームを作成して頂いております。 よってその確認が最初のお仕事になります。 私の場合ですが、 の流れでトップデザインを制作しています。 目次 サイトマップの確認 ワイヤーフレームの確認 ディレクターさんとの打ち合わせ 参考サイトによるイメージ固め 手書きラフ デザインに落とし込み デザインのご質問お受けします 1.サイトマップの確認 まずは、サイトマップの確認をします。 どんなコンテンツがあるの？注力
初心者でも「45分」で作れる！ 高品質バナーの作り方！ | LISKUL
広告バナーって「ひとつや2つくらいすぐできるだろう」と思っていても案外時間がかかってしまいますよね。 Webサイト制作と同じように配色やレイアウトなどの一つひとつに迷ってしまう方も多いと思います。 実は私も最近までバナーを制作するのに2時間以上かかっていました。しかし「どうすれば速く簡単にバナーを作るのか」を繰り返し試行錯誤する中でやっと見つけたのがこの方法です。この方法を身につければ誰でも1時間足らずで効果の高いバナーを量産することができると思います。 各制作ステップの見出しの横に実際にその作業にかかった時間も記載していますので、これをひとつの制作時間の目安として参考にしてください。 またこれまでに公開しているバナーの基本ルールやレイアウトの記事も紹介しておりますので、そちらも合わせてご覧いただけるとバナーに関する理解も深まると思います。 コンバージョンする！高品質なバナー作成方法 そも
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
