[CSS]ページが長くても、ページ全体を角丸のボーダーで囲むスタイルシートのテクニック | コリス
ページ全体を角丸のボーダーで囲み、そのページがスクロールするくらい長くても全体を囲むスタイルシートのテクニックを紹介します。 Body Border, Rounded Inside Step 1: ページ全体を角丸で囲む（スクロール非対応） Step 2: ページ全体を角丸で囲む（スクロール対応） Step 3: ページ全体を角丸で囲む（スクロールバーを変更） Step 1: ページ全体を角丸で囲む（スクロール非対応） まずはシンプルなスタイルシートで、ページ全体を角丸のボーダーで囲んでみましょう。 基本的な考え方は、body要素にborder-imageを使い、4つの角を角丸にします。使用するのは下記の画像です。 角丸用の画像 コードを見てみましょう。 HTML HTMLは、bodyだけで構いません。 <body> <h1>Rounded inside body border</h1>
★★★隙間を埋める！フッターをウィンドウ下部に固定する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%
jQueryで横スクロールのアニメーションするサイトを作る方法
「Smooth Vertical or Horizontal Page Scrolling with jQuery」で紹介されていた方法を参考に、jQueryでサイト全体を横や縦にスクロールさせる１つの方法を紹介しちゃいます！。 デモ スクロールさせる方法はいくつかあるのですが、今回の記事では一番簡単だと思われる方法を紹介することにします。まずは、デモをごらんください。元記事のデモはもっとかっこいいです。 デモを見る 考え方 基本的には、下のイメージのように、横スクロールでは、コンテンツを横に並べて、横長のコンテンツを作り、スクロールバーをスライドさせて見えるコンテンツを制御するのが一般的です。縦スクロールの場合も考え方は同じです。 ※縦スクロールのやり方は記事の後で紹介します。 基本レイアウト HTMLとCSSは、下記のようになります。 <!DOCTYPE html> <html lan
[JS]アニメーションが気持ちいい！複数のパネルをiOS風のエフェクトで切り替える -Kontext
CSSの3Dアニメーションを使った、iPhone, iPadアプリで見かけるパネル切替のエフェクトをウェブページに実装するスクリプトを紹介します、 Kontext -GitHub Kontextのデモ Kontextの使い方 Kontextのデモ デモでは3枚のパネルをダイナミックなアニメーションで切り替えます。 操作は、下部のナビゲーションとキーボードの矢印キーに対応しています。 Kontext -デモページ Kontextの使い方 スクリプトは単体で動作するので、jQueryなどは必要はありません。 Step 1: 外部ファイル 当スタイルシートをhead内に、スクリプトを<body>の上に外部ファイルとして記述します。 <head> <link rel="stylesheet" href="css/kontext.css"> <link rel="stylesheet" href="
スマートフォンなどに対応したレスポンシブデザインに関するCSSスタイル（font size自動調整をきるなど） - くらげだらけ
前にも一度、同じような問題に直面して調べて解決したような気がしたのですが、今回もおそらくその時と同じくGoogleで調べて解決したので、メモって忘れないようにしておこう。 font size自動調整をきる 最近ではレスポンシブデザインでいろんなデバイスに対応したりしますが、私もそんな感じの仕事をしていたわけです。最初はPC Chromeでwindowを伸び縮みさせながら作っていたわけですが、ある程度できた所でiPhone Mobile Safariでチェックしていたのです。Portrait mode（縦向き）では問題なく閲覧していたのですが、Landscape mode（横向き）にしたときにどうも文字サイズが変になります。 最近はiPhoneもリモートでWeb inspectorで見れたりしますから、細かく調べてみても数値的には問題無さそう。おかしいなってことで調べた後に、iPhoneでは
-webkit-text-size-adjust: none を絶対に設定してはいけない理由
PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。 以上。 で終わってしまうと記事にならないので、ちゃんと説明しておく。 そもそも -webkit-text-size-adjust とは何か iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。 これを制御するのが CSS の -webkit-text-size-adjust である。 文字サイズ自動調整の具体例 次のような HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-
jQueryでスクロールすると表示する系いろいろ
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration
[CSS]h1一つだけでこんなにかわいいレトロ風リボンが実装できるスタイルシート
このレトロ風の凝ったデザインのリボン、HTMLはh1要素だけで実装されています。 余分なspan, div要素もなく、もちろん画像は一切使用されていません。 Single Element Pure CSS3 Double Fold Ribbon CSSはそれなりのボリュームになりますが、スタイルシートだけでデザインする見出しのバリエーションとしてストックしておきたいですね。 HTML HTMLは非常にシンプルです。 「contenteditable」はコンテンツの編集許可で、見出しのテキストを編集できます。 <h1>Single Element - Pure CSS3 - Type here...</h1> 外部スクリプト スタイルシートのベンダープレフィックスを自動で付与するために、外部スクリプトを使用します。 CSS スタイルシートにベンダープレフィックスを記述すれば上記のスクリプトは
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
