スポンサードリンク
カテゴリー:"開発"

Bootstrapを使ってWebページにタブUIを実装しよう (2日目)

Bootstrap top
前回BootstrapのタブUIでタブの切替が出来るところまでを実装したのですが、続けて表示の切り替えも出来るようにしてみました。

続きを読む »

アンカータグを使ってページ内リンクを作成しよう

HTMLのアンカータグ(<a>)を使って、Webページにページ内リンクを作るための覚え書きです。

続きを読む »

jQuery UI のタブUIを動かしてみた

jQuery UI top

とりあえず jQuery UI のタブUIを動かしてみたのですが、これが拍子抜けするほど簡単に実装できちゃいました。

続きを読む »

jQuery UI を導入してみよう

jQuery UI top

jQueryのプロジェクトの一つでWebサイト用UIのフレームワークである jQuery UI を試してみることになったので、導入までの覚え書きです。

続きを読む »

Bootstrapを使ってWebページにタブUIを実装しよう

Bootstrap top

Bootstrapを導入する目的の一つに、「タブUIが簡単に実装できそう」というのがありまして、いそいそとサンプルコードをコピペしてみたのですが・・・。

続きを読む »

Bootstrapを導入してみよう

Bootstrap top

言わずと知れたWebサイト用UIのフレームワークである Bootstrap を使ってみよう! という話になったので、導入の覚え書きです。

続きを読む »

CSSを使ってボックス要素の角を丸くしよう

ボックス要素の四隅が
丸くなるのです

ボックス要素の角を丸くするためのCSSの覚え書きです。

続きを読む »

レスポンシブWebデザインで画面の幅より大きい画像を縮小しよう

ようやく当ブログもレスポンシブデザインになったのですが、スマートフォンだと横幅が370pxくらいの扱いになっちゃうんですよね。

それの何が問題かというと、横幅400pxで用意してた各エントリーの画像がスマホのブラウザで表示すると、横にはみ出してしまうんです。

なにか良い方法はないものかとWebで検索していたら、CSSにナイスな指定の方法があるではないですか!

指定の内容としては、「画像の最大サイズは画面の幅まで」としてやるわけです。具体的には・・・

こんな感じになります。

これで横幅400px以下の画面において、横幅400px以上の画像は画面の幅までのサイズに縮小されます。

またそれ以下のサイズの画像については、そのままのサイズで表示されます。

うん。これでOK!

参照リンク
 ・レスポンシブでPC向け画像をスマートフォンに対応させるあれこれ | Creator Clip
 ・【HTML5】 レスポンシブデザイン 画像のサイズを可変に設定 - HTML5, jQuery役立つ情報ブログ|天下一Web道会

レスポンシブWebデザインでレイアウト変更の画面サイズ設定で悩む

レスポンシブWebデザインにおけるデザインの切り替えは、画面の横幅(ピクセル)によって行われるわけですが、どこを基準に切り替えるかというのがなかなかに悩ましいんです。

続きを読む »

システムが対応してなくてもレスポンシブなWebデザインはできる!

ただし、条件がありまして、

  1. CSSの編集ができる
  2. 読み込むCSSファイルを変更もしくは追加することができる

このどちらかが可能である必要があります。また、CSSについての知識も必要です。

続きを読む »

スポンサードリンク

プロフィール


  • 書いてる人:夢界 陸

    名古屋在住のおっさん。
    プログラミングやガジェットの話など、 日々の興味を徒然と綴っています。



    Twitterやってます @mukairiku



    運営サイト
    www.mukairiku.net

アクセスランキング


ブログ内検索

Licenses

  • Creative Commons License

OTHER


  • このブログのはてなブックマーク数

    ブログパーツ
Blog powered by TypePad

スポンサードリンク