今回は先生から急遽病気で行けなくなったとの連絡をもらいましたので、先生ぬきでの勉強会でした。
サイトを見ていて気になるエフェクトってありますよね。そんなときはFireFoxのFireBugでhtmlとcssをコピってしまおう。そんでもってcssの値をかえたり、プロパティ自体をオフにしてみたりする事で理解を深める。「編集ボタン」でhtmlをコピー、cssをコピーしてhtmlファイルにペースト。どのcssをコピーするかは各自のセンスで。知らないプロパティとかが出て来てもとりあえずコピる。動けばとりあえずOK!
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
*, *:after, *:before { -moz-box-sizing: border-box; } nav a { color: #FFFFFF; display: inline-block; font-size: 1.35em; font-weight:400; letter-spacing: 1px; margin: 15px 25px; outline: medium none; position: relative; text-decoration: none; text-shadow: 0 0 1px rgba(255, 255, 255, 0.3); text-transform: uppercase; } .cl-effect-5 a span { display: inline-block; position: relative; transition: transform 0.3s ease 0s; } .cl-effect-5 a:hover span, .cl-effect-5 a:focus span { transform: translateY(-100%); } .container > section { margin: 0 auto; padding: 10em 3em; text-align: center; } .color-5 { background: none repeat scroll 0 0 #CD4436; } .cl-effect-5 a { height: 1em; overflow: hidden; padding: 0 4px; } .cl-effect-5 a span:before { content: attr(data-hover); font-weight:700; position: absolute; top: 100%; transform: translate3d(0px, 0px, 0px); } |
html
1 2 3 4 5 6 7 8 9 |
<section class="color-5"> <nav id="cl-effect-5" class="cl-effect-5"> <a href="#cl-effect-5"><span data-hover="Seraglio">Seraglio</span></a> <a href="#cl-effect-5"><span data-hover="Sumptuous">Sumptuous</span></a> <a href="#cl-effect-5"><span data-hover="Scintilla">Scintilla</span></a> <a href="#cl-effect-5"><span data-hover="Palimpsest">Palimpsest</span></a> <a href="#cl-effect-5"><span data-hover="Assemblage">Assemblage</span></a> </nav> </section> |
質問
・フォントの太さが参考サイトと違うのはなぜ?
・IE/Firefox だと文字の高さをキープするけど、Mac/Firefoxだと文字の高さが(幅も)キープされないのはなぜ?
今日の勉強会は謎をのこしつつ終了しました。
勉強会お休みしてごめんなさい。
質問の件は「質問の中にほとんど答えがある」ような状態です。
自力で原因と解決方法見つけてみましょう。
みなさん。解決できましたか?僕はしました。
自力がつかないので、解決法についてのコメントは控えていましたが、
一週間たったのでコメントします。
cssの9行目、nav aのdisplay: inline-block;を削除してみて下さい。
ちゃんとした答え
OSとブラウザによってデフォルトのフォントが違うので、ちゃんとフォントの種類を指定すれば、
問題は解決します。