今年こそコーディング（HTML+CSS）を習得しようと思っているあなたにおすすめな書籍を厳選しました！｜竹内直人（コーディングサロン講師）｜note
コーディングを教えていてよく聞かれる質問のひとつに「おすすめの書籍はありますか？」という質問があります。 正直に言うと、書籍自体があまりオススメではないのですが、その辺りの詳細はブログに書きましたので、ご興味がある方はご覧ください。 ※このnoteはブログをより読み易くしたサマリー版（要約版）です。 ・・・ どんなランキングか？ 過去5年分のHTML+CSSに関する書籍を読み漁ってみました。 過去5年分ともなると、Amazon検索50ページ分、約60冊、総額15万円分くらいになります。（定価の単行本だとですが） 調べてみると、Amazonには出品されていない書籍も結構ありましたので、近所の本屋や池袋のジュンク堂書店なども見ていますが、結局はAmazonに出品すらされていない書籍はとても古いか、イマイチであることが多かったです。 こうして確認した約60冊の中から、以下の観点でオススメと思える
Before Gutenberg – WordPress 5.0になるまでに準備すべきこと – Capital P – WordPressメディア
先日、WordPress 4.9.8がリリースされ、Capital Pでも散々取り上げて来た新しいエディターGutenbergをテストするようダッシュボードでの呼びかけが始まった。 ダッシュボードに表示されるコールアウト。ついにこの日が来た……。 さて、Gutenbergは活版印刷術の発明者であり、人類の情報技術に革命をもたらした人物にその名をとられていることからもわかるように、革新的なプロジェクトである。 しかし、革新がもたらす創造の前には、必ず破壊がやってくる。これから訪れる大きな変化を乗り切るために、Before Gutenbergと題した連載を開始したい。本稿はその第一回である。 4.9.8になったら必ずやっておくべきこと さて、4.9.8にアップデートした方はご存知だと思うが、前述したコールアウトに「旧エディターをインストール」というボタンがある。人柱になるのが大好きな方でない限
[JS]0.6kBの超軽量！基本的なDOM操作を実行するためだけに開発されたシンプルなライブラリ -nanoJS
要素にclassを加えたり、変更したり、要素を削除したり、::beforeや::afterを加えたり、要素の表示位置を取得したり、変更したり、クリックやホバーのイベントを設定したり、基本的なDOM操作を実行するためだけに開発された超軽量ライブラリを紹介します。 jQueryは使うけど、$関数や上記の挙動しか利用しないという人には、特にぴったりなスクリプトです。 nanoJS nanoJS -GitHub nanoJSの特徴 nanoJSのデモ nanoJSの使い方 nanoJSの特徴 トータル100行、0.6kBの超軽量スクリプト。 jQueryに似た構文が利用でき、オブジェクトの連鎖的もサポート。 それぞれのメソッドは単独で機能するため、削除・追加することも可能。 IE9対応（addClass, removeClass, toggleClassのみ非対応）。 nanoJSのデモ ドキュメ
![[JS]0.6kBの超軽量！基本的なDOM操作を実行するためだけに開発されたシンプルなライブラリ -nanoJS](https://cdn-ak-scissors.b.st-hatena.com/image/square/40cbc63a058df9588ea63a08df7cc3661edb7792/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201802%2F2018053005.png)
サクサク感をデザインする
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog ヤフオク!アプリ開発部の中島(@52shinNaka)です。今日はデザイナーの立場からサービスの体感速度をテーマに記事を書いていきます。 サクサク感の正体 サクサク動くサービスと聞いて、どんなサービスを思いつくでしょうか？サクサク動くを分解すると下の２要素に分かれると思います。 表示速度は、純粋にコンテンツが表示されるまでの時間、体感速度は、実際にプロダクトを触って感じられた時間の長さです。触っていて「サクサク動く！」と感じられるサービスは、上の２つの要素が満たされていることが多いです。 表示速度はサービス利益に直結する デザイナーが日々の作業の中で表示速度を意識するタイミングは少ないかもしれません。しかしグロースステージにある多
2017年11月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Webデザイン Adobe XD 11月アップデートリリース！デザインスペック追加で開発者への受け渡しをもっと簡単に #AdobeXD | Adobe Creative Station デザインスペックはAdobe MAXでも話題になっていましたね。かなり期待されている機能だと思います。 もっと楽するweb制作！Illustrator & Photoshop 動画解説 – のんびりデザインしているような。 Adobe MAXでの北村さんのセッションの動画や補足がまとめられています。 知財教材「デザイナーが身につけておくべき知財の基本」 | 経済産業省 特許庁 デザインと知的財産権などについてまとめられ
dev.toと阿部寛のホームページどっちが速いですか？ - くうと徒然なるままに
dev.toと阿部寛のホームページどっちが速いですか？— あれからのぐりだけど (@_guri3) 2017年11月15日 という内容のツイートを見つけたので計測してみる。 ずっとパソコンに向かってて飽きてたので息抜きで。 dev.to というのは、 Qiita の海外版みたなやつです。一番の特徴はナビゲーションの速さ。 対抗するのは、 THE Traditional Web Site というたたずまいで有名？な 阿部寛のホームページ 計測 今回は、Google の PageSpeed Insights を利用していきます。 dev.to まずは、dev.to から 86/100 です！ 阿部 寛 のホームページ 92/100 です！ まとめ 伝統的ウェブサイトの方が早かった！
[CSS]レスポンシブ対応のグリッド システムを実装する時に絶対覚えておきたいテクニックを詳しく解説
HTMLとCSSでグリッド システムを実装する際、何から始めればいいのか、どういうことを考え、決めて、どんな手順で進めるのか。 カラムの幅のつくり方、溝はmarginとpaddingのどちらがよいか、レスポンシブはどう対応するのかなど、グリッド システムを実装するテクニックを詳しく解説します。 かなり長いので、時間のある時に読んでいただければと思います。 How to build a responsive grid system 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 グリッドの実装に必要な準備 グリッド システムの構築 Step 1: グリッドを作成するための仕様を選択 Step 2: border-boxにbox-sizingを指定 Step 3: グリッドのコンテナを作成 Step 4: カラムの幅を計算 Step
![[CSS]レスポンシブ対応のグリッド システムを実装する時に絶対覚えておきたいテクニックを詳しく解説](https://cdn-ak-scissors.b.st-hatena.com/image/square/973ddf236729b95ec2af2884162bebe179d65cb5/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016111201.png)
head内に記述する要素の総まとめ -meta要素、link要素、ソーシャルサービス用の要素、ブラウザやスマホアプリ用の要素など
HTMLドキュメントのhead内に記述するmeta要素やlink要素、ソーシャルサービス用の要素、ブラウザ用の要素、スマホアプリ用の要素などをまとめた「HEAD」を紹介します。 HEAD -GitHub 翻訳するにあたりいくつか尋ねたところ、著者様はとてもいい人でした。 公開当初から内容がアップデートされ、ライセンスもCC0に変更されています。 オススメの最小限の構成 要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 スマホアプリ関連のhead内の要素 メモ オススメの最小限の構成 下記は、head内に記述する最小限のタグです。
Gentallela - プログラマでも美しく管理画面を作成できるBootstrapテーマ | ソフトアンテナ
「Gentellela」はBootstrap 3を使った無料の管理画面用テンプレートです。デフォルトスタイルのBootstrap 3をベースとして多数のパワフルなjQueryプラグインやツールを組み込んだもので、美しい管理用パネルやダッシュボードを簡単に作成することができます。 テーマにはチャートや、カレンダー、フォーム検証ライブラリ、ウィザードスタイルのインターフェイス、ナビゲーションメニュー、テキストフォーム、スライダー、プログレスバー、通知メニューなどたくさんの有用なライブラリが組み込まれています。 今回はオンライン上で確認できるデモサイトを元に、どのような画面が実現できるのかスクリーンショットとともに紹介したいと思います。 ダッシュボード ▲ダッシュボードのデモでは多様なチャートが表示できることが確認できます。テーマはレスポンシブ対応で画面サイズに応じて適切に描画されます。 フォー
小さな会社でも頑張れば成果が出せるホームページ・ブログ運営について | cocothai[ココタイ]
小さな会社でも頑張れば成果が出せるホームページ・ブログ運営について
![小さな会社でも頑張れば成果が出せるホームページ・ブログ運営について | cocothai[ココタイ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/243d0e202e395154717332c94083c23a64ac27d7/height=288;version=1;width=512/http%3A%2F%2Fthai.cocole.jp%2Fwp-content%2Fuploads%2F2015%2F12%2Fwebsite-weblog.jpg)
HTML5+Canvasでパーティクルっぽいのを作ってみる
Posted: 2015.07.16 / Category: javascript / Tag: HTML5, アニメーション HTML5+Canvasを使用して簡単な横に流れるパーティクルを作成してみます。 パーティクルオブジェクトを作成して動かす 基本的な作りは下記記事をベースに作成します。 HTML5で作るCanvasアニメーションの基礎 上記の記事では一つの円を動かすだけだったので描画関数だけ作成しました。 function drawCircle(x, y, scale, color) { ctx.beginPath(); ctx.arc(x, y, scale, 0, 2*Math.PI, false); ctx.fillStyle = color; ctx.fill(); } パーティクルの場合、粒子一つ一つに位置情報や速度の設定をしたいので、少し拡張してオブジェクトとして作成
サービス開発におけるエンジニアの役割 - クックパッド開発者ブログ
会員事業部*1の小川（@conceal_rs）です。 会員事業部ではプレミアムサービスの価値を向上させるために、日々機能改善や新しい機能やサービスの開発をしています。今回はサービス開発をするときにエンジニアがどういう役割を果たすといいかについて、私なりの経験からの話をしたいと思います。 サービス開発とは サービス開発とはユーザのみなさんに、アプリやウェブを通じて何らかの価値を提供することだと考えています。価値と言ってもいろいろなものや形態があり、Webサービスというとだいたいがツールぽいものを想像しますし、最近だとゲーミフィケーションを使った脳トレサービスなどもあります。また既存のサービスに新しい機能や体験を追加して価値を届けるということもサービス開発です。私が所属している会員事業部はプレミアムサービスを利用して頂いているユーザのみなさんに新しい価値を提供すべく、日々業務に勤しんでいます。
気を付けたい！Webサイトにおける制作側と発注側の常識の違い
Web制作をしているとお客様と我々制作側の認識が異なり、ちょっとした揉め事になったりすることがあります。 当社でも時々ありますが、揉め事の発端は制作側では常識だと思っていたけれど、発注者が感じている常識は異なっていた、という常識のすれ違いがほとんどです。(言葉の使い方の食い違いなどもありますね。) そういうことは制作側からちょっと気にして確認しておけば良い話ではあります。 ですが、「そのくらいは常識でしょう」ということでよく確認せずに、最終的に揉め事に繋がってしまうのです。 制作の「この位のことは、、」という常識がいつだってそうではないのです。 そこで今回は、我々制作側が常識として事前確認をスルーしてしまいがちな、Web制作における制作側と発注側の常識の食い違いについて書いてみます。 そんな事確認するのは当然だろう、と思われる方はそっと本エントリーを閉じてください。 (そう思われても時々漏
Bootstrapでかっこいい縦長ページを作りたい人にオススメ！完成形から制作用のファイルまで全部揃ったテンプレート -Forkio
固定ヘッダ、オフキャンバス、スクロールと連動したちょっとしたアニメーション、コンテンツスライダーなど、最近よく見かけるトレンドを巧みに取り入れたレスポンシブ対応の縦長ページを実装するテンプレートを紹介します。 Bootstrapで、かっこいい縦長ページを作りたいと思ってる人はぴったりです！
HP作成の初心者でワイヤーフレームの作り方をよく知らない人へ
本気でweb制作を仕事にしたいなら 現場で通用する実践的なスキルを身につけましょう。 【独学 vs スクール】メリットとデメリットを比べて、おすすめの学習方法もお伝えします。 続きはこちら 今回は、web制作時によくある悩み「ワイヤーフレームの作り方がわからない」を解決します。 意外に、ワイヤーフレームの作成方法を詳しく教えてもらう機会は少ないですよね。 そのため、以下のような悩みを抱える人が多くいます。 ワイヤーフレームが何かを知っているけど、いまいちうまくまとめられない。 ワイヤーフレームを作るときの手順が合っているかどうか自信がない。 webサイトの制作過程において、ワイヤーフレームの時点で失敗していると次の工程のデザインも絶対うまくまとまりません。 ワイヤーフレームは、家を建てるときの設計図と同じ役割をします。 適当に作った設計図をもとに家を建てたら、当然、住みにくく崩れやすいもの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
驚くほど簡単！コーディング作業不要で、まざまなHTMLページを積み木感覚で作成できる無料ツール -Stitches
イマドキのコーダー環境構築2016
CSSのみで作られたローディングアニメーションのセット・「Loaders.css」
CSSの基礎知識から実践的なテクニックまで、しっかりと身につけたい人はチェックした方がいいサイト -CSS Reference
なんでCSSすぐ死んでしまうん
