Movatterモバイル変換

edo_m18 id:edo_m18

displayとhtmlに関するedo_m18のブックマーク (3)

ゴーストボタンにマウスを乗せたときの動きいろいろ16個
昨年くらいから流行っているらしいゴーストボタンというもののサンプルをいくつか作ってみました。皆さん色々作られていて、今さら感もありますがぜひご覧ください。今回、以下のルールに沿って16個サンプルを作りました。HTMLは全て同じマウスを乗せる前は同じ状態擬似要素は使っても1つだけ擬似要素を2つ使ったり、spanなんかをはさんでやるともっと色々できると思いますが、今回はシンプルにマウスを乗せたときに動きをつけるサンプルを紹介します。サンプルはこのページで全て載せていますが、まとめて見たいという方はこちらをどうぞ。ということで、HTMLはこんな感じになります。 <a href="#" class="btn sample1">sample 1</a> 普通のリンクですね。btnは共通部分、sample1はサンプルごとで違ってくる部分になります。では、共通部分のCSSです。 a.bt
edo_m182015/05/21
border
inline-block
css3
HTML
height
display
background
color
class
CSS
リンク
レスポンシブWebデザインにおけるコーダーの役割 World of granshe.
先日、Twitterで『レスポンシブWebデザインをする際に、ナビゲーションなどをPC用とSP用の2種類、HTML内に書いて、出し分けることがあるようだ』というようなことをつぶやいたのですが、自分では思ってもいないところでリツイートされました。自分はちょっとした愚痴のつもりで書いたのですが、これはもうちょっと深く考えるべき問題なのかもしれない。と感じ、自分なりにもうちょっと考察して、人と話して、自分なりの答えが見つかったので書いてみます。私の周辺では、レスポンシブWebデザイン（以下、RWD）の案件をやるとき、「PC用」「スマホ用」2種類のデザインをお客さんに提出し、それをベースにコーディングすることが多いです。PCサイトとスマートフォン最適化サイトを両方作るのと同じような手法です。いわゆる「スマートフォン最適化」では、PCとスマホ用のHTMLは別で作れますので、デザイン上の
edo_m182013/04/11
そもそも、RWDを考えられないならWebデザイナーではない、という見方もできる。
PC
コーディング
デザイン
HTML
display
design
web制作
レスポンシブ
webデザイン
考え方
リンク
CSS display:inline-blockを活用する方法と注意点 | エンタープライズ | マイコミジャーナル
Robert’s talk Webページの制作で水平リストが必要な場合にはフローレイアウトを使って要素を配置していくということがある。しかし、水平フローにさらに可変の高さを持った要素が入っていたり、それを垂直方向に複数行展開するということになると、なかなか面倒なことになってくる。ブラウザの幅に対応したり、ブラウザごとにデザインを揃えるということになると、頭を抱えることになる。 Robert Nyman氏がそうした場合の代替方法のひとつにdisplay: inline-blockを使う方法があるとし、CSS display: inline-block: whyit rocks, and whyit sucks - Robert's talkにおいて簡潔な説明とサンプルコードおよびその欠点を紹介している。display: inline-blockは要素をブロックとして作成しつつ、インライン
edo_m182011/09/26
ふーむ。面白いけど、絶対指定しないといけないのがなー。IEも含めるなら問題がある気がする。
inline-block
コーディング
css
tips
Web制作
display
html
ie
リンク
1