ellipsisのためにtitle属性を仕込むのもバカバカしい。いった定義がある要素のクラス名を決め打ちで動的に仕込んでいくのもまたバカバカしい。Hail2u.net上記の記事を読んで、面白そうだから自分で書いてみた。ユーザー的には、ellipsisで省略されたテキストがツールチップとかで表示されると結構便利かもね!実際にはどうやって書くんだろう?という興味。以下HTMLとCSSのサンプル。<li>吾輩は猫である。nowrap;}これでli要素のテキストが5emを超えると、超えた分は省略されて三点リーダーになる。超えた時はtitle属性で中のテキストをツールチップなどで表示させて、超えてなければそのまま。超えるか超えないかはその要素の横幅やフォントサイズに依存するので、全部に最初からtitle属性を付けるのも微妙な感じ。テキストだけの横幅って多分取れない。jQueryで動的に作った文字列の幅を取得してみるの方法パクって、テキストをダミーの要素に入れてそれの横幅を取得するやり方でやってみた。ellipsis;が当たってる要素抽出して文字列取って横幅取って...とかやってたらすごいパフォーマンス落ちそう。hidden;を解除して全文を表示するという方法はどうだろうか。一応言うと@nazomikanの案。absolute;で絶対位置で表示させる。すると元の要素の高さが失われるので、hover時の兄弟要素のpaddingを若干調整してやる。Demo3元のテキストがすごい長かったりして折り返して表示したい時とか横スクロールバー発生するし、高さが1emじゃないこともあるだろうし、全然汎用的じゃない。それこそJSでhover時にボックス表示させてあげたりとかの方が良さそう。いうような感じで遊んでた。|まだまだWeb制作においては、デザイナーがデザインしたものをコーダーがコーディングする、というような流れが多いように思う。デザイナーは1pxにもこだわる人たちなので、コーダーもそれに応えるように、きちんとデザイン通りに表現する。ようにがんばっている。「ここは20px、ここは40px、ここは60px」というような具合に、余白の指示書などがあるとありがたい。デザイナーによっては、余白がそれぞれバラバラだったりして、なかなか骨が折れることもあるので...。「見出しの下の余白を20px空けたい」という指示があったとする。20px;でOKだけど、実はそれ、下の文章のline-heightなどによっては、きちんと20px空いてなかったりすることもある。<p>margin調整について書きます。<br>margin調整について書きます。<br>margin調整について書きます。</p></body>これの結果が以下。20px;と入れてみる。Chromeのインスペクタで要素を確認してみる。若干20pxより余白が大きいように見える。1.8;分の余白が追加されているためである...。実際にそのline-height分の余白を20pxから引いてあげればいいよね!つまり、20pxから6px引いた、14pxをh1のmargin-bottomにしてあげればOK!でも、それらをいちいち計算するのも面倒...。そこで、みんな大好きcalc()関数ですよ。1.8;なので1.8倍で27pxがp要素の行の高さ。そこから自身のテキスト分1.5remを引いてあげた12px分が、均等に上下に割り振られているから、2で割った6pxがテキストの上の部分の余白になる。これを20pxから引いた数字(つまり14px)をh1のmargin-bottomに指定してあげれば、余白をぴったり20pxにできるという計算。今度は、それぞれフォントサイズや行の高さに合わせて数値を一つ一つ変えるのは面倒臭い!って思いますよね?そこで、みんな大好きSassですよ。SCSS形式で書きます。$pLineHeight;}こうやって@mixinしてやれば初期値とかも指定できるし便利。h2の時は下の余白は40pxにしたい!しかも、次の要素の行の高さは2.2だった!なんてときも大丈夫。$pLineHeight;}コンパイル結果。20px;とやったときの余白の差はこんな感じ。adjustmentこうやって、きっちり20pxなら20pxの余白になってた方がいいよね!と、この記事の例を見せながらデザイナーのKくんに聞いたら、「そこまでやってくれると嬉しいけど...(;^ω^)」、後輩のMくんに聞いたら、「わ...(;^ω^)」との感想をいただきました。|スタイルをよりシンプルなものに変更した。1カラムにすることで、よりスッキリした印象を与えるのが狙い。前から、白い背景に黒いテキストのサイトにハマっていて(そのサイトが有益なものなら尚更)、余計なものをとことん省いているストイックさに痺れる。自分がそれをやると何故か味気ないので、なんとかフォントや色味や配置やホワイトスペースを駆使して”Design”に昇華させたいのだけど、それが難しい...。以前のスタイルはDocumentsページにぶち込んだ。その作業をしている途中で、さらに以前のスタイルを見つけて懐かしんでいた。何かを残すっていうのは後で振り返るときに良い。それを発見しやすい・残りやすいのがWebの良いところだと思う。ところで、以前からトップページがクソ重かったのだけど、多分広告のせいだと思うので、1つだけの表示にした。別に広告で稼いでいるわけではないのだけど、表示していると「ぽい」ので。́;ω;`)なるべくCMSの恩恵を受けられるように、何かを変えたら全部が変わるように、またPHPをちょこちょこ弄った。今さっきの1記事目のみ広告表示とか、個別ページ(ディレクトリ)の子ページは個別に書いたHTML(DOCTYPEから)を適用させるとかとか。endif;}何の事は無い、このサイトにはAbout、Documents、Linkの個別ページがあるので、それ以外を個別にHTMLが書けるようにしただけ。これ、親である個別ページが膨大になってきたらどうするんだろうね。or連発するのだろうか...。スマートなやり方があるだろうけど、ひとまずこれで。カスタマイズまとめを参考にした。他にも次ページ・前ページの部分とか、検索結果ページとか、カテゴリインデックスページとか、修正したいところがいくつかあるのだけど、ちょっともう今日は体力の限界なので、これから少しずつこっそり修正していこうと思う。仕事でもさんざんやってるのに、プライベートでも2~3日徹夜とか、ホントWeb制作って楽しいなぁ。WordPressolder。