linear-gradientとは？cssでテキストにマーカーを引いた表現方法について｜webproduct-lab
linear-gradientの使い方基本 まず、基本的な使い方はこちらです。 {background-image:linear-gradient(transparent 開始位置%, マーカーの色 終了位置%);} 先ほども言ったように、linear-gradientはグラデーションを表現するためのものです。ですので、開始の色と位置・終了の色と位置が必要となります。 開始の色と位置の設定 では、まず開始の色と位置についてご説明します。上記のタグのように開始の色をtransparentとしていますが、transparentとは透明という意味です。 そして、開始位置を例えば0%にすることで一番上から透明が開始されるということです。これを50%にすることで半分からグラデーションが開始されます。 ちなみにデフォルトでは上下のグラデーションとなっています。 とりあえず次に進みます。 終了の色と位置
position:absolute は位置指定をしていないと親要素の影響で思わぬ動きをするときがある、という話 - わたしと納豆ごはん
【追記 (2017/04/08)：Flexbox（フレキシブルボックスレイアウト）のことなど、記事の一部を変更しました。】 HTMLをCSSでデザインするときに、要素を重ねることがありますよね。 例えばdivやspan要素、疑似要素:beforeや:afterを重ねて一つのデザインを作る、なんてことはよく使われる方法です。 そのときよく使われるCSSがpositionプロパティです。 このプロパティなのですが、親要素と子要素の表示形式やプロパティによって、いろいろややこしかったのです。 スポンサーリンク 親要素の影響を受けるインラインレベルの position:absolute 原因の推測 IE11 では他とは違い基準位置に インラインレベルで位置が変わることへの対応策 1、ブロックレベルにする 2、leftプロパティを指定する vertical-align や Flexbox はブロック
table要素をスマートフォン対応するのに使うCSS
【HTML】 <table border="1" cellspacing="0" cellpadding="5"> <tbody> <tr> <th>商品名</th> <td colspan="5">パソコン</td> </tr> <tr> <th>OS</th> <td colspan="5">Windows 8.1 64bit(日本語版)</td> </tr> <tr> <th>価格</th> <td>29,800円</td> <td>39,800円</td> <td>49,800円</td> <td>100,800円</td> <td>130,000円</td> </tr> <tr> <th>CPU</th> <td>Celeron</td> <td>Pentium</td> <td>Core 2 Duo</td> <td>Core i5</td> <td>Core i7</td>
スマートフォン表示で、はみ出したtableをスクロールさせるCSS
このようにtableを横スクロールさせるには、HTMLとCSSを編集すればOKです。 1、HTMLの編集 まずは、tableを「divタグ」で囲みます。ここでは、そのdivタグに”scroll”というclass名を付けました。 <div class="scroll"> <table border="1" cellspacing="0" cellpadding="5"> <tbody> <tr> <th>商品名</th> <td colspan="5">インターネット回線</td> </tr> <tr> <th>初期費用</th> <td colspan="5">事務手数料3000円 ＋ 標準工事費0円</td> </tr> <tr> <th>プラン</th> <td>30Mコース</td> <td>50Mコース</td> <td>100Mコース</td> <td>200Mコース</td>
レスポンシブ対応とグローバルメニューをトグルメニュー化する方法を解説 - DREAMARK
先日発表した、はてなブログのテーマ「CONTENTS」 おかげさまで多くの方に使ってもらえてとても嬉しく思っています。それはまた別に感謝を綴ろうかと考えているので、今感謝を述べるのはこの辺しておきます。 今回新たに記事にしたのには理由があります。「CONTENTS」発表当時はレスポンシブデザインに対応していなかったのですが、この度、レスポンシブデザインにも対応する事になりました。この記事を書く少し前から対応していたのですが、今回が正式な発表になります。 さらに、これは初発表になるのですが、タブレットやスマホでブログが表示された時に、グローバルメニューの開閉式トグルメニューにも対応しました。 PC版のグローバルメニューを利用していいる方は、トグル化をするのに今回のコードをコピペしていただくか、少しだけ作業をしていただく事になりますが、その方法等も含めて「CONTENTS」のレスポンシブデザイ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.hakoroid.com/entry/2016/07/01/132520