  |
はてなキーワード: CSSとは
Flashが触れるからって、一般顧客が触るような展示補佐システムの開発を命じられたことがあった。
全然分からないことばかりで、本を買ったりして色々調べまくってなんとか最低限動くレベルのものを作れた。
その会社、営業と制作で売上を按分して、誰がどれだけ売上たかって社内で開示されるのよ。
結構苦労したからちょっとは売上に貢献しただろって思ったら、売上50万、内訳営業50万、私未記載だったね。
それなのに、今後は月イチペースで同じ仕事取ってくるからって言われて唖然としたね。
次の上司面談で、そのことに触れたら、「私ちゃんの本来の仕事じゃないから、評価査定の対象外ね。しっかり自分の仕事してね」って言われて、昇給なし、ボーナスなしだった。
あーれは精神的にきつかったなー、と言う思い出。
パソコン画面右上のアイコンで選ぶ表示スタイルを一番右の「ヘッドライン」表示にしといてな
/* ヘッドライン表示を切り詰める */ /* #container 指定でCSS優先度を上げる必要がある */ body[data-entrylist-layout="headline"] #container .entrylist-main{ padding-right: 0 !important; } body[data-entrylist-layout="headline"] #container .entrylist-contents{ padding-left: 0 !important; } body[data-entrylist-layout="headline"] #container .entrylist-contents-users{ position: static !important; } body[data-entrylist-layout="headline"] #container .entrylist-contents-users{ top: 14px !important; } /* ヘッドライン表示にサムネイルを追加 */ body[data-entrylist-layout="headline"] #container .entrylist-contents-main{ display: grid; grid-template: "users body title" 28px "bookmark body domain" 20px / 60px 120px 1fr; } body[data-entrylist-layout="headline"] #container .entrylist-contents-users{ grid-area: users; } body[data-entrylist-layout="headline"] #container .entrylist-contents-users a span{ margin-right: 0; } body[data-entrylist-layout="headline"] #container .following-bookmarks-container{ grid-area: bookmark; position: absolute; left: 20px; bottom: 2.5px; } body[data-entrylist-layout="headline"] #container .entrylist-contents-body{ grid-area: body; } body[data-entrylist-layout="headline"] #container .entrylist-contents-title{ grid-area: title; z-index: 99; } body[data-entrylist-layout="headline"] #container .entrylist-contents-title > a{ margin-left: -120px; padding-left: 120px; margin-bottom: -28px; padding-bottom: 28px; width: 890px; white-space: nowrap; display: block; } body[data-entrylist-layout="headline"] #container .entrylist-contents-body{ display: block !important; } body[data-entrylist-layout="headline"] #container .entrylist-contents-thumb{ position: static; } body[data-entrylist-layout="headline"] #container .entrylist-contents-thumb span{ width: 100px; height: 50px; } body[data-entrylist-layout="headline"] #container .entrylist-contents-thumb{ background: #f0f0f0; width: 100px; height: 50px; background-position: 50%; background-size: cover; border-radius: 4px; } /* 2行目に、総合ではドメイン(domain), サイト内一覧ではカテゴリと時刻(meta), マウスホバー時はいずれも概要文(description) */ body[data-entrylist-layout="headline"] #container .entrylist-contents-domain, body[data-entrylist-layout="headline"] #container .entrylist-contents-meta, body[data-entrylist-layout="headline"] #container .entrylist-contents-description{ grid-area: domain; display: block; opacity: 0; padding: 0 !important; } body[data-entrylist-layout="headline"] #container .entrylist-contents-meta > li{ vertical-align: top; } html[data-stable-request-url^="https://b.hatena.ne.jp/entrylist/"] body[data-entrylist-layout="headline"] #container .entrylist-contents-domain, html[data-stable-request-url^="https://b.hatena.ne.jp/site/"] body[data-entrylist-layout="headline"] #container .entrylist-contents-meta{ opacity: 1; } body[data-entrylist-layout="headline"] #container .entrylist-contents:hover .entrylist-contents-domain img.favicon + span, body[data-entrylist-layout="headline"] #container .entrylist-contents:hover .entrylist-contents-meta{ opacity: 0; } body[data-entrylist-layout="headline"] #container .entrylist-contents-description{ opacity: 0; position: absolute; top: calc(40px - 3px); left: calc(180px + 16px + .5em); height: 20px; line-height: 20px; color: #999; min-height: auto !important; padding-right: 0 !important; width: 890px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-stable-request-url^="https://b.hatena.ne.jp/site/"] body[data-entrylist-layout="headline"] #container .entrylist-contents:hover .entrylist-contents-domain, body[data-entrylist-layout="headline"] #container .entrylist-contents:hover .entrylist-contents-description{ opacity: 1; } /* 増田調整 */ body[data-entrylist-layout="headline"] #container a[href^="/entry/s/anond.hatelabo.jp/"] .entrylist-contents-thumb{ background-image: url('https://cdn-ak-scissors.b.st-hatena.com/image/square/b1638cdb5807a4788e4ba3c1109a984166e095fc/height=288;version=1;width=512/https%3A%2F%2Fanond.hatelabo.jp%2Fimages%2Fog-image-1500.gif'); } /* マウスホバー時にサムネも反応させる見た目調整 */ .entrylist-contents-title:hover ~ .entrylist-contents-body .entrylist-contents-thumb{ opacity: .90; }
＞スキル
JavaScript / jQuery / TypeScript / HTML / CSS / Sass / WordPress / ActionScript / Flash / PHP / grunt / gulp / webpack
いうてブラウザ自作するにはCSSの仕様を完璧に把握してこそdomとか解釈して表示する機能を実現できるわけで、それはプログラミング言語によるものなのだから、やっぱプログラミング言語はマークアップ言語以上の難しさだろ
たとえばulをフレックスコンテナとして、その子要素liの子要素imgに対してmax-width:100%をかけていたとします。
デフォルトだと、imgを内包したliがulの中で横並びになり、さらにliの横幅は自動的に親要素の横幅をliの個数で割った分だけ縮小されますが、ここでflex-wrapにwrapをかけると、imgで表示する画像のサイズがある程度大きいと、wrapとしないときよりもliごと大きく表示されます。
しかしliの横幅はそもそも指定していなくて、しかもその子要素のimgに対してmax-width:100%をかけているということは、そのcssの指定の意味を論理的な日本語で表すならば、imgはliの大きさを基準にその100パーセント分の大きさで表示しろという意味の指定になると思います。
しかしその基準であるliの大きさを定めていないのだから、imgの大きさも定まりようがないというのが論理的な解釈だと思います。
それでも実際はwrapをかけるかかけないかでそれぞれ一意的にある大きさでimgが表示されるわけです。
ようするにcssはそこに記述されているプロパティの兼ね合いで最終的にある要素がどういう風に表示されるのか、その挙動を理詰めで予測するのが困難な部分があって、それはプログラミング言語よりもある種厄介な癖として立ちはだかっているように思います。
上記の例の場合も理詰めで挙動を予測するには、プロパティの性質に関する論理的な情報が不足しているように感じます。「imgはliの大きさを基準にその100パーセント分の大きさで表示しろ」という情報から、実際どのような大きさでliやimgが表示されるのかはっきり言って予測しようがないと思います。
多くの参考書にもどう挙動するのか一意的な推測を可能とするだけの情報は書かれていません。
もしかしたらcssの公式の仕様を端から端まで参照することで過不足なく挙動を把握するための情報が手に入るのかもしれませんが、仕様のどこか今の自分の仕事にとって必要な情報なのか見極めるのにはなかなか困難なところがあるという意味で、情報に対するアクセスの困難性があると思います。
私はjavaも学習しました。極めたというところには全く到達していませんが、それでもああいった言語は書いた通りに動くものであるということを実感しています。つまり自分が今書いた、書こうとしているコードがどのような動きをするのかを予測するための、各記法や関数に関する文法が情報として過不足なく学習者に提供されているように思います。
cssにも事実上として「文法」なるものはあることは前述の例からも疑いの余地がない(先に書いた解釈以上に要素の表示を決定づけるための文法がないなら、要素の大きさは決定不能ということになる)のに、その情報がいまいち曖昧に提供されているきらいがあるように感じます。
https://coliss.com/articles/build-websites/operation/css/about-css-layout-algorithms.html
↑このような「レイアウトアルゴリズム」と語るサイトも見つけはしましたが、私の言っている文法、すなわち、要素の表示のされ方を決定づけるための処理のフローと、概念的に同質なのかはいまいち不明です。
他の端的な例としては隣接する要素同士がネガティブマージンなので重なった場合、z-indexを指定してない場合はどういう法則でどちらの要素が上にくるのかとかも、本来は明確なアルゴリズム、文法に則って決定されているはずなのに、多くの初学者あるいは中級以上の方でさえも当て推量とセンスと試行錯誤で、なんとか自分の意図通りの表示になるように調整を繰り返すことを余儀なくされているかもしれません(意外と単純で要素の名前について辞書順ベースでどちらが上にくるか決定されてる？)。理詰めで考えさえて設計しさえすれば一発で自分で思い通りの挙動(表示)をさせる、ということが困難な言語がCSSの癖として立ちはだかっているように思います。それはある種プログラミング言語が持つそれよりも厄介な癖だと思います。プログラミング言語の方がある意味で「素直」に挙動してくれると私は思います。
同じように感じた人は教えてください。またそういう感覚を卒業してCSSの挙動が論理的に手に取るようににわかるぞという方は今後の学習に関するアドバイスをしていただけると助かります。
午前中 とあるPDFを引っ張ってきて、変換することで時間がとけた。正確には対応するtexソースがあったので、それを入手したが文字化けしていた。ひさしぶりにNKFの出番だ。そのあと、Pandocでマークダウンに変換。LaTeXってチェックリストどうやってるんだろうか。全滅だった。くずれまくり。けっこうテマだよね。gfmだと、チェックリストは - [ ]
組織のウェブサイトのリニューアル計画ですが、いわゆるホムペはMarpで作ることなりそう。単なるリンク集の体裁にしたい。これだとCSSもMarpが出してくれるだろう。リンクを踏んだ後は、単純なHTML文書。こいつらのCSSはどうするのがいいんでしょうか？github pagesは出してくれるのか？CSSがないHTML文書ってどんなかんじ？阿部寛のサイト？
こっちへ来てからのを全てプレ鯖に投げときゃよかったわ。アレはオープンソースだから・・とかたいがいのところで契約しているだろし・・いいだろうとか 馬鹿だったよぉん。出版後のやつを鯖に投げるのは、無理だよな。しかしなぜなぜなぜ投げなかったのか。チームメートにお伺い立てるのめんどうだったからだよな。
うちはコーダーがデザイナーの1/3もいないので外注コーダーさんに頼らないと回していけず、常に募集していい人を探している状態です。
フリーランスのコーダーという存在は、数だけなら結構います。ひとたび募集をかければどしどし応募がくるくらいいます。ただ1度仕事をしたら2度目がないことがほとんどです。
理由は
・実際の構築経験がないので全体の流れが分かっていない人が多い（実装部分は業務に入らないにしろ全体図を把握しているのといないのとではコーディングの質が全然違います）
・引き受けてから納期を何度も引き延ばす（初稿を最終納品日に出して来たりする）
などです。
納期についてはいろんな都合があるので前倒しも後ろ倒しも相談次第では、という感じ（正直webデザイン界隈じゃ日程通りにいくことのほうが少ないし）なんですが、「●日間でこのページ分いけますか？」って確認に「いけます！」って自信満々に答えるくせに初稿提出日にも音沙汰なくて「どんな具合ですか？」って聞くとようやく「ちょっと終わらないかもしれないんで納期伸ばしてもらっていいですか…」って言う人が多すぎる。んなもん最初にデザイン渡した時点である程度分かるだろ。ていうかこっちが聞く前に相談してくれ。自分の力量把握できてない人多すぎ。
結局シンプルに一点にかえってくるんですが「経験値が浅い」、これに尽きます。そういう人達を切っていったってまともなコーダーは育たないので経歴の浅さはある程度目をつぶって3回くらいまでは仕事していきたいな、と思うんですが、一度納品すると何を勘違いしたのか次回から値上げ交渉に入るんですよね。これ本当にみんなそう。大体経歴浅い人です。教本とか講座でこういう教えでもあるんですかね？このまえ次から時給6000円で、とか言われてどうしようかと思いました。そんなら残業して自分がやるわ。ここで値上げを断るともう仕事してくれなくなっちゃうんですよね。これはこちらもむこうも選べる立場ということなんでしょう。ある意味健全なことですが、コーダーが星の数だけいるのはweb制作会社もそれだけたくさんあるってことですからね。もちろんそれだけの技術を持った方には相応の額をお支払いしたいと思ってます。ただどこも、そんな自社の技術以上のことを求められて外注に任せること前提で引き受けたりはしないので…。
ちなみにポートフォリオで出してくる架空サイトは大体みんな同じ題材、大体みんな同じクラス名の付け方、大体みんな同じアニメーションの設定なのでア、同じ教本（講座かな）使ってるんだァ～となります。この時点で比較してもしょうがないので（間違い探ししろってくらい本当にみんな同じ書き方なのでどこまで理解して書いてきてるのか分からない）、実際の業務経歴以外は正直アテにしてません。結局は先方の制作要件に沿ってやってもらうしかないので、まずは1本作ってもらうことでしか相手を測ることはできません。うちの制作分を参考として一式渡してこれ通りに作ってください、って言っても自分スタイルで記述してくる強者もいるんですけど、もしかして教本以外の書き方ができないんですかね？うちに限らずどこもある程度の記述ルールはあって、それに倣って書いてもらう必要があるので、コピペした構文の応用もきかないようなうちは外注引き受けてる場合じゃないと思いますよ。実在する適当なサイト見つけて、どう組み立てているかとか、縦長のランディングページでもいいんですけど、画像コーディングでもどういう造りになっているのかとか、知識として知っておいた方がいいです。自分が始めたてのころは好きなゲームのティザーサイトを模倣してました。意外とスライダーとかライトボックスとか入ってるんですよねあれ。動画の埋め込み方は会社ごとにけっこう違うし。もちろん今の時代レスポンシブは必須です。ハンバーガーメニューは教本で必須科目みたいなので問題ないでしょう。はじめはその程度でいいので、まずコードをもっと身近なものにしましょう。コピペせずにまっさらな状態から書けるようになると一番いいですが、まあ長い構文もあるし普通に非効率なので自分が理解していればそれでOKです。「この記述は何に必要なのか」、最低限そのくらいは分かっていてほしいです。
今だと応募してくる方、20代半ば～30代前半くらいの方か、それ以上で脱サラの方が多いですね。きっとみんな毎日会社行って業務してっていう通勤スタイルに疲れちゃったんですかね。知らんけど。前職が全然関係ない人たちばかりです。むしろ前職もweb系だった方って見たことないです。まあ入り口として入りやすいんですかね？これも知らんけど。自分も前職web系じゃないんで分かります。
ただこれだけは言いたいんですが、フリーランスで食っていくということは、自分の腕一つで食っていくということです。入り口としては簡単なhtmlやcssだって日々進化しています。知らん間にcssアニメーションめちゃ増えてます。対応ブラウザも変わってます。iOSの仕様のせいで死んだプロパティもあります。毎日最新の情報を追って、自分のコーディング力を磨いてください。そうでなければ情報科の高校生の方がよっぽどいい仕事をしてくれます。家にいながら！空き時間に♪なんて簡単な仕事ではないです、残念ながら。ていうかそんなんで人ひとり食っていけるような仕事は世の中に存在しません。多少時間がかかっても、意欲があって自分の技術不足に自覚的な人の方が仕事がしやすいです。こっちもそのレベルに揃えて仕事を発注しますし、向上のチャンスがあるからです。そういう人とは長く付き合っていきたいと思います。うちで長くお世話になっている外注さんも、最初は初めて数か月とかそんな感じの人たちが多いです。”いま”経験値が浅いことは不利でもなんでもないです。大体みんなそうなので。そこからどう自分の価値を高めていくか、もう少し真剣に考えてもらいたいです。
結論としては、分からないことは分からないと言っていいし、出来ないことは出来ないと言っていい。今の自分にできるのがどのくらいなのか、きちんと客観的に分かってほしい。こっちもいきなり即戦力！とかを期待しているわけではないので、一緒にできることを考えていけたらいいなと思います。完。
p {
font-family: "Yu Gothic UI";
}
とか直書きで変なフォント指定しているサイトは、Stylusの拡張機能で
@font-face { src: local("Gen Shin Gothic Regular"); font-family: "Yu Gothic UI"; }
font-family: system-ui;
font-family: system-ui; を殺す方法をだれか教えてくれ。
body { font-family: "Gen Shin Gothic" !important; }