css

レスポンシブに対応したテーブルの例

どうも、洗濯して干して家を出たら雨が降ってそわそわしていた、よっしぃーです。 今回、最近悩まされる横に長いテーブルの対応方法を考えようと思います。 すでに、この問題に関して皆さんがいろいろなアイデアを出していて、どれがいいかなぁっていう感じでした。(参考サイト) ちょっと困ったタイプのテーブルを対応しなくてはいけなくなった時、見やすさなどを考慮した結果、少し形を変えることにしました。 html <table> <thead> <tr> <th>&nbsp;</th>

2016-10-20T00:14:20+09:002015/06/28|Categories: WEB|Tags: , , |

ベンダープレフィックスが必要かどうか

どうも、ブラジル産の七面鳥を食べてからいろいろ話を聞いて不安なよっしぃーです。 ベンダープレフィックスといえば-webkit-, -ms-, -moz-, -o-がありましたが、ブラウザの対応が増えてきてそろそろいらないのかなぁとか思って調べたら以下の様な記事を見つけました。 そのベンダー接頭辞はいつまで書くの? 上記に独自に調べた結果だけ書くと もう書く必要がないもの border-radius box-shadow

2016-11-07T02:15:59+09:002015/06/27|Categories: WEB|Tags: |

画像を中央におく

商品リストだったりギャラリーだったり、画像のサイズに依存せずに枠線の中央に画像をおきたいことってありませんか? tableやbeforeやspanを使って今まで中央においていましたが、面白い記事(画像サイズに依存しない絶対中央配置)を見つけました。 コード抜擢 html <body> <img src="image.jpg" /> </body>

2016-11-07T02:16:06+09:002015/06/26|Categories: WEB|Tags: |

テキストを両端揃えにできなかった!(過去形)

どうも、夏の兆しに苛まれてついついビールに手が延びてしまうよっしぃーです。 紙のデザイナー様からデータを頂いた際に、文字を両端揃えにしてくれと言われました。 通常なら .text{ text-align: justify; } で、両端揃えになると思ったのですが、どうもうまく行きませんでした。

2016-10-20T00:14:20+09:002015/05/28|Categories: WEB|Tags: |

ちょっとCSSスタイルガイドを整理してみた

どうも、昨日はじめてテキーラを飲んだよっしぃーです。 cssについて勉強がある程度進んだのでまとめてみました。 私は基本的にBEMをベースにスタイルを作っていきます。(ベムって?) 簡単に言うと ものを入れるカゴ(block)、 商品が入っている袋(modifier)、 袋に入っている商品(element) です。 形は: [

2016-10-20T00:14:23+09:002015/05/27|Categories: WEB|Tags: |

floatをかけた際、imgなどに回りこみをさせなくする

どうも、今年度社会人となってWEB製作会社に勤め始めましたよっしぃーです。 学生やWEB製作を始めたばかりという人に役立つような情報を載せていければなぁと思います。 文字ブロックの横にimgをフロートさせたりする時に、画像に回り込みが起きて文字の塊の中に画像が入ってしまう経験がありませんか? その際、文字は文字、画像は画像と左右に分ける方法をご紹介します。 私が行っている一番楽だと思う方法は、floatさせた要素に回りこんでしまうものに overflow: hidden; をかけています。

2016-10-20T00:14:23+09:002015/05/23|Categories: WEB|Tags: |