横並びCSSプロパティ(inline-block、table-cell、float、Flexbox)のまとめCSSfloatflexbox
HTMLのレイアウト方法で最も新しいフレキシブルボックスをまめわざでも利用しています。 手軽に並列レイアウトができるスタイルですが、他の並列レイアウトとの使い分けはどうすべきか、flexにしかできない表現はあるのかを、実例を挙げながら解説します。
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. A reader writes in: I’ve seen done beautifully, but I’m having a hard time finding any articles on best practices. I try to steer clients away from wanting video background even though it’s hard to argue against it because it does look stunning when done right. “Look at my c
2014年7月3日 SVG ベクター画像を表示する際とっても便利なSVG。名前を聞いたことのある方も多いのではないでしょうか?SVG自体は10年以上前から存在するのですが、HTML5の普及とともに多くのブラウザーでサポートされるようになり、今年に入ってから徐々に見かける機会が増えてきました。今回はそんなSVGにフォーカスしようと思います。 ↑私が10年以上利用している会計ソフト! 2014年7月3日 追記:SVGスプライトの書き方について修正&追記しました。 SVGってなに? SVG(Scalable Vector Graphics)はIllustratorで作成したようなベクター画像を表示する技術です。Web上で一般的に使われる画像形式であるJPEGやPNGなどのビットマップ形式とは違い、ベクター形式の画像は、拡大縮小しても画質が劣化しません。 Appleがレティナディスプレイを発表して
我々は何年待ったのか?このお手軽外接リサイズobject-fitの登場を!なのにIE11非対応って哀しすぎる。またしてもこの余生ブラウザにもどかしい思いを味わっているのだ。 Edge非対応OS、Windows7のサポート終了まで約1年半(2020年1月終了!)。だが、大丈夫。手はあるんです! 目次: object-fitとは何ぞや 配置した画像 object-fitのコード いろいろなobject-fit object-fit前のおもひでぽろぽろ 大問題!IEで見たらfillってるぢゃないか!! IE11の寿命おさらい 1年半も待てない!IE対策してくれるJSファイル 忘れちゃならねぇCSS追記でIE対策完了! object-fitとは何ぞや たとえばこんな記事一覧があったとする。 この左側の画像に、object-fitを使っています。 いったい何をしているのか。ここでやっているのは「外接
便利過ぎてobject-fitナシではもう組めなくなってきた今日このごろ。 modernizrなどを使わなくてもCSSだけでIE10(IE9もいけるかも?)に対応する方法を知ったので書いておきます。 absoluteにしてtansformを使って画像の真ん中を合わせています。 (transformが使えないブラウザなんてもう知らない。) あくまでレガシー対応で、完全対応ではないですが、デザインによってはこれで十分なケースがあると思うので。 html <span class="media"> <img src="image01.jpg" alt="" /> </span> <span class="media"> <img src="image02.jpg" alt="" /> </span> .media { position: relative; width: 500px; height
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The difference between <html> and <body> is easy to overlook. It seems to be one of those things that falls into the category of trivial. Admittedly, I have a bad habit of applying all global styles to <body> and, when that falls short, I move to <html> without thinking about it. There are d
はじめに 2017/01/20現在、挙動のテストが追いついていないので、このページを訪れる人に役立つと思われるリンクを置いておきます。 https://speakerdeck.com/tacamy/modanri-ben-yu-huontozhi-ding https://rxon.now.sh/crossPlatformYu.md 以下は2013年11月の情報なので参考にしないでください(その間にChoromeがDirectWriteに対応してnameテーブルの参照メタデータが変わったりしていて、設定すべきfont-family値が変わっていることが大きな要因です)。 序文 Windows8.1とOS X Mavericksのリリースが開始されました。 Windows8.1ではRC版にインストールされていた游ゴシックに加えて、游明朝もインストールされています。 OS X Maverick
こんにちは、さいとうです。 えー、これからCSSのとってもニッチなことについて語らせていただきますので、 興味の無い方はこちらの写真で和んでから、そっとページを移動してください。 −−− 擬似要素[::before]や[::after]は、指定した要素内の前後に文字を挿入するCSSです。 言葉で書いてもわかりにくいですね。 [html] <p class=“text”>おすすめアイテム</p> [css] p.text::before { content: “【NEW】”; } これをブラウザで表示した結果は、 【NEW】おすすめアイテム といった具合に、表示結果を見ると「おすすめアイテム」というテキストの前に「【NEW】」のテキストが挿入されています。 −−− では、「【NEW】」の代わりに「>」(半角の大なり記号)を入れてみましょう。 「>」はhtmlにおいてタグを指定する時に使用する
先週インフルエンザに感染して、ダウンしてました ishida です。 今年のインフルエンザは感染力がかなり強いようで、 次女→自分→長女→嫁(いまココ)と感染してしまいインフル一家となってしまいました。。。 助けてぇ〜。 急な高熱・のどの痛み・関節痛などの症状がでたら、すぐ病院に行きましょうね。 さて今回は、先日コーディング中に遭遇したChromeブラウザのみにおきた現象を回避するための Tips を紹介します。 最近のHTMLコーディングでは、ボタンなどのマウスオーバーエフェクトを CSS で対応することが多いです。よく使うのは、以下のようなものです。 ソースコード HTML <p class="button"><a href="#"><img src="hogehoge.png" alt="ボタン" width="300" height="80"></a></p> .button {
Javascriptを使わず、CSSだけでimgやdivやiframeのアスペクト比を固定したままコンテナに合わせてリサイズする方法です。 レスポンシブなデザインの場合は端末の画面サイズに合わせて要素の幅を変える必要があるので、こういうテクニックを使ってアスペクト比を固定してやります。 imgの場合 HTML
最新のIT技術を駆使して音楽関連サービスを展開しています。 日々の活動内容から得た知識をお届けする開発ブログです。 游ゴシック・游明朝とは 游ゴシックおよび游明朝とは、字游工房さんで販売されているフォントです。 ディスプレイで見ても、印刷してもとても綺麗なフォントで、私もよく使います。 (メイリオは、ディスプレイでの映りを重視しすぎて、印刷するとなんか微妙です) このフォントは2013年ごろより急激に知名度が上がりました。その切っ掛けは Windows 及び Mac に標準でバンドルされたことです。 Windws であれば Windows 8.1 以降に、Mac であれば OSX Marverics 以降に標準で入っています。 Windows にも Mac にも入っている綺麗なフォントというのは、Web サイトを作成する人にとって素晴らしいものです。 とりあえず游ゴシックや游明朝を指定して
最初 :first-child 最初の要素(親要素から見て、子要素すべての最初) デモ :first-of-type ある要素の最初(親要素から見て、ある子要素の最初) デモ 最後 :last-child 最後の要素(親要素から見て、子要素すべての最後) デモ :last-of-type ある要素の最後(親要素から見て、ある子要素の最後) デモ 1個だけ :only-child 1個だけ子要素がある(親要素から見て、子要素が1個だけある) デモ :only-of-type 1個だけある子要素がある(親要素から見て、ある子要素が1個だけある) デモ X番目 :nth-child(X) X番目 デモ:5番目 :nth-of-type(X) ある要素のX番目 デモ:5番目 :nth-child(Xn) Xの倍数 デモ:2の倍数 :nth-of-type(Xn) ある要素のXの倍数 デモ:2の倍数
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! IN A WORLD of responsive and fluid layouts on the web, ONE MEDIA TYPE stands in the way of perfect harmony: video. There are lots of ways in which video can be displayed on your site. You might be self-hosting the video and presenting it via the HTML5 <video> tag. You might be using YouTube,
表題の件にハマりました。 iOS7: 未確認 iOS8: 再現 iOS9: 未確認(巷の記事によるとiOS9でも発生する模様) iOS10: 再現 iOS11.3: 動いたり動かなかったりする(対策施した版もアウトだったかどうかははっきり記録してなかったです…) iOS11.X のどこかでは height: 100% の代わりに height: 100vh を使わないと動かない時代もあった模様? iOS12.2: どちらの版も動いたり動かなかったりする(つまり本記事の対策では効果なし) 例えばページ上にレイヤーを重ねて、一覧から項目を選択させるような場合に、絶対位置指定した要素の中でスクロールさせたいことってありますよね? デモ(過去Safariで動かなかった版) デモ(後述の対策を施した版) このとき、次の条件を満たしてしまうと iOS Safari でスクロールできなくなってしまいます
日本語の組版において 「縦書きと横書きの選択肢がある」 ということは極めて自然ですが、 世界的にはマイナーな 書字方向でもあります。 一方、東アジアでは 縦書きを利用している国が 一定数あり、横書きの文化圏においても 縦書きを利用するケースが 「珍しい」というほど 少なくないことも事実です。 横書きの文字組が中心だった Webの世界において、 縦書きの知見を取り込み、 縦と横の文字組を自由に デザインできるようになることで、 Webデザインは更なる自由と 高い表現の可能性を 獲得できると言えます。 私たち『次世代Webブラウザの テキストレイアウトに関する 検討会(縦書きWeb普及委員会)』は、 縦書きレイアウトの 国際標準化活動を推進し、 縦書きWebコンテンツの 普及促進に取り組んでいます。 The concept of being able to choose between a h
レスポンシブWebデザインでiframe要素のサイズ比率を維持した状態で縮小させる方法を紹介します。 (1) iframe要素にdiv要素(親)を囲む (2) 親、iframe要素にpositionプロパティを指定、親にはrelative、iframe要素にはabsolute (3) 親の要素にpadding-topプロパティ(bottomでも可)に画面比率を算出して指定 ※画面比率の算出方法 16:9の場合(横幅は100%) 100 / 16 9 = 56.25% 4:3の場合(横幅は100%) 100 / 4 3 = 75% デモ(リンク) ※デモは4:3の場合です。 CSS .iframe-content { position: relative; width: 100%; padding: 75% 0 0 0; } .iframe-content iframe { position
scaleでは、負の値が設定できます。 x軸でマイナス1を設定すると、あら不思議。 左右反転させることが出来ます。 ぼくは業務でもかなりの頻度で使っています。 rotate(180deg)でもできるけど… 左右対称の画像の場合、rotate(180deg) で180度回転させることでも反転させられます。 .flip-horizontal { transform: rotate(180deg); } ただし、こちらはあまりおすすめできません。 画像の中心がずれている場合、きれいに左右反転させることができないのです。 これは transform-origin: 50% 50% を指定しても解決できません。 ですので、画像の反転は transform: rotate(-1, 1) がおすすめです。 上下反転するには もし上下反転させたければ、scale(1, -1) とy軸に設定すればいいのです
One of my pet peeves with fixed or absolute positioned elements is the <body> scrolling while you scroll the the positioned element. Have you ever tried scrolling a dialog and seeing the page scroll in the background? Awful user experience, bordering on embarrassing. Yikes. So what's the best way to prevent the <body> scrolling in the background? Pass on scroll events and preventDefault or sto
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く