position: absolute; の指定で要素が上下左右中央配置になる理由
人様の人気エントリーに乗っかる感じで恐縮ですが、「CSSで block 要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。」 という記事が話題になっていたので、なんでその指定で上下中央配置になるのか補足してみます。 詳しい話は下記のリンク先をご覧ください。 CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。 何でこういうことを書くかというとですね、例えば CSS でこういう指定をするとこう表示されるっていう話に関しては、仕様書を基準に話して欲しいのです。 「なんかよくわからないけどこういう風に書いたらこういう表示になった。よかったね」 で終わらせるのは個人の自由ですが、仕様書を基になぜそうなるのかの根拠を知るとより一層理解が深まると思いますので。 なので余計なお世話なんですが、下記に小難しく書きます。 解説のためのサンプルソース 例えば、下記の
DTP→Webデザイナー転向時に、これやったら捗ったよリスト13
元々DTPやってました 自分は大卒でとある広告メディア系の会社に入ったんですが、ずっとDTP（エディトリアルデザイナー）の仕事をしており、正式にWebデザイナーに転向したのは2012年頃の話です。 「このまま紙だけやっててもそのうち食えなくなっちゃうよなあ…」と思い、仕事のかたわらHTML/CSSをはじめとしたWebの勉強を始めました。一応HTMLかじったことはあるものの、知識は大学生の頃で完全にストップしており、floatって何？レベル。（テーブルレイアウト世代） 一念発起したはいいものの、いざ勉強をしようとすると色々と問題が生じるわけですね。 Photoshopでデザインなんてやったことない、Illustrator使いたい 呪文みたいなコードを延々と打つ作業がだるい うまく動かなくて一つのコード間違いで3時間潰れたりするのが辛い 本屋行けば技術書、入門書はいくらでもあるけど、逆に何選べ
いまWebサイトで流行ってる色 / Maka-Veli .com
CATK http://catk.de/ #513baa #6445e0 Frank Chimero http://www.frankchimero.com/ #00deb7 #5fe2ff #6144b0 #ff4a5d #fff3cd Prospek https://prospek.ca/ #46b085 Mixd http://www.mixd.co.uk/ #1c4bbe Flavor http://www.madebyflavor.com/ #f84c74 #9f6cc8 #4d9ff5 #4bdcb5 Build in Amsterdam http://www.buildinamsterdam.com/ #79a596 #222327 Socialist http://www.sociali.st/ #f53e2e #0b0b0b Square https://s
ウェブサイトで珍しい形を取り入れたサイト14こ紹介
creative memomemo Webデザインtips,Photoshoptips,クリエイティブでステキなものをまとめているブログ。 こんにちは。最近はブログメディアのデザインを作る機会が多くなってきました。井畑です。 ブログメディアはコーポレートサイトと比べ、よりデザインや装飾等で「個性」を出す場合が多くあります。どうしたらいいかなーと思って色々悩んで、「形」で個性を出すのもありかなと思い、ウェブサイトではあまり使われづらい三角形や五角形、六角形を上手く使っているサイトを調べてみました。 やはり印象に残るものが多かったです。それでは早速見てみましょう!どうぞ！ 三角形を使ったデザイン 三角形を使う場合、余白をどう活かすかが重要になってくると思います。 Snowbird Snowbird コンテンツのサムネイルが三角形です。マウスオーバーすると折り紙が広がるように画像が広がるのも面白
DISられないUIを作るために最低限守るべき5つの鉄則 - たごもりすメモ
ぼくらが迂闊にUIを作ると、そこにはユーザの正直な目線があり、非常に様々な、そして真っ当な反応がある。 曰く「わからん」「まさかそこをクリックするとは」「不思議な動作」「独自宇宙」「モリスUI」。 反応がもらえるのは非常に良いことだが、何度も何度も繰り返しているとつらくなってくるので、できれば避けたい。分かっている(いた)ことは最初から対応しておきたいものだ。*1 ということで、ここではブラウザで操作する管理画面等のWebUIを作るとき、真っ先に心得ておくべき5つの鉄則を紹介したい。これを守っていてもDISられなくなるというわけではないが、これを守らないと間違いなくDISられるので注意しよう。 なおこの記事ではオリジナリティというものについては考慮しない。オリジナリティとか犬に食わせろ。 クリックできる場所はcursor:pointerを指定しろ これを忘れるとこの世のものとは思えないくら
英国政府のWeb担当が作った“デジタルデザインの原則10か条”がスゴい！ | 初代編集長ブログ―安田英久
今日は、英国政府のWebサイトなどを担当する「政府デジタルサービス（GDS）」の部署が公開している「デザイン原則の10か条」について。「良いデジタルサービスを作り、運営していく」ためのポイントがコンパクトにまとめられています。 英国政府（gov.uk）のサイトには、「デザイン原則（Design Principles）」というページがあり、そこには、次のようなことが書かれています。 まずニーズからはじめる ―― 自分たちのニーズではなく、ユーザーニーズから。本当のユーザーを理解し、そのニーズを知る。想像や思い込みではなく、ちゃんとデータで。 なんでもかんでも手を広げず、するべきことだけをする ―― 政府がしなければいけないことだけをし、他の人がすでにやっていたら協力する。 データをもってデザインする ―― 試作し、実際のサイトで実際のユーザーにA/Bテストを行い、その結果をデザインに活かすや
HTMLテンプレートの基本ファイル一式、Webページを実装するための必要最小限をまとめたHTML
HTMLで、Webページやアプリを作成する時に役立つ、フロントエンド用に必要最小限をまとめたシンプルなHTMLの基本テンプレートのファイル一式を紹介します。 v.8.0.0がリリースされ、現在の環境に合わせた設計にアップデートされました。 IE11を含む、すべてのモダンブラウザをサポートしています。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基本テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerplateの特徴 HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基本テンプレートです。 実践的な基本のテンプレート 200人を超える貢献者による分析・研究・実験をもとにしています。 ブラウザの見え方を最適化 プログレッシブエンハンス
ウェブデザインをはじめるあなたへ - ウェブ雑記
ウェブデザインについてまったくわからない頃によく見て勉強してた資料群です。＋いくつかの自分で作った資料 SlideShare 色彩センスのいらない配色講座 色相、明度、彩度で色を説明できるようになる。 ベースカラー、メインカラー、アクセントカラーで配色を説明できるようになる。 その上で、あまり間違いのない色の選び方がわかるようになる。 ノンデザイナーのための配色理論 最後に紹介されているこのツールがベースカラー、メインカラー、アクセントカラーを決める上で便利。 ウェブサービスの企画とデザイン 僭越ながら明治学院大学で講義した時に作った資料。 なんとなくウェブサービスを作るときの流れとか感じてもらえたら幸いです。 かんたんキレイなウェブデザイン 僭越ながら勉強会 (UT Startup Gym) 用に作った資料。 なんとなく CSS フレームワーク、グリッドシステム、レスポンシブデザイン、ウ
[CSS] 直感的なCSS エディタを探す | pc.casey.jp
HTML は長らく使っているし、商用ソフト、フリーソフトなど知っている。HTML が文章を定義するものであったものから次第にデザインに利用されるようになり、スペーサーgif やテーブルレイアウトが一般的になりつつあった。このあと、CSS が登場してHTML は文章定義にもどり、デザインはCSS に書くようになった。これはSEO 対策の１つでもあった。 が、CSS はどういうわけか苦手で、その辺逃げ回っていた。といっても完全には逃げ切れないから、だましだましスクリプトの中に必要最低限書いたり、すでにできてい るものの改造程度くらいだった。だが、スマートフォンやデザインがより重要視されるようになってきたこともあって、この苦手な分野にももう少し理解を深め なければならないようだ。
![[CSS] 直感的なCSS エディタを探す | pc.casey.jp](https://cdn-ak-scissors.b.st-hatena.com/image/square/df38252b73e1063ba808064bd01bb36ad1f8a39b/height=288;version=1;width=512/https%3A%2F%2Fpc.casey.jp%2Fwp%2Fwp-content%2Fuploads%2F2012%2F01%2FXWSS008235-s.jpg)
初心者デザイナーにオススメ！アイディアの集め方とその活用方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの佐藤タカアキ（@sato_tkaaki）です。 突然ですが、柔らかいものは脳に快感を与えて、緊張を緩める効果があるって知っていますか？ 脳がリラックスすることにより、様々なアイディアが生まれるのだそうです。 日々の業務でアイディアに詰まってしまう時もありますよね。 そういう時はほっぺたを触ってリラックス…しても出ません、そんなんじゃ。 そこで今回は、デザイナーにオススメしたいアイディアの集め方とその活用方法をご紹介します。 なぜアイディアが浮かばないのか？ そもそも、どうしてアイディアが浮かばないのでしょうか。 感性が豊かじゃないから？暇さえあればいやらしい妄想ばかりしちゃってるから？ちがいます。 それは経験や知識など、そもそも持っている武器が少ないからではないでしょうか。 ここで再確認しておきたいのは、ゼロから生まれるアイディアは存在しないということ。 アイディア
強いロゴを作るために必要不可欠な4つのルール
by arnoKath 無料でオリジナルデザインのロゴを作成してくれる便利なサービスもありますが、本当に効果的なロゴを作るなら細部までこだわり抜いた完全オリジナルデザインにしたいもの。ではロゴマークを1から作ったり改良する場合に何が重要になってくるのか、というと、そこには4つのルールがありました。 4 essential rules of effective logo design | Webdesigner Depot http://www.webdesignerdepot.com/2013/03/4-essential-rules-of-effective-logo-design/ ◆ロゴ作りを始める前に問いかけるべきこと ロゴ作りを始める前に、自分が作った直近のロゴに関して14の質問に答えて下さい。 01：ロゴは傾いていないか 02：水平と垂直のいずれの方向にも余白があるか 03：白
見ないと損する便利なデザイナー向けWebサービス13選 | SONICMOOV LAB
こんにちは。 緑のにおいが気持ち良い季節になってきましたね。3月4月は花粉で涙をボロボロ流しながら生活していたのですが、やっと思う存分散歩ができそうです。 さっそくですが、デザイナー・クリエイターのみなさんは、自分の作品やスキルをアピールするために普段どのようなツールを使っているでしょうか？ 現在さまざまなWebサービスが出ており、うまく利用できれば活動や交流の幅が広がるはず！ そう思って今回はクリエイター向けのサービスをいくつかまとめました。 目次 UIアニメーションのヒントに ちょっとしたアニメーションを作るときに参考にしています。動きを眺めるだけでも面白く、インスピレーションがわきます。 CAPPTIVATE.co iPhoneアプリのUIアニメーションをカテゴリ別に紹介しています。マウスオンでアニメーションが確認でき、アプリのデザインやUIアニメーションなど、アプリ開発に大変役立ち
[CSS]テキストの左右に水平ラインをすぅーーーっと引くスタイルシートのテクニック
hn, pなどの要素を使ったテキストの左右に、水平ラインを天地中央に配置するスタイルシートのテクニックを紹介します。 HTMLは非常にシンプル、カラーやサイズの調整も簡単、背景画像も問題ありません。 実装のポイントは5つ。 画像は使用しない。 spanなど、余分なHTMLは使用しない。 フォントのサイズを大きくしても自動で調整される。 可変。 背景が画像でも水平ラインが綺麗に描かれる。 実際の動作は、下記ページで確認できます。 デモは全てのモダンブラウザ、IE9+でご覧ください。 Heading Side Lines HTML HTMLは非常にシンプルで、hnやp要素のみで実装できます。 classを使用すれば水平ライン有り・無しの共存も可能です。 <body> <h2>テキストの左右に</h2> <h3 class="lines-on-sides">水平のラインを描く</h3> </bo
地域の魅力を広げるデザイン事務所｜ローカルデザインなら包むデザイン
地域には『何もない』に思えて実はたくさんの良きところがあります。良き点は日常に埋もれてしまい、その地域の人以外の人が知って初めて「へーすごいんだ！」なんて気づく事があります。 厳かなお祭りや絶景の大自然といってイベントだけではなく、よく通っているお店や毎年続いている地域のイベントなども良きところになりえます。 そんな地域の良きところをデザインやホームページ制作を通してスポットを当てる力なることを信念としています。
新人ウェブデザイナーに送る。ウェブデザインブックマークサイト決定版！
おはようございます。CD藤本です。 厳しい冬も終わりを告げ、大好きな春がやって来ました。 桜、誕生祭、キャンプ初め、サイクリング開始。と良いことづくしの春。 当社でも11名の新入社員を迎え入れました。 個性あふれるフレッシュな11名の新人たち。ようこそSOLGへ！！ さて今回は、デザイナーなら誰でも知っていると思いますが、新人ウェブデザイナーのために、ウェブデザインのブックマークサイト・ギャラリーサイトを紹介します。 僕が知っているだけでもこの手のサイトは30サイト以上あります。老舗から新参者、洋物中心のところから和物のみにこだわったところ。縦長にこだわったところからスマホのみに絞ったところ、パーツのみに絞ったところもありますね。 僕が何年も使い続けた結果、ここが至極のブックマークサイト（以下ブクマサイト）だ！という5サイトを紹介します。 （今回はパソコンサイトを扱うブクマサイトに限らせて
たった一行でさまざまな要素をレスポンシブ対応にするスタイルシート -Fluidity | コリス
iframeを使った地図 Fluidityの使い方 使い方は簡単です。 Step 1: 外部ファイル head内に当スタイルシートを追加するだけで完了です。 <link rel="stylesheet" href="css/fluidity.min.css"> Step 2: HTML あとは、通常通りにHTMLを記述するだけです。 画像の場合 <img src="image.png"> テーブルの場合 テーブルの時はclassを加えます。 <div class="overflow-container"> <table> <!-- table contents --> </table> </div> 地図の場合 <iframe src="https://www.google.com/maps/embed?マップのコード" width="100%" height="450" framebor
横メニューの作り方
レスポンシブに対応した横メニューを作る機会があったので、せっかくですし作り方を紹介したいと思います。お役に立てばうれしいです。 【追記 2014.03.19】 元々のタイトルは「レスポンシブWebデザインに対応した横メニューの作り方」でしたが、よく考えるとスマホ対応になったら縦メニューになりますのでタイトルを変更しました。 id名「toggle」の部分は横幅が480px以下の場合に表示するボタンです。481px以上の場合表示させません。その他はごく普通の横メニューです。 CSS 続いてCSSです。まずは全体を載せます。 #menu{ width: 100%; max-width: 960px; margin: 0 auto; padding: 0; } #menu li{ display: block; float: left; width: 12.5%; margin: 0; paddi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
すごい無料HTMLテンプレート厳選30個まとめ 2014年5月度PhotoshopVIP |
Aloye
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
