ドロップダウン式のスマホメニューを簡単に設置できるスクリプトの無料ダウンロード
ドロップダウン式のスマホメニューを簡単に設置できるスクリプトの無料ダウンロード 公開日 2018年7月17日 最終更新日 2021年10月25日 著者 Motohiro Tani ドロップダウン式(縦方向の折り畳み式)のスマホ用メニューを簡単に設置できるスクリプトを作りました。 名称は「スマホメニュースクリプト」としておきます。 今後、私自身がサイトを作る際に使うために作ったので、設定は最低限で済むようにできています。 CSSが理解できる人なら自由にデザインを変更することが可能でしょう。 現在の最新バージョンは2019年4月11日公開の2.0です。 参考ページ：プログラムをアップデートするの際の思想について 各バージョンごとのアップデート内容については、このページ最下部の「アップデート履歴」に記載してあります。 特長 スマホメニュースクリプトのサンプルとダウンロード 使い方の説明 既存サイ
【具体的なコードあり】スマホでグローバルメニューを表現する5パターン | HPcode（えいちぴーこーど）
.icon-hamburger { background: #fff; border: 1px solid #ccc; cursor: pointer; height: 50px; position: relative; width: 50px; display: none; margin-bottom: 0.4em; } .icon-hamburger span { background: #cccccc; display: block; height: 16%; left: 50%; margin: -8% 0 0 -42%; position: absolute; top: 50%; width: 84%; } .icon-hamburger span::before, .icon-hamburger span::after { background: #cccccc; conten
PC向けサイトがスマホでも崩れないようにする方法 - Qiita
PC向けに作った Web サイトをスマートフォンでみると、「 部分的に意図せず文字が大きくなる 」といった不具合が起きることがあります。 解決策ググって修正しようとすると、こんどは「 毎回、ページの左上が拡大された状態で表示されてしまう 」状況に陥ってしまうことがあります。 （私はありました。） ということで、PC向けサイトも最低限スマートフォンで見られるようにする方法をメモっときます。 勝手に文字が大きくなる対策 -webkit-text-size-adjust という、モバイル版ブラウザでのみ有効なプロパティがあるようです。 このプロパティが、デフォルトでは auto になっているため、文字が自動的に調整されて大きくなってしまう、というカラクリでした。 reset.css あたりに追記しておくのが妥当かと思います。 参考：iPhone版Safariで文字サイズがおかしくなるときは-we
スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定 スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。 フォ
【スマホ用ページ】低解像度、高解像度端末のどちらでもくっきり綺麗に表示しつつ、幅ぴったりにする HTML テンプレート。
こんにちは、ウェブ開発の林です。 スマートフォン向けウェブページを作る際、横幅ぴったりにしたいと思いませんか。 meta viewport というタグを使えば表示サイズを調整することができます。 ただそれを使ったとしても、Android / iPhone は端末により横幅が違うため個別に最適化するのは面倒です。 スマホ端末ごとにコードを分けることなく常に幅ぴったりにする HTML テンプレートを作りました。 こちらを参考に組んでみてはいかがでしょうか。 HTML テンプレートコード（ヒント付き） こちらの HTML コードを丸っとコピペして修正していくと楽だと思います。 追記： ライセンスフリーです。自由に使ってください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <!--
iphoneやスマートフォン専用サイトのデザイン作成の参考にするまとめサイトをまとめました[11サイト＋おまけ6] | HTML5でサイトをつくろう
最近スマートフォンのシェアが広がってきてWEBサイト作成もPCサイトのみでなくiphoneなどのスマートフォンを意識する提案も増えてきましたか？ しかしHTML5＋CSS3サイトで専用ページを作ったり、CMSのプラグインで振り分けたりと作り方は色々です。 参考となるiphoneサイトやスマートフォンサイトもまだまだ少ないので提案の際の資料探すのも大変ですよね・・。 これからもっと増えるとおもいますが現段階でのスマートフォンやiphoneサイト、iphoneアプリ専用サイトなどをまとめてみました。 日本ではサイトの数が少なかったので、昔からの知人の『バンクーバーのうぇぶ屋』のSenna君にも海外の方のアプリ系やiphone系のサイトを教えてもらいました。 他にもサイトがありましたら是非教えてください。 国内サイトのiPhoneサイトやスマートフォンサイト スマートフォンサイト集めま http
![iphoneやスマートフォン専用サイトのデザイン作成の参考にするまとめサイトをまとめました[11サイト＋おまけ6] | HTML5でサイトをつくろう](https://cdn-ak-scissors.b.st-hatena.com/image/square/d76e7d5cd6c53f5982c0f0cdf9da169256100b6a/height=288;version=1;width=512/http%3A%2F%2Fwww.html5-memo.com%2Fwp-content%2Fuploads%2F2011%2F08%2FA30.jpg)
ドコモ光GMOの評判の悪さとデメリットを完全解剖
スマホとのセット割などで人気のドコモ光は、プロバイダが選べるのが特徴です。 今回は数あるプロバイダの中でも特に人気のあるGMOについて、 GMOでドコモ光を登録した人の口コミと評判 GMOをプロバイダに選ぶメリットとデメリット 新規登録方法 などを詳しく解説していきたいと思います。 これからドコモ光を契約する人で、プロバイダ選びに悩んでいる人はぜひチェックしてみてくださいね。 ドコモ光GMOについては以下からどうぞ。 GMOドコモ光公式サイトはこちら【無料】 同じGMOでもwimaxであれば更に安く利用する事も可能です。 GMOとくとくBB公式サイトはこちら【無料】 光回線おすすめ安い比較ランキング。プロバイダ戸建てマンション ドコモ光のプロバイダGMOのガチ口コミと評判を大解析！ まずは、ドコモ光のプロバイダGMOを実際に利用した評判を見てみましょう。 「キャンペーンでお得に使えた！」A
ゼロからはじめるスマートフォン専用サイト（iPhone＆Android）の作り方を学べるサイト集めました | HTML5でサイトをつくろう
これからのWEB制作はPCサイトだけではなく、iphoneなどのスマートフォンやipadなどさまざまなデバイスでの閲覧を前提として作成しなければいけません。 iphoneサイトやAndroidサイトはHTML5やCSS3にかなり対応しているので簡単そうなイメージもありますが、縦画面、横画面など変化することを前提に構築しなければいけませんし、Androidは機種によって解像度が違う、機種によってCSSが適用されないという昔のモバイルサイトより大変なことがおきているようです。 またシミュレーターを使ったり、実機をたくさん揃えたり、レンタルしたりとPCサイトより手間な制作の時代に逆戻りですね・・。 友人に聞いたら現在は案件よってはiphoneのみ対応、iphoneとdocomoを対応、すべて対応などさまざまなようですね。まあこれは予算によるのかもしれませんね。 僕はまだ本格的なスマホサイトの仕事
iPhoneデザインアーカイブ
【初めての方はこちらをクリック】 iPhoneデザインアーカイブは、携帯サイトキャプチャ集「モバイルデザインアーカイブ」の姉妹サイトです。 iPhoneサイトを制作する上で参考になる秀逸なデザインを持つサイトのキャプチャを集めています。 iPhoneサイト制作を請け負ったけど、「なかなかデザインがまとまらない」「洗練されたデザインを参考にしたい」といった方のために、 優れたiPhoneサイトのデザインを集めました。また、iPhoneサイトにまだ手を出されていないモバイルデザイナーの方に、iPhone サイトデザインの雰囲気を掴んでいただくことで、「今後の仕事の幅を広げるきっかけになれば・・」、という思いで立ち上げました。 デザインに優れたiPhoneサイトはもちろん、技術的に優れたiPhoneサイト、そして現在のトレンドを捉えたiPhoneサイトを掲載しています。 なお、意識的にiPhon
作って学ぶスマートフォン対応サイトの基本 (1/4)
iPhone/Android向けサイト制作の基本を学ぶために、今回は実際に手を動かしながら非常に簡単なWebページを作ってみましょう。あわせて、スマートフォンサイト制作に最低限必要な制作環境（エディターとWebサーバー）についても紹介します。 用意するもの1：エディター HTMLを編集するのに必要です。使い慣れたソフトで構いませんが、もしなければ次のようなものを使うとよいでしょう。 ・Em Editor / Windows / 4000円（税込） http://jp.emeditor.com/ ・秀丸エディタ / Windows / 4200円（税込） http://hide.maruo.co.jp/ ・TeraPad / Windows / 無料 http://www5f.biglobe.ne.jp/~t-susumu/library/tpad.html ・JEdit X / Mac /
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSデザインサンプル
http://web-gimmick.com/jquery/863/
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Responsinator
sp-web.jp
Webサイトをスマートフォン対応してと言われた時に見ておきたいサイトまとめ｜caraldo.net | WebとiPhoneとロードバイクが大好き！