ちゅうわけで、新しくジャズカルテット組んだのでサイト作ってみましたよ、と。 Dynamite Satan plus こう見えて、いちおうジャズバンドです。 本職がコーダーじゃないので、たまにコーディングしとかないといろいろ忘れそう、 ということでリハビリがてらやってみました。 全く情報量が無いなりに、いろいろと新しいことに手を出そうという目論見もあります。 とにかく単純でシンプルなの作りたい。画像は使わない。 静的サイトでの、phpによる共通テンプレ化 効率的なcssの組み方 生まれて初めてのサブドメイン レスポンシブデザインでスマートフォン対応 メインは最後にあるレスポンシブです。最近仕事で使ったんで、プライベートでもいっちょやってみようかと。レスポンシブについては今更わたくしが説明するのもアレなんで、こういったサイトをご覧頂ければと思います。 CSS3 Media Queries を使

京アニ放火事件を受けて、メルカリに京アニ関連グッズ出品が急増しています。しかし中には高額すぎる出品があったり、そもそもメルカリで京アニグッズ …

はじめまして、今回初登場のアシスタントデザイナーのまこっちゃんです。 今後ともよろしくお願いいたします。 最近はスマートフォンサイト制作全盛期ですよね。今後はスマートフォンでリッチなサイトが、現れるのではないかとわくわくしています。 今回は、スマートフォンサイト制作中に躓いた固定ヘッダーにつきまして、『固定ヘッダーのJavaScriptは何がベストか』を考えていきます。 Mobile Webkit では【position:fixed;】が効かない！ 皆さんもPCサイトで一度は固定ヘッダーのサイトを制作された事があるかと思いますが、スマートフォンサイト制作で試された方もいらっしゃるのではないでしょうか。 PCサイトの固定ヘッダーで使用される【position:fixed;】がiPhone・iPadなどでは効かないという問題点に気をつけましょう。 iscroll まず、スマートフォン向けに使わ

暑い夏がやってきそうなので、久しぶりにツーブロック的な刈り上げにしてみましたishidaです。 今回は最近作業した案件で、これまであまり実践的に使わなかったCSSレイアウトを2サイト連続で使ってみたので、ご紹介。自分も忘れないようにメモ的エントリーです。 ページ下部に固定されるフッターを実現するためのCSSレイアウトです。 positionで実現する方法もありますが、コンテンツ量によっては表示が崩れるので今回は直球勝負です。 XHTML ソースはこんな感じになります。 <div id="container"> <div id="header"> ヘッダー <!-- /#header --></div> <div id="content"> <h1>フッターをブラウザ下部に固定するサンプル</h1> <p>本文が入ります。本文が入ります。本文が入ります。</p> <!-- /#content

iOSのSafariでなぜか特定のfont-size（11px、10px、9px）のときだけマルチバイトの幅計算がおかしいのか、折り返し位置がずれるという件。 DEMO これをiPhoneで見るとこんな感じになる。 こんな感じ。11px、10px、9pxのときに右側に隙間が空いてるがわかると思います。これは特にpaddingとかとってるわけではなくて、このfont-sizeのときだけなぜか隙間が空くんです。8pxは大丈夫なので11px以下というわけではないみたい。さらにマルチバイトでなければ隙間はできない。謎。 ちなみにiOS4.3でも直ってなかった。Androidは大丈夫。 解決方法知ってる人がいたら教えてほしい。 追記：letter-spacing: -0.001em; で直るっぽい

京アニ放火事件を受けて、メルカリに京アニ関連グッズ出品が急増しています。しかし中には高額すぎる出品があったり、そもそもメルカリで京アニグッズを今購入したところで京アニ支援に繋がる事はないので売り文句等にだまされない注意が必要です。 京アニ高額転売がメルカリで確認される メルカリに京都アニメーションを絡めた高額転売が出てきた。 pic.twitter.com/xGekSI34GR — prajñā (@studytmp) July 18, 2019 京アニ火災を報じる新聞記事でさえも出品される メルカリで京アニの記事販売する無神経さ。最低。 pic.twitter.com/Ba62m9r9pZ — &A (@heijyo8710) July 18, 2019 転売に対するTwitterの声 https://twitter.com/mina_0331/status/11518796102057

あたり前だろうと思っていることが実はあたり前ではないとうことがありますね。 スマホサイトのデザインでよくある、タップできる領域の右端に矢印みたいなのがついてるものがあります。 こんなやつですね。 こんな時に矢印みたいなアイコンをCSSで実装してみましょう。 以下のHTMLとCSSで実装可能です。 HTML <ul> <li><a href="#">あいうえお</a></li> <li><a href="#">かきくけこさしすせそたちつてとなにぬねの</a></li> </ul> CSS * { margin: 0; padding: 0; } a { display: block; position: relative; border-bottom: 1px solid #ccc; padding: 11px 25px 11px 11px; color: #000; font-weight

こんにちは、りうこです。 今日から11月ですね! といっても今日も20℃オーバーで暖かいので、寒いのが苦手な私はこのくらいの気温が続いてくれればいいのに。。と思っています。 では、早速ですがスマートフォンをデザインする際に気をつけたいことをご紹介します。 横向きで見ることを想定したデザイン これはコーディングの際にも気をつけなければならないのですが、 固定幅でデザインすると、横向きにしたときに下の画像のように余白ができてしまいます。 リキッド（可変幅）を想定してデザインするのが基本です。 フォントサイズは12px以上 文字が読みづらくなるということもありますが、 iOSのSafariでは、文字サイズが11px、10px、9pxのときは 折り返し地点の右側に余白ができるというバグがあるようです。 【参考】iOSのSafariで特定のfont-sizeのときの謎の隙間 http://webte

iPhoneやAndroidなどスマートフォンサイトでは、電話番号やメールアドレスらしき文字列があった場合に、自動でリンクが設定されます。 リンクをタッチするだけで、電話をかけれたりメールを送ることができるので、一見して親切な機能のように思われます。 しかし、あくまでブラウザが自動で検出しているので、その精度は完全ではありません。 長いメールアドレスがレイアウトの関係で折りかえってる場合や、電話番号の間にハイフンやスペースがある場合など、ブラウザがリンクの範囲を認識できずに、誤った番号への通知リンクとなる危険性があります。 例えば「aaaaa.bbbbb.ccccc@abc.jp」をクリックすると「ccccc@abc.jp」があて先にセットされるなど、実際起こるとなると恐ろしい事ですね。 自動リンクを無効にする このような問題を回避するために、自動リンクを無効にする方法があります。 電話番