ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
CSS3を使ってできる画像まわりのエフェクトやスタイリング18
CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。 たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 ※ 2/24 「2. めくれた風」を書き忘れていたので追記しました 目次 1. シャドウ 2. めくれた風 3. トイカメラ風トンネル効果 4. カラー調整 5. 回転 6. 角丸 7. 楕円のフレーム 8. 円のフレーム 9. 三角形フレーム 10. 重なった風 11. ぼかし 12. フェード（シャドウ編） 13. フェード（グラデーション編） 14. 反射 15. リボン 16. 差し込んだ風 17. フレームだけを傾ける 18. 半透明フレーム まとめ ※ 実際の表示はこちらから確認できます。 ※ この記事で掲載しているCSSは、シンプルにするためにベンダープリフィックスを付けていません
Web制作者はおさらいしたい！CSSの勉強になる実用的な基本テクニックまとめ | コムテブログ
TL;DR 実務で意外と使う基本的なものやトリッキーな小技。少ない記述で済む CSS テクニックなどをまとめました。今回は Web 制作に関わるなら、必ずおさえておきたいものや今後使っていきたいテクニック中心です。 画像 １．画像の下にできる隙間をなくす 画像の下に色などを配置すると、わずかに隙間が出来ることがあります。そんな時は親ブロックにline-height: 0;で OK。他には画像に直接vertical-align: bottom;かdisplay:block;を使えます。 css 画像の下にできる隙間をなくす方法 ２．画像の下にテキストが回り込まないようにする 回り込み解除は親要素か以下の例だとテキストにoverflow: hidden;かoverflow: auto;を指定します。IE 対策で zoom 属性 zoom:1;も同時に設定します。 css ３．float を使わ
[CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック
テキストで実装した見出しなどを画像に置換するテクニックで「-9999px」が有名ですが、そのパフォーマンスを改善するテクニックを紹介します。 Replacing the -9999px hack (new image replacement) [ad#ad-2] 画像置換：-9999px 改善したテクニック 画像置換：-9999px -9999pxを使った画像置換のテクニックは、下記のようになります。 HTMLは見出し要素で実装します。 HTML <h3 id="sample06">見出しのテキスト</h3> 「text-indent:-9999px;」でテキストを見えない位置にし、見出しとなる画像を背景画像として表示します。 #sample06{ width:300px; height:50px; background:url('bg-01.gif') no-repeat 0 -250p
IE8以下でメディアクエリが効かないとき…
レスポンシブデザインを制作する際に「Media Queries（メディアクエリ）」を使用してCSSの表示を切り替えますが、IE8以下ではこの「Media Queries」に標準対応していません。そこで「css3-mediaqueries.js」等を読み込むことで対応させたりしますが、それでもこのMedia Queriesが効かないということがあります。そこで、確実にMedia Queriesを使ってcssを読み込む方法をまとめておきます。 Media Queriesを使用してcssを読み込む3つの方法 まずは、Media Queriesを利用してCSSを切り替える際の方法には3つあります。 (1).Linkタグのmedia属性で指定する <link rel="stylesheet" media="screen and (min-device-width: 781px)" href="pc.
はてなブログ | 無料ブログを作成しよう
うめぇヨーグルトソースでもいかがですか。個人差にもよりますが。もしよろしければ。 お久しぶりです。 最近うんめぇ〜と思ってるヨーグルトソースがあるので、書いていこうと思います。 ヨーグルトとハーブ類をもりもり使うので、そういうのが食べられない方にはうんめぇソースではないです。ごめんなさい…。もしよろしければお茶だけも…旦~ 【用意する…
スマホのレスポンシブデザインで右側に余白ができる場合 | Web Design Leaves
レスポンシブのサイトを作成していたら、何故かスマホのサイズの場合のみ、右側に余白（空間）ができていた。 HTML の構造は以下のようなもの。 <body> <div id="header" class="clearfix"> <div id="header_inner"> <h1 id="logo">タイトル</h1> </div> <div id="navi"> <ul id="navi_menu" class="clearfix"> <li><a href="index.html">Home</a></li> <li><a href="works.html">Works</a></li> <li><a href="statement.html">Statement</a></li> <li><a href="#" class="disabled">Resume</a></li> <li
タグの入れ子ルール
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
たった一行でclearfixを使わずにfloatを解除するテクニック｜クロノドライブ
floatを使った際の表示の崩れを正すためによく使われるclearfixですが、それを使わずともfloatを簡単に解除する方法をご紹介します。 HTML
CSSでdiv全体をリンクにする方法 - チョコパイを240こ食べたエンジニア
久々の投稿；； CSSの覚え書きー！ リンクつけたいからaタグ使うけど、ブロック要素全体にリンクをつけたいときはどうするか？？ div要素をaタグで囲むのはだめっ aタグはインライン要素だから中にブロック要素は書けない… そんなときは、CSSでできるというのを今更知った～ http://d.hatena.ne.jp/atu_web/20120412/1334250031 ここを参考にさせていただきましたー！ ググったらこのやり方は結構でてきましたね、常識でしたか……知らなかった…；； a要素をブロック要素にする a要素をdivと重ねるために、divを相対配置、a要素を絶対配置でdivが基準になるように位置を指定 IE7とかIE8に対応させるなら、背景を指定しないとリンクにならないので適当にカラーを指定して透明にする してやるんですね～へぇ～ やってみた HTML <div id ="lin
リンク(aタグ)をブロック要素(div)全体に効かせるCSS
スマートフォンの普及で、レスポンシブデザイン、スマホファーストが推奨されつつある中、今までどおりにテキストにリンク指定するだけでは、ユーザビリティを損ねてしまう場合があります。 例えばECサイトの検索結果一覧に表示される、画像とタイトル(テキスト)だけでなく、商品BOX(画像、タイトルが含まれる)全ての範囲にaタグ(リンク)を適用するCSSの書き方を記述します。 ※本文中にサンプルとして掲載しているBOXは全て、レスポンシブデザイン対応しているので、PCでご覧の方はブラウンザの幅を小さくしたり大きくしたりすることで、BOXにの伸縮を確認できます。 PR .link_box{ position:relative; width:30%; padding:5%; border:solid 1px #CCC; margin:0px auto 20px; } .link_box a{ positio
[CSS]iPhoneでsubmitボタンのテキストがずれた時の対応方法
submitボタンのスタイルがiPhone(Mobile Safari)で、テキストがずれたり、「border-radius」の角丸が期待より丸くなってしまった際の対応方法を紹介します。 Styling Submit Buttons for Mobile Safari デモページ キャプチャの元画像：協力（@sparrowSeven） この現象はデスクトップ用のブラウザ（Safari, Firefox）では起きませんでした。また、iPhoneのシミュレーター（iBBDemo2）でも確認できませんでした。iPhone4固有の現象のようです。 原因と思われるのはpaddingの値が正常に適用されていないような感じで、未対応時、対応時のスタイルシートは下記の通りです。 未対応時のスタイル HTML HTMLは非常にシンプルです。
CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
[意外と知らないCSS]一瞬で横並びレイアウトができるdisplay:box | Cappee Design
あとで読みたい人は… こんにちは、@cappeeです。 サイトを3カラムで作る場合は通常floatを使いますよね？ 今回は意外と知らないCSS？かもしれない、floatを使わずにレイアウトできる display:box をご紹介します。 display:box とは CSS3の display:box を使えば一瞬にして3カラムのレイアウトをすることが可能です。 もうfloatのclearになんか悩まされることもありません。 display:box のすごいところは、横並びでレイアウトしたい要素の「親要素」にだけ記述すれば勝手に横並びにしてくれます。 プレフィックスを入れてもたった2行でできてしまうのです。 Flexible Box（フレキシブルボックス）とも言います。 display:box の記述方法 #contents の中に横並びにしたい要素を入れたとします。 下記の2行を追加す
★★★隙間を埋める！フッターをウィンドウ下部に固定する3つの方法 | 株式会社LIG
こんにちは、モモコです。 ページを作っている際に、想定していたコンテンツ量よりも原稿が短く、フッターの下にブラウザとの隙間が空いてしまう事がありました。 このスカスカ感を埋めるべく、フッターをウィンドウ下部に固定する方法を調べたので備忘録も兼ねてご紹介します。 positionを使い、フッターをコンテンツ下部に固定する方法 【HTML】 <html lang="ja"> <body> <div id="wrap"> <header>ヘッダー</header> <div id="contents">コンテンツ</div><!-- contents --> <footer id="footer">フッター</footer> </div><!-- wrap --> </body> </html> 【css】 html,body{ height:100%; } #wrap{ width: 100%
fade loading
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSレイアウトを学ぶ
http://ideahacker.net/2013/12/03/6983/
div全体をリンクにする方法