デザインが素敵な大学図書館Webサイト ver.2019 - やわらか図書館学
年に一度のお楽しみ（自分の）。 説明 東京工業大学様の大学図書館のウェブサイト一覧に掲載された700超のサイトの中から選んでいます。（過去に選んだものは対象外） 選出基準は「きれいな配色・レイアウトと適度な情報量（主観）」です。 CMSとレスポンシブへの対応状況もあわせて記載しています。*1 青山学院大学・女子短期大学図書館 ガラッと印象が変わりました。高級感のあるゴールドが素敵です。カレンダーの各館の名前の色に以前のサイトの面影があります。 CMS: WordPress / レスポンシブ: 対応 出典：https://www.agulin.aoyama.ac.jp/ 九州工業大学附属図書館 カラフルなのにガチャガチャしていなくて素敵です。各お知らせ（？）のサムネイルも仕上がっていて、かなり"やってる"感あります。 CMS: Drupal / レスポンシブ: 対応 出典：https://w
Retina対応にSVGは本当に使えるのか？
高解像度スクリーンに対応できるのは嬉しいですが、普通の解像度しか持たない端末にも大きなファイルをダウンロードさせなければならないのは、3G回線などの遅い回線での表示パフォーマンスを考慮すると、SVGが適していないケースもありそうです。ただ、サーバ上でGZIP圧縮した場合、平均30%ほどサイズを削減できることを考慮すると、数十KBの差がある場合を除いて、表示パフォーマンスと表示クオリティのバランスもとれてくる気がしています。 ちなみに、Illustratorで「圧縮」を選択してsvgzとして保存すると2,395Bになりました。これならPNG8のファイルサイズにだいぶ近くて良い感じですね。Apacheの設定にSVGZが記述されていれば圧縮版を使えるので、このサイズだったら現実的な気がしてきました。ただ、サーバの設定がうまくいかないのか、Illustratorでの書き出しが悪いのか、SVGZを表
Liner
無料WordPressテーマ Liner Liner はクリエイティブにもビジネスにも使える、1カラムのシンプルなWordPressテーマ。 気軽にはじめよう！ 無料WordPressテーマ Liner は無料で使用できるWordPressテーマ！今すぐダウンロードして使用できます。 そのまま使っても、カスタマイズして使ってもOK！用途に合わせてご自由にお使いください。 スマホでも見やすい！1カラムのレスポンシブ・テーマ Liner は1カラムのレスポンシブデザインテーマです。PC/Macでの表示はもちろんのこと、iPadなどのタブレットやスマートフォンでの表示を自動で最適化します。 だれでも簡単！ デザインカスタマイズ カスタムヘッダー機能に対応しており、トップページのメインビジュアルや各ページのヘッダー画像、ロゴマークは管理画面から簡単にアップロードして変更できます。フォントの種類（ゴ
軽量でシンプルなレスポンシブフレームワーク「Skeleton」 | バニデザノート
「Skeleton」は、レスポンシブCSSフレームワークです。「シンプルで、羽根のように軽い」がコンセプトで、基本的なhtmlコンポーネントと、グリッドレイアウトのみが入っています。 モバイルファーストな意識が高く、ファイル自身も少なく軽量なので全体が見渡しやすく扱いやすい印象です。 960gsベースの、グリッドシステムです。HDなPCサイズでのみ横幅を広げるなど、イレギュラーなこともCSSをいじれば可能です。シンプルなコンポーネントのみだからオーバーライドしなくてもできるのが素敵。 <!-- .container is main centered wrapper --> <div class="container"> <!-- columns should be the immediate child of a .row --> <div class="row"> <div class=
Tumblrをカスタマイズして、無料テーマとして申請しました | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ディレクターのはるかです。 昨日、デザイナーのぺちこのTumblrカスタマイズ解説ブログが完結しましたね。 ※知らない方は下記をどうぞ Vol.1 テーマカスタマイズの基本編 Vol.2 テーマカスタマイズの独自タグ理解編 Vol.3 テーマカスタマイズ実践編 Vol.3にもあるように、先日完成したオリジナルテーマ「Simplig-folio」を無料テーマへ申請しましたので、今回は無料テーマへの申請方法をご紹介します。 無料テーマに申請するために必要なこと https://www.tumblr.com/themes/new 上記にある無料テーマの申請ページで行うことは、大きく5つに分けられます。 1. テーマのタイトル、タグライン テーマのタイトルとタグライン（テーマの特徴）を記載します。なお、サムネイル画像は375×250pxでご用意ください。 今回はテーマのタイトルを「si
たった一行でさまざまな要素をレスポンシブ対応にするスタイルシート -Fluidity | コリス
iframeを使った地図 Fluidityの使い方 使い方は簡単です。 Step 1: 外部ファイル head内に当スタイルシートを追加するだけで完了です。 <link rel="stylesheet" href="css/fluidity.min.css"> Step 2: HTML あとは、通常通りにHTMLを記述するだけです。 画像の場合 <img src="image.png"> テーブルの場合 テーブルの時はclassを加えます。 <div class="overflow-container"> <table> <!-- table contents --> </table> </div> 地図の場合 <iframe src="https://www.google.com/maps/embed?マップのコード" width="100%" height="450" framebor
レスポンシブなjQueryスライドショープラグイン2012年保存版
RefineSlide / Cycle2 / iosscripts.com &ndas...他...全18件
レスポンシブWebデザインの作り方（簡単設定方法）
webmobileは、みんなが知りたいスマホ・通信ガジェットの使い方を発信しているレビューサイトだよ♪ webmobile（ウェブモバイル）は、大好きなPixel/iPhone/MVNO/amazonについて、気づいたこと・困った事の解決など経験したことを発信しています。 運営歴はかれこれ10年以上です。 私が初めて買ったスマートフォンは、auから発売されたSHARP製IS03。今でもデザインの良さに感銘を受けます。 今のメイン機はGooglePixelとiPhone15ProMAXです。 昔はASUS製ZenFoneにはまり、新製品が発売されるごとに買っていました。 MVNOのお店に我が子と訪ねる旅、楽しかったなぁ♪ ご縁あって、UQコミュニケーションズ本社に行くこともありました。 UQモバイル公式グッズをたくさん手に入れる機会がありました。 東京新宿にあるLINE株式会社に招待して貰っ
Responsive Web Css
HTMLとCSSのファイルは「page.zip」として一つのファイルで、自動ダウンロードされます。 ファイルの中身は、下記のようになりました。 HTML HTMLのスケルトンです。 必要最小限のもののみの構成です。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <meta name="generator" content="Responsive Web Css (www.responsivewebcss.com)" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="Stylesheet" href="index.html.css" /> </head> <bod
Webデザインのタネ | 未経験からWebデザイナーを目指した私が、Web制作のスキルアップのためのTipsをお届けします
Web制作の現場では、日々新しいデザインのインスピレーションを得るためにギャラリーサイトを活用しています。しかし、数多くあるギャラリーサイトの中から、自分の目的に合った適切なサイトを見つけ出すのは意外と難しいものです。 この記事では、複数の...
全部無料！個人ブログ・ポートフォリオからビジネスまで、レスポンシブ対応のWordPressのテーマファイルのまとめ -2013年夏
最近リリースしたもの中心に、個人ブログ、写真やクリエイティブな作品を見せるポートフォリオ、企業・ビジネスサイトなど、レスポンシブ対応のWordPressのテーマファイルのまとめをflashuserから紹介します。
レスポンシブ対応サイトで使用されているナビゲーションのパターンのまとめ
デスクトップ、タブレット、スマフォなどのレスポンシブ対応サイトで使用されているナビゲーションのトレンドを紹介します。 特に小さいサイズになった際に、どのようにアイテムを見せるかさまざまな工夫がこらされています。 Popular Design Trends for Responsive Navigation 下記は各ポイントを意訳したものです。 ブロックレベルのメニュー 凝縮するナビゲーション フォームのセレクトメニュー 非表示のドロップダウン スライドするナビゲーションボックス 終わりに -次のプロジェクトの開始に ブロックレベルのメニュー まずは、ボックスをベースとしたデザインのブロックレベルのナビゲーションです。表示サイズに合わせて、ボックスのサイズが変わったり、配置が変わったりします。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Responsive Web Design JP（日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト）
主要デバイスが全部揃ってるレスポンシブ デザインのモックアップ用のPSD素材 -Responsive Design Mock-up Pack
[JS]面倒なスマフォ・タブレットでの異なるビューポートサイズの確認が簡単にできるスクリプト -rFrame
新着記事