width:100%なのにはみ出す理由と回避策。CSSを触るなら必ず理解しなくてはいけないボックスモデルの話。（CSS おれおれ Advent Calendar 2012 – 05日目） | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 05日目 横幅いっぱいに広げようとしてwidth:100%を指定したら横スクロールバーが出ちゃった、という経験ありませんか？ その原因と仕組み、回避策についてお話しします。 わりとFAQな感じ。これは是非覚えておいてもらいたいです。というか知っておいてください。 はみ出した例 position:absoluteないしposition:fixedを使った際にこうなっちゃう事が多いと思います。 上部から出てきたメッセージ欄、横にはみ出てますね。 でも指定はちゃんとwidth:100%です。「幅いっぱい」を指定しているのに、どうしてはみ出てしまったんでしょうか。 「幅」が意味するところ 実はCSSの仕様が定めるところの「幅」というのが、我々が視覚的に認知している「幅」と異なっているのが原因です。 CSSではこんなものを定めています。
簡単、きれい！RGBaカラーを使って横メニューを作ってみる
RGBaカラーを使って全体に統一感のある横メニューを作ってみます。RGBaカラーといっても使うの色は白（rgba(255,255,255,0.4)など）と黒（rgba(0,0,0,0.1)など）だけで、その透明度を変えて様々なところで使っています。 先日書いた「カラーツール「0to255」で色を決めてメニューを作ってみる」がなかなか好評でしたが、今回も出来上がりは同じようなメニューになります。 RGBaカラーについては、以前書いた「透明度を表す「opacity」 と 「RGBa」の違いと使い分け」も参考になると思いますのでぜひご覧ください。 早速コードを見てみます。まずはHTMLですが、これは特に問題ないと思います。 <ul id="menu"> <li><a href="#">IE</a></li> <li><a href="#">Firefox</a></li> <li><a href
1ランク上の「HTML5」制作に欠かせないサイト・ツール・アプリのまとめ21個！
「HTMLファイ部」のほんだです(・Å・)∫ jsdo.it、nakamap、Paberish、HTML5実力テストといった自社運営Webサービスの HTML5エンジニアをやっているものです。 よろしくお願いします！ 「HTMLファイ部」創立1周年！ 非常に手前味噌ではございますが、 弊社HTMLファイ部が創立から1年になりましたっ！・u・ HTMLファイ部は、「HTML5」技術を軸に、様々な表現に挑戦していくエンジニアを集めた部署となっています。 今回の記事では、HTMLファイ部の一周年を勝手に記念して、 HTMLファイ部のメンバーからかき集めてきた、HTML5サイト制作ツールをまとめます！ ツール系のサイト
[CSS]コピペでOK！画像のホバー時用のかっこいい新しいエフェクトのまとめ
HTML 各デモのベースとなるHTMLです。 div要素のclassを変更して利用します。 <div class="pic"> <img src="image.jpg"> </div> 各デモで共通で使用するスタイルです。 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } body { background: #333; } .pic { border: 10px solid #fff; float: left; height: 300px; width: 300px; margin: 20px; overflow: hidden; -webkit-box-shadow: 5px 5px 5px #111
たった１行で完成？凄まじくレスポンシブデザインなサイトの作り方 | DECONCEPTER
簡単に作れる！みんな大好き可変グリッド 先日話題になっていた「なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！」で紹介されていたNHKスタジオパークのレスポンシブデザイン。 こちらのサイト、プラグインを使ってとてもシンプルに作られています。キレイ。このシンプルさを伝えたくてうずうずしてきました。せっかくうずうずしたのでどんな作り方をしているのかサンプルを交えて紹介します。 まずはこちらのデモを御覧ください。 凄まじくレスポンシブデザインなサイトデモ 使われているのはjQuery Masonryというプラグインだ！ @planetofgoriさんのブログで紹介されているように、jQuery Masonryというプラグインが使われています。このプラグインたった数行でNHKのサイトのような可変グリッドレイアウトが作れてしまいます。可変グリッドのレイア
なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！ | ゴリミー
今のウェブデザインの流行りは「レスポンシブ・ウェブデザイン」！ 昨日、とあるアプリの紹介ページについて話し合っていたのだが、株式会社LIGのデザイナブログに書いてあった「必読！5分でわかる流行のレスポンシブWebデザインまとめ」に載っていた「NHKスタジオパーク」のレスポンシブ・ウェブデザインがイケイケすぎて感動したので、紹介する！これは本当にすごい！！ まず普通に表示するとこんな感じ。よくある3コラムベースのウェブサイト。 少し幅を狭めると、下にあったコンテンツが右サイドバーに移動し、右サイドバーにあったコンテンツが下に移動した。 さらに狭めてみると、右のサイドバーが完全に無くなった。 さらに狭めると今度は左のサイドバーが消えた。 ブラウザの限界まで狭めてみると、各パーツの幅も狭まってこのような形に落ち着いた。 これを試している時、各要素の動きがあまりにも滑らかでものすごく感動した。皆さ
参考にしたい日本人クリエイターのポートフォリオサイト 40
Warning: Use of undefined constant more_link_shrarp_remove - assumed 'more_link_shrarp_remove' (this will throw an Error in a future version of PHP) in /home/users/1/limeline/web/nnmal/wp-content/plugins/more_link_sharp_remove/more_link_sharp_remove.php on line 16 Warning: Use of undefined constant ddsg_language - assumed 'ddsg_language' (this will throw an Error in a future version of PHP) in /ho
無料で大量の背景テクスチャをダウンロードできるサイト「Subtle Patterns」
Webページなどの背景テクスチャをいろいろ試したい場合に、約300種類あるテクスチャを選択してダウンロードできるサイトが「Subtle Patterns」です。このテクスチャは商用利用もOKとのこと。テクスチャの確認とダウンロード方法は以下から。 Subtle Patterns | Free textures for your next web project http://subtlepatterns.com/ 約300種類ある背景テクスチャは以下の通りです。番号はサムネイル表示にしたときのページになっています。 ◆01 ◆02 ◆03 ◆04 ◆05 ◆06 ◆07 ◆08 ◆09 ◆10 ◆11 ◆12 ◆ダウンロード方法 公式サイトにアクセスすると、リスト表示でテクスチャが表示されています。 気に入ったテクスチャをダウンロードする場合は…… テクスチャの左下にある「Download
デザインテンプレート無料配布 || 商用サイト向け
404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年5月時点の調査。
【オリジナル制作】Photoshopでの作業を効率化できるいい感じのJSXスクリプト | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの王です。「とりあえずタイトルに興味を持ったけどいまいちピンとこなかった」という方もいるのではないでしょうか。 ずばり、Photoshopのスクリプト機能を利用して、表題の作業を自動的に処理させるということです。僕みたいな怠け者で楽をしたい人にはぴったり！ 今回主に紹介したいのは自作のスクリプトで、Webに特化した作業を簡単にしてくれます。 ダウンロードはこちら（ダウンロードが開始されます）： https://liginc.co.jp/demo/2012/09/PhotoshopScripts.zip スクリプトを使うには？ まずはスクリプトの使い方について説明していきます。 スクリプトをダウンロードし解凍したら、拡張子が「jsx」のファイルが幾つか入っていると思います。それらを下記のフォルダにコピーし、PCを再起動させます。 Windows：PhotoshopPre
15 Useful Code Snippets for Smartphone Website
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！ スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック（タップ）範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
input要素の前と後にアイコンを添えたオシャレなフォームを実装するチュートリアル
Coloured 前後+カラーリングのパターン 実装 HTML HTMLはシンプルで、アイコンやカラーリングはclassで判別します。 <!-- 1st prefix with email icon and default color (grey) --> <input placeholder="Type here..." class="ppfix pre email" type="text"> <!-- 2nd postfix with google plus icon and default color (grey) --> <input placeholder="Type here..." class="ppfix post gplus" type="text"> <!-- 3rd prefix with home icon and blue color --> <input pla
縦や横に長いサイト「高級ペライチ」1度は見ておきたいスクロール演出のまとめ32個！
HTML+CSS+JavaScriptでつくるサイトの定番演出「高級ペライチ」！ HTMLファイ部の「HTML5の鬼」ことほんだです。 カヤック社内では「高級ペライチ」という愛称で呼んでいる縦や横に長い1ページサイト。 スクロールに合わせたパララックスやアニメーションの演出が印象的ですよね。 今回は「高級ペライチ」とググると1位に表示される、 僕のはてブ「高級ペライチ」タグから厳選32サイトを紹介します！ まずは王道！縦に長い高級ペライチ
無料で使えるUIデザインの基本要素が詰まった32の素材集 - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
先日、UIデザインが素晴らしい35のウェブスタートアップという記事が人気となりました。今回はあんな今風のウェブUIを気軽に簡単にデザインしてみたい！という方のためにフォトショップ用のUIエレメントのファイル集を32厳選してご紹介。どれもフォトショップ形式、かつベーシックなまさに今風にデザインされた要素ばかりなので、便利に使えそうです。 — SEO Japan Butterscotch UI Kit Lion OSX UI Kit PSD Calendar PSD Search Drop-down PSD Volume Slider Mini Web UI Set Cloudy UI kit Dark UI Kit Modern UI Kit UI Bundle Detailed UI Kit iTunes Inspired UI Kit (PSD) iPad Application Moc
ロゴデザインする時の参考に！ロゴデザインギャラリーのオンパレードと注目記事色々！ | バンクーバーのうぇぶ屋
僕がロゴを作るってことはこれまで正直殆ど無かったんですが、実は今とあるWEBサービスの開発に関わっていてそのフロントエンドの制作取り回しを担当させて頂くことになりました！ とは言っても、小さいプロジェクトなのでロゴも自分で作ることになったのですが、なんともまぁ久々のロゴデザインなわけですよ。サービス名もまだ思案段階で着手するのはもうちょい先かなと思うんですが、どうせ作るなら恥ずかしくない物にしたいと思い、ちょっと最近の流行やらロゴデザインの参考になりそうなサイトをEvernoteから引っ張ってきたので今日はその辺ついでにご紹介出来ればと思います！ いやしかし、ここ数年でめっちゃロゴだらけのサイト増えましたねー。僕がWEBとかデザインとか勉強しだした時ロゴサンプルとかは Doslogosとか LosLogosとか買って参考にするくらいしかロゴのサンプルというか、参考に見る機会無かった気がする
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
商用利用可能なアイコン・イラスト素材ならICON HOIHOI
cmmntr.com
Loading...
ウェブデザインのセンスを学ぼう、2012年上半期洗練されたディテールのUIデザインのまとめ