サルワカではたくさんのCSSデザインサンプルを紹介しています。とはいえ「CSSをコピペしても効かない」「一部しかデザインが変わらない」ということもあるかと思います。今回はそんなときの対処法を初心者の方でも分かるように詳しく解説します。
![CSSが効かない・反映されないときの対処法まとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/2cf4ed5a1f9df85f72d0ede36559976d102cf70f/height=288;version=1;width=512/https%3A%2F%2Fsaruwakakun.com%2Fwp-content%2Fuploads%2F2017%2F06%2Fdadada-06.png)
<style> #test1-container {border:1px solid black; padding:0;margin:0; width:30em; height:20em; position:relative; } #test1-header {background-color:rgba(255,192,255,0.5); position:absolute; top:0;left:0;right:0; height:30px;} #test1-content{background-color:rgba(255,255,192,0.5); position:absolute; top:30px;right:0;bottom:30px;left:0;} #test1-footer {background-color:rgba(192,255,255,0.5); positio
Carousel A slideshow component for cycling through elements—images or slides of text—like a carousel. How it works The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators. In browsers where the Page Visibilit
皆さんはremという単位を聞いたことがあるでしょうか? 知っている方は「フォントサイズ指定が%とかemとかよりすっきりしたやつ」という印象を持たれているのではないでしょうか。 「remはフォントサイズだけのものではない」という事実を知ると、実はかなり便利な単位だったりします。 詳細についてはこちらのページにも解説・デモがあります。 remとは Mozillaの説明によると、 rem ルート要素の font-size (例えば、html 要素の font-size) です。ルート要素で使うと初期値を表します。 とあります。 html { font-size: 15px; } p { font-size: 1.2rem; } strong { font-size: 1.4rem; } p要素には18px、strong要素には21pxのフォントサイズが適用されます。 emや%だと<p>の中に<s
Code デモのコードです. html <body> <div class='row'> <div class='item item1'>item1</div> <div class='item item2'>item2</div> <div class='item item3'>item3</div> <div class='item item4'>item4</div> <div class='item item5'>item5</div> </div> </body> css body { margin: 0px; } .row::before, .row::after { clear: both; content: ''; display: block; } .item { float: left; width: 50vw; height: 100vh; text-align: c
例として以下の様な HTML 構造があったとします。 <body> <!-- 画像解像度: 100 x 100 (px)--> <img src="images/thumbnail.jpg" /> </body> img { display: inline-block; margin: auto; width: 10vw; } img の幅を 10vw と指定しています。基準となるビューポートの幅を vw で表すと 100vw となります。iPhone 5S のビューポート幅をピクセルで表すと 320px な訳ですが、10vw はその 1/10 ということで32px が img の幅となります。つまり 1vw は 1% と同じ長さになります。もちろんリキッドレイアウトにも対応した動きを持っています。 Demo - viewport lengthを開く(このサンプルはChromeブラウザでの
「パララックス」をはじめとする「スクロールエフェクト」の魅力とは タグ Javascript Webサイト制作 「パララックス」はWebデザインのトレンドとして2012年頃から流行り始め、現在ではこの手法がより進化し、多くのサイトで利用されています。そろそろブームが過ぎるのでは?という意見も聞こえますが、パララックス効果を代表とするスクロールエフェクトはアイディア次第でまだまだWeb利用者たちを魅了する可能性をたくさん秘めているのです。 パララックスとは? パララックス(parallax)、直訳すると「視差」という意味です。もともと写真用語で、光学式ビューファインダーを使う際、レンズとの位置関係のズレにより、ファインダー視野と実際に撮影される画面にズレが生じる現象を指す言葉です。Webデザインにおけるパララックスは、スクロールといった動作に応じて、複数のレイヤー(層)にある視覚要素を異なる
少子高齢化が進む中、公的年金制度を持続可能なものにしようと、毎年、段階的に引き上げられてきた厚生年金の保険料率が、1日、0.118%引き上げられて18.3%となり、今後、この保険料率で据え置かれます。 そして、1日、厚生年金の保険料率は0.118%引き上げられて18.3%となり、今後、この保険料率で据え置かれます。 厚生年金の保険料は、「標準報酬月額」と呼ばれる平均的な月額報酬に保険料率を掛け合わせて算定され、企業と個人が折半して納めます。 日本年金機構によりますと、新しい保険料率が適用されると、例えば月収が29万円以上、31万円未満のサラリーマンの場合、月々の保険料は、今よりも177円増えて2万7450円になります。
マイクロ出版社、ferment booksの(よ)です。実は、みなさんに試して欲しい飲みものがあるんです。 それは、ヨーグルトコーヒー(上の写真)。 もうこの時点で、 「え~っ!? ヨーグルトとコーヒーなんて、合うわけないじゃん!!」 って思った、または、口にした読者が全体の約70%ほどは存在すると思うのですが、やホント、ダマされたと思って、一度、試してみてほしいんですよ。 めっちゃウマなんで。 「そう、おいしいんですよ~。ヨーグルトに対する先入観を打ち砕かれる飲み物ですね」 この、意外なおいしさに驚かされるヨーグルトコーヒーについて教えてくれたのは、江古田のベトナム料理店「ECODA HEM」の店主、足立由美子さんです。 前回、つくね串やレバー串など焼き鳥で作る「自由すぎるバインミー」について語ってくれた足立さん。いつもベトナム料理のエッセンスから、自由な発想や、独創的な食材の組み合わせ
項目を等幅で並べたいときに、display: inline-blockにしちゃって、幅を%指定するのはよくやると思います。 ただそこには落とし穴があって・・・。 width: 50%にしたのに横並びにならない marginもpaddingもborderもないのに並ばない! 49%にすると並ぶ・・ みたいな事態に遭遇したことはありませんか? もう悩まない! 犯人は改行と空白文字 以下、実際に見てみてください。 横並びにしたい要素(この場合はboxクラスのついたdiv)は、改行もスペースも入れずに記述する必要があるみたいです。 どうすれば やりかたはいくつかありますが、よくやるのはコレかな? <ul><!-- --><li>このように</li><!-- --><li>タグとタグの間を</li><!-- --><li>コメントとして亡き者にする</li><!-- --></ul> もちろん、 <
こんにちは、オオニシです。2回目の投稿です。 最近マスク着けてる人を多く見かけるようになってきましたね。風邪やインフルなんかで年越ししないように、しっかり健康には気を付けていきましょう。 今日は、友人からウェブコーディングのヘルプを受けた内容でひとつ書いてみます。 子要素の幅を合計100%にしても崩れる さて、タイトルの通り本題です。 プライベートな時間で友人のサイトコーディングを手伝っていたら、こんなことを言われました。 慣れた方ならどこが原因なのかある程度目星を付けて調べられると思いますが、慣れないと対処にかなり時間とられてしまいます。 まずはfloatを使った場合の正常ケース <div style="width:100%;"> <div style="width:50%; height:20px; background-color:red; float: left;"></div>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く