carouFredSelで画面横幅いっぱいのスライダーや、レスポンシブスライダーを実装する｜Gimmick log
<div id="slider"> <div id="wrapper"> <ul id="carousel"> <li><a href="#"><img src="../images/main-bnr/01.jpg" width="600" height="300" /></a></li> <li><a href="#"><img src="../images/main-bnr/02.jpg" width="600" height="300" /></a></li> <li><a href="#"><img src="../images/main-bnr/03.jpg" width="600" height="300" /></a></li> <li><a href="#"><img src="../images/main-bnr/04.jpg" width="600" height="3
CSS GridとFlexboxを使ってメディアクエリなしでレスポンシブにレイアウトする方法
レスポンシブなレイアウトにはメディアクエリが欠かせないわけですが、CSS GridやFlexboxを使えばメディアクエリなしでもレスポンシブなレイアウトが可能です。メディアクエリが全くいらなくなるということはないと思いますが、CSS GridとFlexboxを使えば、メディアクエリの記述を減らす方法があります。しかもコンテンツの幅に合わせて中身のレイアウトを調整するようなエレメント・クエリ的な使い方も、ある程度なら実現できます。 応用すれば今後のレスポンシブなレイアウトのCSSの組み方を変えてしまうような方法です。 ※デモはFirefox 58.0.2、Chrome 64.0.3282.140、Safari 11.0.3でテストしています。 CSS Gridを使ったレスポンシブレイアウト CSS Gridで以下の2つのCSS関数を使うと、メディアクエリなしでレスポンシブなレイアウトが実現で
横メニューの作り方
レスポンシブに対応した横メニューを作る機会があったので、せっかくですし作り方を紹介したいと思います。お役に立てばうれしいです。 【追記 2014.03.19】 元々のタイトルは「レスポンシブWebデザインに対応した横メニューの作り方」でしたが、よく考えるとスマホ対応になったら縦メニューになりますのでタイトルを変更しました。 id名「toggle」の部分は横幅が480px以下の場合に表示するボタンです。481px以上の場合表示させません。その他はごく普通の横メニューです。 CSS 続いてCSSです。まずは全体を載せます。 #menu{ width: 100%; max-width: 960px; margin: 0 auto; padding: 0; } #menu li{ display: block; float: left; width: 12.5%; margin: 0; paddi
スマホ表示とデスクトップ表示でレスポンシブに改行位置を変える時はbrタグにクラスを付けてcssだけで管理すると超楽な件 | WEMO
レスポンシブコーディングをするときに、デスクトップ表示とスマホ表示でテキストの改行位置を変えたい時、みなさんどうしてますか？ 私の場合、少し前までPHP側からユーザーエージェントでスマホ分岐させ、brタグの位置を変えたpタグごと記述を出し分けていました... 例えば、IS_MOBILEにスマホかどうかの真偽値が入っているとして、 <?php if (IS_MOBILE): ?> <!-- スマホ --> <p> テキストテキスト<br> テキスト<br> テキストテキスト </p> <?php else: ?> <!-- デスクトップ --> <p> テキストテキスト<br> テキストテキストテキスト </p> <?php endif; ?>
Flexboxを使った2カラム・3カラム・マルチレイアウトの基本と応用
2015年8月17日 CSS 以前「これからのCSSレイアウトはFlexboxで決まり！」という記事で紹介した、CSSでのレイアウト組みに大活躍できるFlexbox。前回は基本的な使い方の紹介をしたので、今回はより実践的に使える実例を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ Flexbox対応ブラウザー 前述の記事の通り、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。 そしておなじみの日本でのブラウザーシェア情報。2015年7月ではIE11が32.86%でトップです。Flexboxに対応していないIE9は3.17%。制作するサイトに応じてFlexboxを取り入れるか検討しましょう。 一番基本的なWebサイトのレイアウトである、2カラム。まずはこのレイア
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
