css

マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。

tableの1行目をcolspanで結合したら2行目のセルのサイズが効かなくなっちゃったのを解決

例えば

<table>
<tr>
<th colspan="2">あいうえお</th>
</tr>
<tr>
<td width="80">住所</td>
<td>アメリカ</td>
</tr>
</table> 

というソースがあったとして、住所のセルは横幅80pxの小さいセルにしたいのに、なぜか、横幅50%まで自動的に大きくなっちゃう問題。

おきるときと起きないときが あって。

なんでだろうな、と思っていたら、tableにかけているcssのせいだった。



table{
table-layout: fixed;

↑こいつが悪い 

たまに横幅をしっかり決めたいために、table-layout:fixedつかうことがあったんだけど、これをやると、colspan="2"とかやったときにwidthがきかなくなっちゃうようだ。

しょうがないので、table-layout:fixedをはずして解決。

WEBシステムの画面をコーディングする際などには、セル結合はよく使うのではずしておいたほうがよい
という知見。

 

長い英単語をいれるとtableの中をつきぬけちゃう

長い英単語がthやtdの中に入るとつきぬけちゃうし、tableの各セルの横幅もグダグダになっちゃう。
いろいろ調べて、シンプルに解決したのはこれ

table{
word-break: break-all;

cssの説明は別のサイトでみてね。

結局どうしたらいいのよっていうのがわからないところが多かったけど結局解決はtableにword-break:break-all;

をつける、でした。
 

ゼロから戦力になるまでの最短ルート

コーディング(マークアップ)を教えることがよくあるんだけど、
いつも、どういう手順で教えたら最短でその人が戦力になるか、考えることが多い。

「戦力になる」 についても3つくらいのフェーズになる。


【第1フェーズ】流し込みや下層展開、修正などを行える。
トップページのcss設計はまかせられないけれど、コーディングで出てくる各種の作業を分割してお願いできることで、 css設計できるコーダーのリソースをあけることができる。


【 第2フェーズ】cssとhtmlのパターンを大体覚えてcss設計からできる。
案件がスタートしたら最初から最後までコーディングができる。
jqueryライブラリを使ってタブ切り替えやスライダー、モーダル程度なら苦戦せずに導入できる。
pc/sp/レスポンシブサイトの一通りの知識がある。


【第3フェーズ】 プロジェクト管理ができる。トラブル解決ができる。理想的なソースが作れる。
案件の依頼があったときにどのようなリソース配分で完了するか、
クライアントをどう導けばオンスケで進むか、が想定できる。
ブラウザごとやデバイスごとの不具合などのトラブル例と解決パターンをひととおり経験していて、ハマらずに解決できる。
クライアントの指示にないがやっておいたほうがよい対策やソースの組み方ができる。


------------------
第3フェーズにいくには最終的にとにかく場数を踏むしかないかもしれない。
まずは、第1フェーズの戦力になってもらうためにどういう手順で学んでいってもらえば早いのか、というのが課題。


タイピングはできるが0からhtmlを学ぶという人の手順を考えてみた。

①ドットインストールのhtml入門をひととおりやろう。
②↑で出てきた全タグを使って、自分の好きな映画の紹介ページを作るテスト。
③ドットインストールのcss入門をひととおりやろう。
④映画紹介ページにcssをほどこす。
⑤サンプルデザインを参考に、どういうときにどういうタグを使えばよいかを教える。
 <li>タグや<div>の入れ子の仕方あたりがポイントになりそう。
⑥インデントルール、美しいソースの作り方を教える。html/cssそれぞれ。
⑦psdからのスライスのやり方、拡張子のルール、命名規則を覚えてもらう。
⑧デザインチェックのやり方を覚えてもらう。
 余白の大きさやフォントサイズや色を厳密にチェックし、cssで調整していく方法。
⑨サイトの種類と注意点概要を覚えてもらう。
 pc/sp/レスポンシブサイトの特徴と注意点。静的サイト/動的サイトの特徴と注意点。
⑩chrome検証の使い方とその場でのcss修正の方法を覚えてもらう。


あと3つくらいはあるかもしれない。
今のところ実際におしえていて良さそうな手順は上記の順番。

ここまで覚えてもらうと、
psdからスライスしてhtmlを仮組してもらったり、
雑に組んだcssを、デザインにきっちり合わせてもらったり、複雑でない下層ページをまるまるまかせてしまえたりする。
これは結構戦力になる。

理想は入社して2週間くらいでここまで身につけてもらうこと。
覚えるだけじゃなくて、実践で使える程度に身につけてもらえるカリキュラムを作れたら良いな。


 

cssでつくるフキダシの三角▼。すぐコピペで使えるようにしとく。

cssでフキダシつくることあるよね。
そのたびに、えーっとどうやるんだっけなっつって検索してるのいちいち無駄なので、この際覚えた。
覚えた上でコピペできるように貼っとく。

コピペして適宜デザインに合わせて行って欲しい。


■下向きに▼がでてるフキダシ。

.fukidashi{
width:220px;
background:#FFFFFF;
padding:15px;
position:relative;
}
.fukidashi:after{
content:'';
position: absolute;
bottom:-10px;
left:50%;
margin:0 0 0 -5px;
width:0;
height:0;
border-right:10px solid transparent;
border-top:10px solid #FFFFFF;
border-left:10px solid transparent;


■左向きに◀がでてるフキダシ

.fukidashi{
width:220px;
background:#FFFFFF;
padding:15px;
position:relative;
}
.fukidashi:after{
content:'';
position: absolute;
top:50%;
left:-10px;
margin:-5px 0 0 0;
width:0;
height:0;
border-top:10px solid transparent;
border-right:10px solid #FFFFFF;
border-bottom:10px solid transparent;


■上向きに▲がでてるフキダシ

.fukidashi{
width:220px;
background:#FFFFFF;
padding:15px;
position:relative;
}
.fukidashi:after{
content:'';
position: absolute;
top:-10px;
left:50%;
margin:0 0 0 -5px;
width:0;
height:0;
border-right:10px solid transparent;
border-bottom:10px solid #FFFFFF;
border-left:10px solid transparent;


■右向きに▶が出ているフキダシ

.fukidashi{
width:220px;
background:#FFFFFF;
padding:15px;
position:relative;
}
.fukidashi:after{
content:'';
position: absolute;
top:50%;
right:-10px;
margin:-5px 0 0 0;
width:0;
height:0;
border-top:10px solid transparent;
border-left:10px solid #FFFFFF;
border-bottom:10px solid transparent;


色は白にしたので、変更したかったら#FFFFFFの2箇所を変えるだよ。 

ページ内リンク(アンカー)がついてるページの要素が上にずれる

index.html#box1

のようにページ内リンクつきのページを ひらいたら、なんかページ内の要素が上に20pxくらいズレるという不具合。

しらべてみたら、親要素にoverflow:hiddenが入ってる状態でその雇用そのアンカーにリンクされたurlをひらくと、上にズレるバグがあるんだってさ。

clearfixでズレるという記事もあるけど、問題なのはoverflow:hiddenなので、
clearfixではズレないと思う。

.clearfix:after{
content:".";
height:0;
clear:both;
display:block;
visibility:hidden;
}

↑overflow:hidden 使ってない。

とはいえ、overflow:hiddenのほうが手軽に使いやすいから、わざわざclearfixつけずにoverflow:hiddenで済ましちゃうことは多くて、今回の僕のバグもそれで起こった。

幸い親要素についてたoverflow:hiddenをとっても問題ない構造だったので、とるだけで解決ぅ 
記事検索


手ぶらで通話 - bluetoothヘッドセット

1時間1円で暖かい。電気毛布。

夏のPC仕事のおともに冷えピタ。クールヘッドで脳のスピードがあがります。

お仕事のご依頼・お問い合わせはこちら

コーディングのお仕事が得意です。

info(あっと)tacshock.com
タグクラウド
QRコード
QRコード
  • ライブドアブログ