森のコーディング森のコーディングcssマークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。width="80">住所</td><td>アメリカ</td></tr></table>というソースがあったとして、住所のセルは横幅80pxの小さいセルにしたいのに、なぜか、横幅50%まで自動的に大きくなっちゃう問題。なんでだろうな、と思っていたら、tableにかけているcssのせいだった。fixed;}↑こいつが悪いたまに横幅をしっかり決めたいために、table-layout:fixedつかうことがあったんだけど、これをやると、colspan="2"とかやったときにwidthがきかなくなっちゃうようだ。しょうがないので、table-layout:fixedをはずして解決。WEBシステムの画面をコーディングする際などには、セル結合はよく使うのではずしておいたほうがよいという知見。2017年02月25日08:49tacshockコメント:0トラックバック:02月25長い英単語をいれるとtableの中をつきぬけちゃう長い英単語がthやtdの中に入るとつきぬけちゃうし、tableの各セルの横幅もグダグダになっちゃう。break-all;}cssの説明は別のサイトでみてね。結局どうしたらいいのよっていうのがわからないところが多かったけど結局解決はtableにword-break:break-all;をつける、でした。2017年02月25日08:43tacshockコメント:0トラックバック:09月26ゼロから戦力になるまでの最短ルートコーディング(マークアップ)を教えることがよくあるんだけど、いつも、どういう手順で教えたら最短でその人が戦力になるか、考えることが多い。ついても3つくらいのフェーズになる。【第1フェーズ】流し込みや下層展開、修正などを行える。css設計できるコーダーのリソースをあけることができる。第2フェーズ】cssとhtmlのパターンを大体覚えてcss設計からできる。案件がスタートしたら最初から最後までコーディングができる。jqueryライブラリを使ってタブ切り替えやスライダー、モーダル程度なら苦戦せずに導入できる。pc/sp/レスポンシブサイトの一通りの知識がある。プロジェクト管理ができる。トラブル解決ができる。理想的なソースが作れる。案件の依頼があったときにどのようなリソース配分で完了するか、クライアントをどう導けばオンスケで進むか、が想定できる。ブラウザごとやデバイスごとの不具合などのトラブル例と解決パターンをひととおり経験していて、ハマらずに解決できる。クライアントの指示にないがやっておいたほうがよい対策やソースの組み方ができる。------------------第3フェーズにいくには最終的にとにかく場数を踏むしかないかもしれない。第1フェーズの戦力になってもらうためにどういう手順で学んでいってもらえば早いのか、というのが課題。タイピングはできるが0からhtmlを学ぶという人の手順を考えてみた。1ドットインストールのhtml入門をひととおりやろう。2↑で出てきた全タグを使って、自分の好きな映画の紹介ページを作るテスト。3ドットインストールのcss入門をひととおりやろう。4映画紹介ページにcssをほどこす。5サンプルデザインを参考に、どういうときにどういうタグを使えばよいかを教える。<li>タグや<div>の入れ子の仕方あたりがポイントになりそう。6インデントルール、美しいソースの作り方を教える。html/cssそれぞれ。7psdからのスライスのやり方、拡張子のルール、命名規則を覚えてもらう。8デザインチェックのやり方を覚えてもらう。余白の大きさやフォントサイズや色を厳密にチェックし、cssで調整していく方法。9サイトの種類と注意点概要を覚えてもらう。pc/sp/レスポンシブサイトの特徴と注意点。静的サイト/動的サイトの特徴と注意点。10chrome検証の使い方とその場でのcss修正の方法を覚えてもらう。あと3つくらいはあるかもしれない。今のところ実際におしえていて良さそうな手順は上記の順番。雑に組んだcssを、デザインにきっちり合わせてもらったり、複雑でない下層ページをまるまるまかせてしまえたりする。これは結構戦力になる。理想は入社して2週間くらいでここまで身につけてもらうこと。覚えるだけじゃなくて、実践で使える程度に身につけてもらえるカリキュラムを作れたら良いな。2016年09月26日18:09tacshockコメント:0トラックバック:09月1cssでつくるフキダシの三角▼。コピペで使えるようにしとく。cssでフキダシつくることあるよね。そのたびに、えーっとどうやるんだっけなっつって検索してるのいちいち無駄なので、この際覚えた。覚えた上でコピペできるように貼っとく。コピペして適宜デザインに合わせて行って欲しい。■下向きに▼がでてるフキダシ。transparent;}色は白にしたので、変更したかったら#FFFFFFの2箇所を変えるだよ。ひらいたら、なんかページ内の要素が上に20pxくらいズレるという不具合。しらべてみたら、親要素にoverflow:hiddenが入ってる状態でその雇用そのアンカーにリンクされたurlをひらくと、上にズレるバグがあるんだってさ。clearfixでズレるという記事もあるけど、問題なのはoverflow:hiddenなので、clearfixではズレないと思う。いえ、overflow:hiddenのほうが手軽に使いやすいから、わざわざclearfixつけずにoverflow:hiddenで済ましちゃうことは多くて、今回の僕のバグもそれで起こった。長い英単語をいれるとtableの中をつきぬけちゃうイラレでスライスを速くするスクリプト。bluetoothヘッドセット1時間1円で暖かい。夏のPC仕事のおともに冷えピタ。クールヘッドで脳のスピードがあがります。お仕事のご依頼・お問い合わせはこちらコーディングのお仕事が得意です。