Web制作の現場で必要とされるHTMLとCSSを基本からしっかり身につけることができるオススメの本を紹介します。 HTMLとCSSの基本から、レスポンシブ対応ページの実装まで、現場で実際に使われているテクニックを学ぶことができます。 本書はHTMLとCSSの業務に携わりたい、本格的に勉強したい人向けの入門書です。知識ゼロの人でもしっかり学ぶことができ、コーダーとしての知識を見つけることができます。 デザイナーやディレクターがHTMLやCSSの理解を深めるためにも役立ちます。
![HTMLとCSSの現在のテクニックに焦点を合わせて、基本からしっかり身につけることができる良書](https://cdn-ak-scissors.b.st-hatena.com/image/square/d68a3143df95a19d4dff549289015b9fbcd35e7a/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017043003-02.png)
冬なのでモチベーションだだ下がりですが、とりあえず生きていくには仕事をしなければならないのでコード書いている@t32kだよ。 久しぶりに本読んだので紹介だよ。おっさん、ピクセルパーフェクトなCSSコーディングしてた時代がIE6/7が全盛期だったので、未だにその当時のCSSコーディングのクセが抜けない。最近はCSS設計だったり関連ツールに興味の対象が移っていて、CSS自体の機能をちゃんと把握していなかった。 Flexbox何それおいしいの? display:table 最強じゃん!って状態だし、 E:last-child擬似セレクタ使うのは甘え、男は黙ってclass属性に-last付けるべしって思ってるし、 アニメーションに関しては、transform、 translate、 transition、一体でどれがpropertyでvalueなのか、頭の中がごっちゃになってる状況だ。 このままだ
HTMLとCSSはWeb制作の中では敷居が低く、あまり詳しくなくてもWebページやブログなどを作成することができます。しかし職として考えた時は、必要な知識をしっかりと身につけたいものです。 HTMLってそもそも何なのか、どうして正しくタグをつける必要があるのか、CSSを使う意味は何? といった基本から、実装でなぜこのタグを使うのかこういうテクニックを使うのかといったことまで、必要な正しい知識をしっかりとマスターできるコーディングをまじめに取り組みたい人にオススメの本を紹介します。 書店に並んでいる多くのHTML5とCSS3の書籍の中から自分にあった本を探す時は、必ずこの本も加えて検討してみてください。
Web制作の仕事について デザイナーがデザインした画面を、マークアップエンジニアがコーディングをしてサイトを公開する。 Web制作という観点から見るとこれで完了かもしれませんが、Webサイトは「いったん完成すればそれで終わり」ではありません。サイト公開後にターゲットユーザーをそのサイトに集客し、サイトオーナーのビジネスを儲けさせるために、運用をしなくてはいけません。運用フェーズに入ると、様々な改修や、新規キャンペーンサイトなどが追加になるかと思います。もちろんサイト公開前にも、「ちょっとココの色変えて」など言われることもあるでしょう。CSSの設計が悪いと、サイト改修を重ねるうちに思わぬところで見た目が崩れて、その修正に余計に工数がかかることになります。皆さん一度はこのような経験をされているのではないでしょうか。 本書は、これらの問題を解決するための思考を学ぶための書籍と言えるでしょう。10
@hilokiという男がいる。この男と初めて出会ったのは7年前だろうか、当時細々と石川でブログを書きながらWebデザイナーをしていた僕に初めて勉強会で声をかけてくれた人物である。 それ以来、当時彼が住んでいた大阪の勉強会と石川の勉強会で互いに参加しあったりして親交を深めていった。ついには2年という短い間ではあったが、某緑の会社で同僚として働けたことは本当かけがえのないものと感じている。 そんな彼が最近2冊目の単著を出した。1冊目の『HTML5+CSS3で作る 魅せるiPhoneサイト』はもちろん購入して読書済だが、本当に丁寧に書いてあり分かりやすかった印象がある。そんな彼の出す本だから間違いないのは当たり前だが、特筆すべきは扱っているテーマだろう。 最近のCSSのWeb参考書というと、CSS3でこんなことができちゃいます〜、だとかアニメーションでこんなことがっ!?とか、こんなグラフィカルな
Web制作者のためのCSS設計の教科書 ( •́谷•̀)「CSSの本書いたよーヽ(=´▽`=)ノ」 ということで@hilokiさんから頂きました。ありがとうございます。 著者(@hiloki)について 前著も有名で、私から改めて紹介するまでもないかもしれませんが、カンファレンスや様々な勉強会でCSSについての講演を数多く行ってきており、 CSSが持つ弱点を理解し、設計の重要性を訴えてきた有識者の一人 です。 スライドを見ると分かる通り、CSSプリプロセッサの話に始まり、CSSの設計の話や、最近ではWeb Componentsを交えた話もされていて、CSSと戦ってきた傷跡が生生と感じられます(大袈裟)。今回の著書は得てきたナレッジの集大成といえるのではないでしょうか。 谷 拓樹 (著) 内容について 各章の概要をざっと振り返ってみます。 第1章 CSSにおける設計とは 第2章 CSSの基本を
その場限りのCSSを使うのではなく、CSSの基本からしっかりと理解を深め、運用期間が長くても安心して使えるCSS、大規模なサイトでも管理できるCSSを身につけたい人に役立つ一冊を紹介します。 単にコードを書くだけではなく、設計・管理・運用を考えた『ちゃんとしたCSS』が徹底的に解説された良書です。 GoogleエンジニアのPhilip Walton氏によると、より良いCSSのゴールとして次の4つのポイントが重要です。 予測しやすい 記述したスタイルが他のスタイルに影響されず、期待通りの見栄えになる。 再利用しやすい スタイルの定義が機能ごとに管理されており、似たUIの別のプロジェクトにも利用できる。 保守しやすい スタイルを追加・修正した際に、既存のものに影響を与えない。 拡張しやすい サイトの規模が大きく複雑になっても、対応できる。 参考:CSS Architecture(翻訳版) これ
「Web制作者のためのCSS設計の教科書」は、今よりちょっとだけWEB制作のオペレーションをマシにできるかもしれない。 SassやCompassを使っていて、最近あまりCSSを直接書くという機会は減りましたが、CSSを書くという目的自体は変わらない!ということで、CSSの書き方云々ではなく、設計についての書籍が出たということでKindle版を購入してみました。 と、いうわけで、発売日に斜め読みした感想をまとめてみました。 やっぱり設計ですよね 「ヒャッホー!これCSSだけで実装できたぜー!」みたいな脳汁あふれるCSSコーディングは確かに楽しいのですが、やっぱり設計がきちんとしていないとですね・・・。という問題は様々な場所で出てくるかと思います。 似たような記述が散見されたり、わけがわからないおかげで後々の更新で「!important」を乱発する羽目になったり・・・。 せめて自分でコーディン
献本を頂きました 同じ会社ということもあり、普段からお世話になっている著者の谷さんより献本を頂きました。ありがとうございます。 普段からCSSやWeb Componentsで登壇されていることもあり、安心と信頼の内容でした。 以下、大まかな内容の構成と感想文です。 まずはインプレス様のサイトより目次より引用: 第1章 CSSにおける設計とは 1-1 CSS設計の重要性 フロントエンドとCSSの仕事 開発に欠かせない設計 より良いCSSのゴール 1-2 破綻しやすいCSS HTMLの構造に依存している スタイルを取り消している 絶対値を多用している 修正しやすいCSSへ モダンなサイト構築ワークフロー 第2章 CSSの基本を振り返る 2-1 CSSセレクタと詳細度 カスケーディングの基本 詳細度 詳細度の計算 2-2 セレクタのリファクタリング セレクタをより安全でシンプルなものに 要素セレ
安定のエ・ビスコム・テック・ラボクオリティです。 HTML+CSSデザインレシピの名の通り、あるパーツを作るためにはどうするのか、実際にコードとともに解説されています。 簡単なパーツでもちょっと仕組みの違う複数パターンが紹介されており、いやーそこはこういうふうにしたのをやってみたいんだけど、というようなことはないでしょう。 TIPSとして覚えておくと役立つ情報もてんこ盛りで、中級以上の方でも十分に楽しむことができると思います。 また、IE8をベースに本書が構成されていますので、最新のコーディング事情がよく分からないという方にピッタリの内容だと思います。 スマホ対応、レスポンシブWebデザイン、さまざまな画像形式の取り扱い、CSS3の利用、CSSフレームワークの利用など、キャッチアップしておけば効率的にコーディングを行えるだろうなという内容が満載です。 いろいろあるみたいだけど億劫で手が出せ
Vertical align anything with just 3 lines of CSSと横に水平線のあるテキストというCSSテクニックを扱った記事を最近読んだ。どちらも有益なテクニックだが、前者はCSS的で後者はウェブ標準的という印象を持った。 最初に軽く前者のテクニックについて書いておく。後者は日本語の記事なので読めばわかる。 .element { position: relative; top: 50%; transform: translateY(-50%); } Vertical align~はこのようにtransformプロパティーでtranslate()を利用して、縦方向のセンタリングを実現するテクニック。topプロパティーが親要素の高さが基準になるのに対して、transformプロパティーのtranslate()では要素の高さが基準になることを上手く利用している。
週刊Webテク通信 2013年12月第4週号1位は、CSSが難しい言語な5つの理由、気になるネタは、三省堂国語辞典に「w」が「笑うことをあらわす文字」として掲載 ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2013年12月16日~12月22日の間に見つけた記事のベスト5です。 1. 5 Reasons Why CSS Could Be The Hardest Language Of Allhttp://www.hongkiat.com/blog/css-is-the-hardest-language/ CSSが難しい言語な理由を5つ挙げています。 エラーレポートが出ない 変数がない ブラウザ毎の互換性が悪い CSSの特殊性 CSS vs あなたのクライアント 4はCSSの優先順位について
書籍概要 Webサイト制作に必須のCSSを、より便利に効率的に書けるようにパワーアップさせた「Sass」(サス)についての教科書的な解説書が登場! Sassって聞いたことはあるけど、導入が面倒そうという方 Sassを始めてみたいと思っているが、今一歩踏み出せない方 勉強コストとの天秤に掛けて、Sassのメリットがイマイチ見えてこない方 周りでSassを使い出した人がいて、焦りを感じている方 CSSを今よりも効率的に書きたいと思っている方 これらの方がSassを導入するきっかけとなり、ひと通りSassの機能を使いこなせるようになるのが本書の目標です。 (中略) 本書では、Sassの機能だけでなく、Sassの概要から利用環境の整え方まで 丁寧に解説しています。また、より実践的な内容やCompassなどのフレームワークなど、Sassを使いこなすために必要な内容を網羅しています。 via: Ama
Lea Verou 氏の Blog に、CSS のみで、Google の Web アプリケーションで使われているようなプリローダー (画面ロード中に表示されるインジケーター) を作るっていう記事がアップされていましたので紹介。 CSS だけで再現しているため、サイズの調整などにも柔軟に対応できます。 Flexible Google-style loader with CSS : Lea Verou 基本的には元記事のソースコードを見ればわかると思いますので、簡単にだけ紹介しますが、プリローダーの HTML に関しては、下記のような感じでシンプル。 <div class="progress">Loading...</div> 元記事ではサイズバリエーションのため、下記のような class を追加したものも併記されています。 <div class="small progress">Loadin
著者の平澤さん、森田さんから献本いただきました! ありがとうございます! 本書は、Sassの初心者から上級者までお勧めできる一冊です。以下の状態の人には、特にお勧めできるでしょう。 Sassを使ってみたいけど、いまいち挑戦できない ネストや変数、extend や mixin は使ってるけど、他の機能も気になる Sassは実務である程度使ってるけど、使いこなしの幅を広げたいので、他の人が書いたコードを見たい Sassを使ってみたいけど、いまいち挑戦できない 最初の方を読むと、「これは初心者向けの本かな?」と感じるかもしれません。本書のSass導入解説は、そう思える程に親切丁寧なのです。 どれくらい丁寧かと言うと、インストールだけで 11 ページも使っていたり、スクリーンショットには Win と Mac の両方(フォルダのスクショまで!)が載っていたりする程です。 「Sassを使ってみたいけど
ベタ塗りピンクが目印の Sass 本、「Web制作者のためのSassの教科書」を著者の平澤さん、森田さんより頂戴しました。 電子書籍としては過去に Gihyo Digital Publishing より 「Sass入門 ~より効率的なCSSコーディング」が出版されていますが、紙の書籍(なんか変な表現だな)としては日本初とのことです。 10月には電子書籍版も出版予定とのことなので、電子書籍派の方はこちらも注目しておきましょう。 2013年10月7日追記: Kindle 版が販売開始したようです。 Web制作者のためのSassの教科書は、サポートサイトが開設されており、正誤表や、目次、第1章の試し読み PDF、各章ごとの参考リンク集が公開されています。 アプリのアップデートなど、紹介されている内容に変更がある場合などには Facebook ページのほうでも投稿があると思うので、Facebook
2013年6月30日 著 Scalable and Modular Architecture for CSS(SMACSS)が、いつの間にか日本語に翻訳のうえ電子書籍として販売されていました(15ドル)。本書の全文一部(※全文が公開されているものと勘違いしていました、ご指摘ありがとうございました)は「英語でなら」Webサイト上で公開されているもので、いつだったか忘れたけれど、ざっと斜め読みした記憶があります。実際、SMACSSの考え方はしばらく前から自分のスタイルシート設計に取り入れてもいます(全部が全部、ではないけれど)。まぁしかし日本語で読めるならそのほうが何かと有り難いし、ということで復習がてら購入して読んでみました。 確かに、日本語で読めるのは有り難かったのですが、しかしやや直訳調で日本語としてこなれておらず、読みにくかったというのが正直な感想。とりわけ、「Depth of App
以前から気になっていたCSSフィルタについて、ちょっと調べてみました。 結果、あまりにお手軽に、効果絶大なエフェクトをかけられることが判明して、ちょっと興奮しています。これはすごい! CSSフィルタは、SVGで従来から規定されていたFilter Effectsを、CSSの世界に持ち込んだものです。 CSSとSVGのワーキンググループが共同して立ち上げたCSS-SVG Effects Task Force (FX TF)により、「Filter Effects 1.0」という仕様として策定が進められています。 この仕様によって新しく導入されるCSSプロパティはいくつかありますが、主なものはfilterプロパティです。 filterが素晴らしいのは、ぼかしやドロップシャドウといったエフェクトを、CSSのみで簡単に指定することができるからです。 例えば、要素にぼかしをかけたい場合は、以下のようなプ
どれぐらいスゴいかというと、「サーバーにインストールするだけで、あとは設定ファイルをちょちょっといじれば、かなり高速化できちゃう」というぐらいスゴいのです。しかも、どんなサイトでも、どんなCMSを使っていても「インストールするだけ」。 Webサイトを高速化すると、ユーザーに優しいし、場合によっては検索結果での順位にも良い影響が出るかもしれない……それはわかっていても、なかなか本格的にサイトを高速化するのは難しいものです。 サーバー側の高速化に加えて、HTMLのつくりや画像のファイルサイズ最適化、さらにはCSSを調整しての画像スプライト化やCSS/JSファイルの結合・最適化によるブラウザとサーバーの通信本数削減などなど、実はやらなきゃいけないことがたくさん。 グーグルの提供するmod_pagespeedは、そうしたことの、かなりの部分を自動的に行うものです。 mod_pagespeedはこん
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く