レスポンシブWebデザインでハマりがちな%指定 │ Design Spice
レスポンシブWebデザインでは要素を可変にするために数値を%で指定することが多いですが、%指定の仕様を理解してないとハマることがあります。自分もそのような経験があったので備忘録としてまとめました。 要素の幅と高さの%指定 レスポンシブWebデザインのように、ある要素の幅を一定の比率を保ったまま可変するようにするには、通常、値を%で指定します。この時の値は、 求める要素の幅÷親要素のコンテンツ幅×100% の式で求められます。 例えば求める要素の幅が20px、親要素のコンテンツ幅が200pxの場合は、10%となります。 また、ここで言うコンテンツ幅とはmargin、padding、borderを含まない幅です。 同様に高さを%で指定する場合は、 求める要素の高さ÷親要素のコンテンツの高さ×100% となります。 marginとpaddingの%指定 左右のmargin、paddingを%で指
初心者のためのHTMLとエクセル講座：HTML・CSSを使ったホームページ作成やエクセル(EXCEL)・フォトショップ(Photoshop)入門
CSS3 のtransformプロパティはFlashやJavaScriptを使わずに要素をアニメーションさせたりする視覚的および相互作用の効果を豊富に提供しています。 その中でtranslate()関数は、基本的にX軸とY軸に沿って指定された距離だけ要素を移動させる際に使います。 基本コーディングは特に複雑ではありません。 transform：translate(x, y)、translateX()、translateY()、translateZ()、translate3d()などの関数で移動距離を指定します。 translate(x、y）関数では、要素を左からx距離、上からx距離ほど相対的に位置決めしたり、移動や再配置を指定します。 Y方向の距離は省略することができますが、この場合のY方向の距離は0となります。 translate()プロパティ transform:translate()
レスポンシブ対応！CSSで画像を中央トリミングする方法 - Design Color
追記 この記事を書いた当初はまだIE対応をしなければならないケースが多かったのですが、最近はもうIE対応は考えなくていいかなと思ったので今風の書き方を追記しました。 サムネイルの画像サイズがみんなバラバラ・・・ サムネイルの画像サイズがバラバラだと、どうしても表示に統一感がなくなってしまいますよね。Pinterestのような、サムネイルのバラバラ感を逆に活かしたレイアウトであればいいのですが、使い所が限られてきます。 かといって、複数個ならまだしも何百、何千とある画像をリサイズするのは手動でも自動でも大変…！というわけで、cssで中央部分をトリミングして同じサイズで表示してみましょう！ CSSで画像を中央でクロップして同じサイズで表示する方法 以下が実装用のコードです。「CSS」のタブをクリックして確認してみてくださいね。 方法1：object-fit版 「object-fit」というプロ
cssで一部だけを角丸にする。 - Qiita
-webkit-border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px; -moz-border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px; border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px; 水平方向の 左上、右上、右下、左下 / 垂直方向の 左上、右上、右下、左下 の順で指定するらしい。 指定されたpxを半径とした円の円周を角丸の大きさとして考えてるみたい。
CSSで画像などをホバーした時に透過させる方法
2017/06/22 画像などにホバーした時、透過させるにはopacityプロパティを利用します。色が薄くなることで「クリックできる」ということをユーザーに伝えられますね。 サンプルコードopacityには0(透明)〜1(不透明)の間で透明度を指定します。0.5を指定すると半透明になります。 img:hover { opacity: 0.5 ; }デモopacityopacityプロパティに0〜1の数値を指定します。0が完全透明で、1が完全不透明です。 <!-- このコードは編集できます。 --> <!DOCTYPE html> <html> <head> <style> img:hover { opacity: 0.5 ; } </style> </head> <body> <p>ホバーすると透過します。</p> <img src="/author.svg" width="150" he
【CSS】複数行でも3点リーダーをきかせる - Qiita
p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } まぁ普通に3点リーダーになりますよね。 複数行で3点リーダー Chrome・Safari でしか実装できませんが（今後はIEとかでも使えるようになる事を期待）下記のように書きます。 複数行での3点リーダー実装するために、 ”display: -webkit-box;” ”-webkit-box-orient: vertical;” 指定をします。 display属性を”box”とすることでフレキシブルボックス状態になり、 ”-webkit-line-clamp”で指定した行までを表示するようになります。 box-orientはそのフレキシブルボックスの並び方向を指定しverticalと指定する。 overflow: hidden;をスクロールバー対策と
text-overflow - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
「display:inline-block」での隙間（余白）を消す方法 | HPcode（えいちぴーこーど）
改行しない display:inline-block;を適用させた要素をソース内で改行していると、余白ができるようです。 htmlの見栄えを無視して圧縮したような記述にしましょう。 具体例は以下です。 余白できるパターン <ul> <li style="display:inline-block;"></li> <li style="display:inline-block;"></li> <li style="display:inline-block;"></li> <li style="display:inline-block;"></li> <li style="display:inline-block;"></li> </ul>
CSSでのラジオボタン・チェックボックスのカスタマイズを詳しく説明してみた | カルアカはWebが無料で学べる
こんにちは、リードスペースです。 ラジオボタンやチェックボックスってブラウザー依存のデフォルトデザインだと少し味気ないですよね？ 今回は、CSSでラジオボタンやチェックボックスをオリジナルデザインでカスタマイズする方法について根掘り葉掘り説明します。 ズバリ、labelタグを使う ラジオボタンやチェックボックスなどに使用するinputタグはcssで装飾できないという難点があります。 そこでラジオボタンやチェックボックスを装飾するのに役立つのが「label」タグです。 「label」とは、チェックボックス、ラジオボタンなどの構成部品とその項目名を関連付けるためのタグです。 関連付けを行えば、ブラウザでlabelタグをクリックしただけでも、その構成部品をクリックしたものと同じ動きをしてくれます。 指定方法その1・フォームパーツのidとlabelタグのforの値を同じにする 下記のようにidとf
【ズボンを脱ごう】SassのSASS記法の魅力【カッコイイ】 - 納豆には卵を入れる派です。
どうも。 CSS Preprocessor Advent Calendar 2012 2012年12月20日（木）を担当させていただきます@ken_c_loです。 そうそうたる面々の中、みなさんハイレベルな内容で大変恐縮しているのですが、そんな中モジモジしながらしかし空気を読まずに、ずっと書きたかったウザい感じのエントリを投下しようと思います。 ズボンを履かない「SASS記法」とは？ 発端はこのツイートからでした。 …と、そんな流れで、「ズボンを履かない」SASS記法とはなんぞや。その魅力、カッコよさについて力説しようと思います。あわよくばSASS記法仲間を増やしたい！そして、お菓子などを食べながらSASS記法の魅力について語り合い、仲間の少なさについて嘆き合う.sassの会を月一くらいで開催できればと思います。 ヾ(*’ω’*)ﾉﾞ ｽﾞﾎﾞｰﾝ‼ SassにはSCSS記法とSASS記法
【CSS】CSSプロパティの記述順について考えてみた | unitopi - ユニトピ -
こんにちは！ 新米ライターのケインでございます。 前回の記事で予告した通り、今回は「CSSのプロパティ記述順」についてお話致します。 CSSプロパティ記述順の公式ルールは存在する？ CSSプロパティの記述順については、厳密に定義されたルールは存在しません。 ですが、推奨記述順に関するガイドラインというのは、FireFoxでおなじみMozilaさんの「mozilla.org Base Styles（※上部に記載されているSuggested orderの箇所）」や、W3Cさんの「CSS2 Specification」で掲載されているようです。 mozilla.org Base Stylesではどう推奨しているか？？ Suggested order:（※Mozillaさんより抜粋） display list-style position float clear width height marg
背景をページの下部まで伸ばす « 株式会社ゼノフィ
背景色を下部まで要素がない場合でも、下まで伸ばす方法をご紹介します。 通常、ブロック要素のdivタグなどにbackgroundで背景色を指定した場合、要素がある分までしか背景色は伸びません。これをCSSで要素がない場所（下部）まで伸ばしてみます。 ルートである「html」と「body」要素に「height: 100%;」を指定、min-heightに対応していないブラウザ用に「height: 100%;」を「div.background」にも指定します。次に背景色を記述している「div.background」に最小の高さとして「min-height: 100%;」を指定します。「div.background」に「min-height: 100%;」を指定することよって、最小の高さとして、必ず背景色を高さに対してどこまでも伸ばすようにしています。 「body > div.background
gahakudesign.com
gahakudesign.com 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
Bootstrap使い方メモ１（基本＋CSS） - Qiita
公式サイトを一通り動かしてみたときのメモ。 まずは CSS。 Hello World Bootstrap を入手する ここ から zip ファイルをダウンロードする。 HTML を書く <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap.min.css" /> </head> <body> <h1>Hello Bootstrap!!</h1> </body> </html> HTML5 の DOCTYPE を記述する。 css ファイルを読み込むだけで使い始められる。 モバイル用に viewport を設定する meta タグを記述する。 user-scalable=n
[css,html5] placeholder属性のテキストカラーを変更 - Qiita
/* 各ベンダープレフィックスが取れた標準版！！(http://caniuse.com/#search=placeholder-shown) */ :placeholder-shown { color: red; } /* Google Chrome, Safari, Opera 15+, Android, iOS */ ::-webkit-input-placeholder { color: red; } /* Firefox 18- */ :-moz-placeholder { color: red; opacity: 1; } /* Firefox 19+ */ ::-moz-placeholder { color: red; opacity: 1; } /* IE 10+ */ :-ms-input-placeholder { color: red; } ::-webkit-inp
![[css,html5] placeholder属性のテキストカラーを変更 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/25fba9d030dcc96d969890514ded69e5eb0165eb/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCY3NzJTJDaHRtbDUlNUQlMjBwbGFjZWhvbGRlciVFNSVCMSU5RSVFNiU4MCVBNyVFMyU4MSVBRSVFMyU4MyU4NiVFMyU4MiVBRCVFMyU4MiVCOSVFMyU4MyU4OCVFMyU4MiVBQiVFMyU4MyVBOSVFMyU4MyVCQyVFMyU4MiU5MiVFNSVBNCU4OSVFNiU5QiVCNCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NDQwNWViYmExN2I0ZGFkN2E3ODNiYmZhYTBmNzMxYjU%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwdG1pYW1lJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz04ZjNiZWQyNTQ2ZTdiMTZmNGFlNzc3ODA3MDhiMzBhMg%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dcfd6479d647ab6d0a17b7b52c4c901a7)
CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
Flexboxで決まり！ | Webクリエイターボックス
2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SCSSの変数と、CSS3のcalc()を併用するには - Qiita
"height: 100%" の要素が画面の高さ100%にならない場合の対応方法 - Qiita
Icons | Font Awesome
