Yochix2.com https://yochix2.com/ Yochiのブログ Fri, 31 Jul 2020 08:19:20 +0000 ja hourly 1 https://wordpress.org/?v=6.2.4 https://yochix2.com/wp-content/uploads/2019/10/cropped-yochi-blog-favicon-32x32.png Yochix2.com https://yochix2.com/ 32 32 ダークモードを実装しよう「HTML&CSS コーディング・プラクティスブック 3」 https://yochix2.com/practicebook3/ Fri, 31 Jul 2020 08:00:00 +0000 https://yochix2.com/?p=6153 2020年7月に出たエビスコムの電子書籍「HTML&CSS コーディング・プラクティスブック 3」を読んだ感想を紹介します。 HTML&CSS コーディング・プラクティスブック 3 はKindle本で、A…

ダークモードを実装しよう「HTML&CSS コーディング・プラクティスブック 3」Yochix2.comで公開された投稿です。

]]>
2020年7月に出たエビスコムの電子書籍「HTML&CSS コーディング・プラクティスブック 3」を読んだ感想を紹介します。

HTML&CSS コーディング・プラクティスブック 3 はKindle本で、Amazon読み放題サービス「Kindle Unlimited」に加入すると無料で読むことができます。

今回も、作例を読む前にデザインカンプと指示書だけ見て、まずページ制作にチャレンジし、その後作例の通りコーディングしてみました。

Webページコーディング実践シリーズ 第3弾

HTML&CSS コーディング・プラクティスブック 3は、デザインカンプと指示書に従いながらWebページを自分でコーディングしてみる実践シリーズの第3弾。

今回の大きなテーマはダークモード対応。つくるサイトのレイアウトはシンプルで、コンテンツ量も多くないため、そんなに時間はかかりませんが、ダークモード対応とヘッダーの画像周りがキモとなりそうです。

コーディングしてみた感想

サイトをカンプ通りに作ることは何とかできましたが、とりあえず見た目だけ完成させたので、作例のようにシンプルかつスマートにはいかず。

苦労した or 悩んだ点はやはりダークモードとボーダーイメージ。
スイッチを使ったダークモード対応はやったことなかったですし、ボーダーイメージも普段使わないのでめっちゃ調べましたね。

ただ苦労してつくったダークモードのスイッチが、オンラインツールを使って作成していたのには、ちょっと拍子抜けしちゃいましたけど……
でも、実際仕事などで実装するときは、パパっとこうしたりするものなんでしょうね。

今回はダークモード対応のためにJavaScriptを使うため、HTML&CSSだけでなくJavaScriptの理解も求められます。

あとAdobe XDも使うので、Adobe XDの使い方をガッツリと学びたいという方には「Adobe XDではじめるWebデザイン&プロトタイピング」がおすすめです。

関連記事:Adobe XDの使い方が学べる「Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル」

やってみてちょっと思った知りたいコト

本書には難易度のレベルが設けられていますが、あまり当てになりません。
というのも、その人が実装に関連する知識を知っているかどうかで変わってくるから。
今回だとHTMLやCSSは習得済みでも、JavaScriptはサッパリという人だったらレベル5くらいの難易度に感じるでしょう。

それよりも普段仕事や業務でやっているコーダーやデザイナーの方なら、どれくらいの時間でつくれるのだろうというコトのほうが気になりますね。
なので個人的には難易度だけでなく、制作時間の目安もあったらが良いなぁと思いました。

理解しただけで実際に手を動かしてサイトをつくらないと、いつのまにか忘れたりもしているので、コーディング・プラクティスブックは自分の腕試しにちょうど良いです。

ダークモードを実装しよう「HTML&CSS コーディング・プラクティスブック 3」Yochix2.comで公開された投稿です。

]]>
Adobe XDの使い方が学べる「Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル」 https://yochix2.com/adobexdwebdesign/ Tue, 07 Jul 2020 08:00:00 +0000 https://yochix2.com/?p=6141 2020年5月に翔泳社より出た「Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル」を読んだので、紹介したいと思います。 Adobe XDの使い方が知りたい方や、Adobe XDでどんなこ…

Adobe XDの使い方が学べる「Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル」Yochix2.comで公開された投稿です。

]]>
2020年5月に翔泳社より出た「Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル」を読んだので、紹介したいと思います。

Adobe XDの使い方が知りたい方や、Adobe XDでどんなことができるの?とこれまで思っていた方におすすめできる書籍です。

Adobe XDの使い方がひと通り学べる

Adobe XDではじめるWebデザイン&プロトタイピングは、Adobe XDを使ったWebデザインの作り方が学べる書籍です。

ワイヤーフレームやデザインカンプ、プロトタイプ、画像書き出しなど、制作の流れに沿って学ぶことができます。

これを読めば、Adobe XDの使い方がひと通り学べ、自分でデザイン作業が行えるようになるのではないでしょうか。

書籍の内容も図解が多くあり丁寧なので、ほぼ戸惑うことなく進めることができました。

唯一の不満点があるとしたら、文中のショートカットの記載がMacのみなところ。
一応、「本書を読む前に」ページ内にてMacとWindowsの対応について書かれてはいます。

MacWindows
commandCtrl
OptionAlt
ReturnEnter
MacとWindowsのキーの読み替え

ですが、Windowsしか触ったことのない人だと瞬時に読み替えられないので、手間がかかります。
そこだけ対応してくれていたら、もっと読みやすくなるのになぁと思いました。

あと、すべてを自分で制作するわけではないので、最後に自分でイチから仕上げる練習問題みたいなのを用意してあるとさらにうれしかったかも。

現時点でAdobe XDを書籍で学びたいならコレ

Adobe XDについていまいち良くわかっていなかった私でも、「Adobe XDではじめるWebデザイン&プロトタイピング」を読むことで、操作方法や活用の仕方を理解することができました。

サンプルで作るサイトもおしゃれでモチベーション上がりますし、内容も実践的なため、これからAdobe XDを習得したいという方におすすめの書籍です。

Adobe XDの使い方が学べる「Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル」Yochix2.comで公開された投稿です。

]]>
初心者が「Webサイト高速化のための静的サイトジェネレーター 活用入門」を読んでみた感想 https://yochix2.com/ebisucom-gatsbyjs/ Wed, 10 Jun 2020 08:30:00 +0000 https://yochix2.com/?p=6121 2020年6月にマイナビブックスより出た「Webサイト高速化のための静的サイトジェネレーター 活用入門」を読んだので、思ったことなどを書いていきます。 Webサイト高速化のための 静的サイトジェネレーター活用入門 (Co…

初心者が「Webサイト高速化のための静的サイトジェネレーター 活用入門」を読んでみた感想Yochix2.comで公開された投稿です。

]]>
2020年6月にマイナビブックスより出た「Webサイト高速化のための静的サイトジェネレーター 活用入門」を読んだので、思ったことなどを書いていきます。

とりあえずの感想

本の通り読み進めてコードを書いていけば、ちゃんとサイトは作ることができました。
環境設定とかでつまずいたらどうしようとか思ったのですが、完走できてホッとしています。

そして出来上がったサイトを見てみると表示が爆速。gatsby-imageによる画像の最適化。
これだけでもGatsbyJSでサイトをつくることによる恩恵を実感しました。

ただ、本に書いてあるコードを写経しただけなので、到底理解できたとは言えず。
序盤はなんとか付いて行けてましたが、後半の方は理解が追いついていかなかったかも。
まだ構造を理解しきれていないため、本と同じことはできてもカスタマイズするのは厳しそうです。

私はHTML&CSSでページはつくれる、JavaScriptは配列やループなど基本的なことはわかる、Reactはまったく触ったことがないというレベル。

ReactやJavaScript初心者レベルだと内容が難しいかもしれません。

いちばんのハードルは環境構築

プログラミングを学ぶ上でいちばん大変というか、最初の山場が開発環境を準備することだと思います。

プログラミングの本を読んでみても、環境設定でつまずいてしまうと先にも進めず立ち往生なんてことも。

その点において、エビスコムの本は易しいです。本とは別にセットアップPDFを用意してくれてるんですから。

PDFは特典扱いとなっていますが、ちゃんと見ないとつくれないので、読むのは必須レベル。単にページに収まり切れなかっただけと考えた方が良さそう。

これだけ環境の準備についてサポートされているにもかかわらず、結局手間取ってしまうんですがね……

私の環境はWindows 10。WSLを利用するのが良いということでUbuntuをインストールしたのですが、その使い方がまずわかりません。

そもそも黒い画面に抵抗ある私。どうやってコマンドをコピペすれば良いのかとか、WSLファイルの場所がわからない、特定のフォルダへどうやって移動すれば良いの?などなど…

その都度ネットで調べて解決することはできたのですが、無知の自分にはハードルの高さを感じました。

欲を言えば……

エビスコム本と言えばHTML&CSS、WordPressというイメージでしたが、ちょっと違った角度に手を出してきたというのは驚きでした。もちろん良い意味で。

たまにネット上でWordPressからGatsbyJSに移行しましたという記事を読んだりしていたので、静的サイトジェネレーターは以前から気になっていた題材。

ネット記事だと説明が端折ってたり正しいのか不安だったりもするので、書籍で解説してくれるのは非常にありがたいです。

ただ欲を言わせてもらうと、コンテンツの管理はContentfulやmicroCMSだけでなく、WordPressも取り上げてほしかったというのが正直なところ。

GatsbyJSだけでなくContentfulについても理解するのはキツいですし、WordPressのGutenbergの利便性を体験してしまうと今さらクラシックエディタみたいなので記事を書くのはちょっと……

それでもGatsbyJSで爆速サイトをつくってみたい意欲はあるので、チュートリアルなど読んで勉強しようかとは思います。

真に読みたいのは

エビスコムでJavaScriptを扱う書籍が出たのはうれしいのですが、個人的にいちばん読みたいのはJavaScriptレッスンブック

そもそも自分にプログラミングが向いていないというのもありますが、なかなかコレだ!っていう本に出会えていないので、エビスコムが書いた初心者向けのJavaScript本がどうなるのか見たくなります。

これからのWebサイト制作

静的ページやコンテンツ量の少ないサイトはGatsbyでつくるのが良さそうと感じたので、WordPressと使い分けていきたいですね。

書籍の内容は一周しただけじゃ理解できなかったので、あと一、二週は読み倒したい。
やる気がでたらGatsbyJSやReactのチュートリアルも読んでみようと思います。

初心者が「Webサイト高速化のための静的サイトジェネレーター 活用入門」を読んでみた感想Yochix2.comで公開された投稿です。

]]>
ColorfulBoxでWordPressをやるならBOX2からがおすすめな理由 https://yochix2.com/colorfulboxwp/ Sat, 16 May 2020 07:30:00 +0000 https://yochix2.com/?p=6110 新たなレンタルサーバーを試してみようと思い、レンタルサーバー「ColorfulBox(カラフルボックス)」を契約してみました。 ColorfulBoxを選んだ訳は、ワンコインからはじめられるBOX1のプランがあるから。B…

ColorfulBoxでWordPressをやるならBOX2からがおすすめな理由Yochix2.comで公開された投稿です。

]]>
新たなレンタルサーバーを試してみようと思い、レンタルサーバー「ColorfulBox(カラフルボックス)」を契約してみました。

ColorfulBoxを選んだ訳は、ワンコインからはじめられるBOX1のプランがあるから。
BOX1だと、12ヵ月契約で月額580円、36ヵ月で月額480円になります。

価格の安さに惹かれて契約したのですが、BOX1だとWordPressをはじめるのはつらいかもしれません。

画像投稿でエラーになる

記事を書いて解像度1920×1440の画像をアップロードしようとすると、「返答が正しいJSONレスポンスではありません。」というエラーが出てしまいました。

投稿画面のスクショ「返答が正しいJSONレスポンスではありません。」

エラーは出るのですが、メディアライブラリを確認してみるとなぜか画像はアップロードされています。

ためしにメディアからも新規追加してみたのですが、そちらもダメ。

今度は「サーバーの負荷が高いか十分なリソースがないため画像の後処理に失敗しました。もっと小さな画像をアップロードしてみてください。」というエラーが出ました。

メディアのアップロード「サーバーの負荷が高いか十分なリソースがないため画像の後処理に失敗しました。もっと小さな画像をアップロードしてみてください。推奨する最大サイズは2500ピクセルです。」

画像のサイズが大きすぎるのが原因らしく、解像度を1920×1440から1200×900にするとちゃんとアップロードできました。

メディアのアップロード画像

BOX1だとメモリやリソースの量が絞られているため、このようなエラーが起きたのだと思われます。(設定で回避できるのかな?)

テキスト主体のサイトや解像度の小さい画像を投稿するならBOX1でも良いのかもしれません。
ただ、長くしっかりWordPressをはじめたいならBOX2以上から選ぶことをおすすめします。

ColorfulBoxでWordPressをやるならBOX2からがおすすめな理由Yochix2.comで公開された投稿です。

]]>
「初心者からちゃんとしたプロになる JavaScript基礎入門」「これからはじめる人のJavaScript/Vue.jsの教科書」最初の1冊に選ぶなら? https://yochix2.com/jsbooks202005/ Wed, 06 May 2020 08:00:00 +0000 https://yochix2.com/?p=6100 私は技術書を選ぶとき、気になっている本でも一度書店で立ち読みして内容を確認して購入するタイプ。 ですが、このご時世。書店で立ち読みするのも憚られますし、そもそも立ち読みできる大きな書店は営業停止しています。 外にも出られ…

「初心者からちゃんとしたプロになる JavaScript基礎入門」「これからはじめる人のJavaScript/Vue.jsの教科書」最初の1冊に選ぶなら?Yochix2.comで公開された投稿です。

]]>
私は技術書を選ぶとき、気になっている本でも一度書店で立ち読みして内容を確認して購入するタイプ。

ですが、このご時世。書店で立ち読みするのも憚られますし、そもそも立ち読みできる大きな書店は営業停止しています。

外にも出られず暇を持て余しているため、今回は気になっていたJavaScriptの本をネットで購入して読んでみました。

選んだのは「初心者からちゃんとしたプロになる JavaScript基礎入門」と「これからはじめる人のJavaScript/Vue.jsの教科書」の2冊。
どちらもこれからJavaScriptをはじめようという初心者向けの本となっています。

この記事では「初心者からちゃんとしたプロになる JavaScript基礎入門」と「これからはじめる人のJavaScript/Vue.jsの教科書」を読んでみて、どちらが最初の1冊におすすめか紹介したいと思います。

おすすめするなら「これからはじめる人のJavaScript/Vue.jsの教科書」

まずはじめに結論からいうと、最初の1冊には「これからはじめる人のJavaScript/Vue.jsの教科書」がおすすめです。

ひとつのチャプターごとにひとつのプログラムをつくりながら解説されているので、わかりやすいですし区切りやすいです。

特に最初の入りがていねいで、エディターのVisual Studio Codeのインストールや日本語化の仕方、オブジェクト指向の考え方についてもわかりやすかったです。

ただJavaScriptだけでなく、TypeScriptやVue.jsについても取り上げているため、後半になるにつれ徐々に難易度は上がっていきます。
1回読んだだけでは理解できないので、何度も読み返す必要がありそうです。

私はとりあえずJavaScriptをまず学びたいので、最後のVue CLIを使ったアプリの制作にはまだ手を付けていません。

「初心者からちゃんとしたプロになる JavaScript基礎入門」は初心者に易しくない

一方の「初心者からちゃんとしたプロになる JavaScript基礎入門」はというと、テキストエディタのおすすめは紹介していますが、Visual Studio Codeのインストールなどについては解説していません。

Lesson 1、Lesson 2までは何とかついていくことができましたが、Lesson 3になるとTodoアプリの制作に入ります。
ここからプログラムの記載量が一気に増えて難易度が上昇。私はここでつまずいてしまいました。

Todoアプリの挙動も微妙でいまいち馴染めなかったのも原因のひとつ。
さらにLesson 4のVue.jsの基本でもVue.jsを利用したTodoアプリの制作を学ぶので、Lesson 3でつまずいてしまうと先へ進めません。
同じTodoアプリでも仕様や見た目が違うのにも少しイラっとします。

この本は著者が複数いてレッスンごとに執筆者が違うため、影響が出ているのかもしれません。
JavaScriptとは関係ありませんが、Lesson 2の時点でnormalize.cssを使っているのに説明があるのはLesson 3になっていたりとチグハグな印象を受けました。

初心者に向けて書いてはいるのでしょうが、ちゃんと事前に初心者の方に読んでもらって確認しているのか疑問に感じます。

はじめはJavaScriptをみっちり勉強したほうがいいかも

「初心者からちゃんとしたプロになる JavaScript基礎入門」と「これからはじめる人のJavaScript/Vue.jsの教科書」はどちらもJavaScript、Vue.jsを一緒に学べる本になっていますが、JavaScriptの知識があいまいだとVue.jsを覚えるのも難しいと感じました。

ですので、初心者であればまずはJavaScriptだけを取り上げた書籍を読んだ方が良いと思います。
まずはJavaScriptの知識を磨いていくことが大事かもしれません。

そもそもJavaScriptに向いていないのか、はたまた自分に合う書籍が見つかっていないだけなのか…
まだまだ理想のJavaScript本探しは続きそうです。

「初心者からちゃんとしたプロになる JavaScript基礎入門」「これからはじめる人のJavaScript/Vue.jsの教科書」最初の1冊に選ぶなら?Yochix2.comで公開された投稿です。

]]>
Web制作現場で役立つ知識を学べる「[改訂版]WordPress 仕事の現場でサッと使える! デザイン教科書」 https://yochix2.com/wpdesignbook/ Sat, 28 Mar 2020 10:00:00 +0000 https://yochix2.com/?p=6047 技術評論社より2020年2月に出版された「[改訂版]WordPress 仕事の現場でサッと使える! デザイン教科書[WordPress 5.x対応版]」を読んだので、紹介したいと思います。 [改訂版]WordPress …

Web制作現場で役立つ知識を学べる「[改訂版]WordPress 仕事の現場でサッと使える! デザイン教科書」Yochix2.comで公開された投稿です。

]]>
技術評論社より2020年2月に出版された「[改訂版]WordPress 仕事の現場でサッと使える! デザイン教科書[WordPress 5.x対応版]」を読んだので、紹介したいと思います。

[改訂版]WordPress 仕事の現場でサッと使える! デザイン教科書は、静的なHTMLサイトをWordPress化していくなど、クライアントワークで役立つノウハウを紹介・解説する中級者以上を対象にした本です。

私とWordPress 仕事の現場でサッと使える! デザイン教科書

WordPress 仕事の現場でサッと使える! デザイン教科書は、改訂版の前のヤツも買って読んだことがあります。

そのときはWordPressに触れたばかりのころだったので、読んでもサッパリで馴染めず。
すぐにポイッと投げ飛ばしてしまっていました。

しかし、Amazonでのレビューを見てみると高評価が多いんですよね。
また私もWordPressのテーマを自作できるくらいの腕前になったので、もう一度読んでみるかと思い、この本を手にしてみました。

[改訂版]WordPress 仕事の現場でサッと使える! デザイン教科書の特徴

「[改訂版]WordPress 仕事の現場でサッと使える! デザイン教科書」を読んで感じた特徴を何点か挙げてみたいと思います。

  • 静的サイトをWordPressテーマ化していきながら解説
  • カスタム投稿タイプ・カスタムフィールドのカスタマイズ
  • クライアントワークを意識した管理画面のカスタマイズやマルチサイト機能の紹介
  • ショートコード・プラグイン作成について触れてある

静的サイトをWordPressテーマ化していきながら解説

[改訂版]WordPress 仕事の現場でサッと使える! デザイン教科書では、HTMLでつくられた静的サイトをWordPressで表示できるよう組み替えながら、テーマの作り方について学べます。

WordPressテーマ制作を題材にした本もいくつかありますが、「WordPressレッスンブック 5.x対応版」が汎用的なテーマ制作に向いた内容であるのに対し、本書はお店や会社などオリジナルのサイトをつくるためのテーマ作りに焦点が当てられています。

静的サイトをWordPressのコードに置き換えていくという流れ上、仕方ないことですが、毎回ヘッダーなどget_header()に修正しなきゃいけないなど、冗長な部分があり打つのが面倒でした。

また、本書ではHTMLやCSSにはまったく触れられていないので、サイトの外観についてのコードを知りたいという方は、自分でチェックする必要があります。

クライアントワークで役立つ各種カスタマイズの紹介

[改訂版]WordPress 仕事の現場でサッと使える! デザイン教科書を読んでいちばん目についたのが、クライアントを意識したカスタマイズの紹介が多いこと。

カスタム投稿タイプ、カスタムフィールドを使うことで作成・入力を容易にする、より使いやすいように管理画面をカスタマイズするなど、クライアントワークで役立つ制作の知識や運用を学べます。

そのため、本書は「仕事の現場でサッと使える!」とあるように、Webサイト制作の現場の人に適した本であるといえます。

他の本ではあまり取り扱わないショートコードやプラグインの作り方を紹介

簡易的ではありますが、後半の章にてショートコードやプラグインの作り方について紹介しているのも、この本の特徴のひとつ。

マルチサイト機能で複数のサイトをつくる、子テーマの作成など他の本ではあまり扱わない項目にも触れてあります。

[改訂版]WordPress 仕事の現場でサッと使える! デザイン教科書は明らかに中級者以上を対象にした本になっているので、1章のWordPressの使い方や6章のブロックエディタの説明など基本的な事柄は省いてもよかったのではと思います。

WordPressでサイトを制作する人におすすめの本

「[改訂版]WordPress 仕事の現場でサッと使える! デザイン教科書」は、お客さんのサイトをWordPressで制作する人におすすめしたい一冊です。

書いてある内容がページをまたがったりして少し読みづらいのが難点ですが、手元に置いておくといざというときに役立つはず。

逆引き的な本ではないので、困ったときにサッと調べたい内容にたどり着けるかは疑問ですが、サイト制作でWordPressを扱うことになったという人はとりあえず読んでみると良いかもしれません。

Web制作現場で役立つ知識を学べる「[改訂版]WordPress 仕事の現場でサッと使える! デザイン教科書」Yochix2.comで公開された投稿です。

]]>
「HTML&CSS コーディング・プラクティスブック 2」でページ制作に挑戦してみた感想 https://yochix2.com/practicebook2/ Sun, 16 Feb 2020 14:30:00 +0000 https://yochix2.com/?p=6004 2020年1月にリリースされた「HTML&CSS コーディング・プラクティスブック 2 実践シリーズ」のコーディングに挑戦してみたので、その感想をお届けします。 HTML&CSS コーディング・プラクテ…

「HTML&CSS コーディング・プラクティスブック 2」でページ制作に挑戦してみた感想Yochix2.comで公開された投稿です。

]]>
2020年1月にリリースされた「HTML&CSS コーディング・プラクティスブック 2 実践シリーズ」のコーディングに挑戦してみたので、その感想をお届けします。

HTML&CSS コーディング・プラクティスブック(コーディングプラクティスブック)は、Adobe XDで作成されたデザインカンプを元に、コーディングを行う実践シリーズです。

「HTML&CSS コーディング・プラクティスブック 1」は写経したのみでしたが、「HTML&CSS コーディング・プラクティスブック 2」ではXDカンプと指示書に従いながら、実際にコーディングにチャレンジしてみました。

関連記事:コーディング力を腕試しできる「HTML&CSS コーディング・プラクティスブック」

歯ごたえある難易度設定

本書の難易度はレベル4(5段階)と設定されていますが、いざ試してみるとなかなか歯ごたえのある難易度になっています。

フレックスボックス、ネガティブマージンを駆使しないとレイアウトできません。

実際、コーディングするのに苦労しました。レスポンシブも意識しなければならず、実装するのが難しかったです。

実際にやってみて己の対応力の無さを痛感

デザインカンプを見ながらコーディングをするという作業はコレがはじめて。

巷のHTML/CSS本を読み漁っている私ですが、自分で文書構造を考えコーディングし、デザイン通りにつくるのが難しいということを痛感。

自分でイチから組み立てるのに対し、他人がつくったデザインの意図を読み取り、実装する。それが実に難しい……

加えてAdobe XDの操作に慣れていなかったため、データを読み取るのにも一苦労。

コーディングしたサイトのスクリーンショット
自分でコーディングしてみたサイトのスクリーンショット画像

パッと見は何となくサマになっていますが、よくよく見てみるとところどころズレたりしています。
コードも冗長になってますし、もっとスマートに記述しなきゃと反省。

答え合わせで見つけた気づき

自分で実際にコーディングした後に、作例を見ながら写経した際に見つけた気づきをいくつか挙げてみます。

  • 余白のラインの意識
  • 余白・文字サイズのレスポンシブ化
  • カンプデータの読み取り力
  • 人によって異なるマークアップ

余白のラインの意識

作例を見ていちばん驚いたというか、見逃してしまったなぁというのが左右の余白の縦のライン。
両端の余白は当然意識しますが、他のラインの存在を見落としていました。
ずれたレイアウトになっていたので、何かしら規則性があるのをもっと感じ取る必要がありました。

余白・文字サイズのレスポンシブ化

実装方法に難儀したのが余白とフォントサイズのレスポンシブ。

指示書に書かれているのでやらなきゃいけないのですが(面倒)、デザインカンプだけでは読み取りづらいので、自分で考えて実装する必要があります。

作例のフォントサイズをルートで「1rem=100px」にする手法は初耳でしたし、「vw」でレスポンシブに対応するやり方も面白く、タメになりました。

カンプデータの読み取り力

背景画像の境界や半透明オブジェクトとか、作例を見るまで見落としていた点が多々あり。

カンプをもっと触っていれば気づけたのかもしれませんが、サイズばっかり測って素材はスルーしてしまっていました。

Adobe XDの使い方もまだまだですし、今後触れる機会も増やしていきたいところ。

人によって異なるマークアップ

デザインカンプを見ながら自分で制作する必要があるので、当然記述する内容も人によって変わってきます。

作例ではコンテンツをarticle, asideでマークアップしていましたが、私はすべてsectionでマークアップしていました。

サイトをつくる人によってコードの書き方は千差万別。明確な正解というのもないはず。
いろんな人が書いたコードを投稿・共有する場所があったら、議論したりなどして盛り上がりそうだなぁと感じました。

自分で考える力が試される

HTML&CSS コーディング・プラクティスブックは、自分で考えてコーディングする力が試されます。

自分でサイトデザインもやってコーディングするとなると、つい得意のカタチに行きがち。

他人からの指示・制約があるなかコーディングする、やったことのないレイアウトに挑戦してみることで、新たな幅が広がるのかもしれません。

「HTML&CSS コーディング・プラクティスブック 2」でページ制作に挑戦してみた感想Yochix2.comで公開された投稿です。

]]>
ド初心者でも自分のホームページが作れる「知識ゼロからはじめるWordPressの教科書」 https://yochix2.com/chishikizerowp/ Tue, 11 Feb 2020 10:00:00 +0000 https://yochix2.com/?p=5991 ソシムより2020年2月に出版された「知識ゼロからはじめるWordPressの教科書」を読んだので、紹介&感想を書いていきます。 知識ゼロからはじめる WordPressの教科書 ソシム (2020/2/1) 知…

ド初心者でも自分のホームページが作れる「知識ゼロからはじめるWordPressの教科書」Yochix2.comで公開された投稿です。

]]>
ソシムより2020年2月に出版された「知識ゼロからはじめるWordPressの教科書」を読んだので、紹介&感想を書いていきます。

知識ゼロというタイトルに偽りなしの入門書

知識ゼロからはじめるWordPressの教科書は、WordPressを触ったことがない初心者の方でもかんたんに自分のホームページを作ることができる入門書です。

WordPress のバージョン5より導入されたブロックエディタ「Gutenberg(グーテンベルク)」に対応し、メニューや操作のやり方をわかりやすく写真付きで解説。

WordPressの解説書はたくさんありますが、知識ゼロからはじめるWordPressの教科書は操作画面の解説がものすごく丁寧でやさしい。
ほんとにWeb制作の知識がなくても、自分で会社やお店のホームページを作れるでしょう。

知識ゼロからはじめるWordPressの教科書の特徴

知識ゼロからはじめるWordPressの教科書を読んで感じた特徴を何点か挙げてみます。

  • 操作手順の解説が親切
  • 漫画・フキダシ形式のストーリー仕立て
  • スマートフォンでの作り方も紹介
  • サンプルサイトが実在するお店のホームページ

操作手順の解説が親切

レンタルサーバーでのWordPressのインストールや、WordPress管理画面の説明などひとつひとつ写真付きで解説してあります。

わかりづらい投稿と固定ページの違いや、ブロックエディタの使い方などもしっかりと解説。
すでにWordPressに触れている私からすると「ここまで丁寧に解説するか」という感じなのですが、初心者の方にはありがたいでしょう。

イラスト・フキダシ形式のストーリー仕立て

知識ゼロからはじめるWordPressの教科書に興味を持ち、読もうと思ったきっかけが、Amazonのイメージ画像に載っていた漫画形式のページ。

まるで進研ゼミのDMみたいな漫画で面白そうと思ったのが理由です。

はじめに見開きによる漫画でストーリーが展開。その後はカフェオーナーの女性と著者によるフキダシでの会話があり、レッスンが進んでいきます。

ページを読み進めていくと画面上の操作の説明がほとんど。イラストがあることでとっつきにくさを和らげてくれる効果もあるかも。

スマートフォンでの作り方も紹介

割かれているページ数は少ないですが、スマートフォンでのコンテンツの作り方も紹介されてあります。

最近はパソコンではなく、スマートフォンやタブレットで記事を書く人も多くなっているので、モバイルユーザーにも配慮されているところがナイスです。

サンプルサイトが実在するお店のホームページ

Twenty NineteenというWordPressテーマを使ってサイトを作っていくのですが、制作するサンプルサイトは実在のカフェのホームページが元になっています。

cafe sabot – カフェ・サボ|信州八ケ岳山麓のガレットが自慢のヴィーガンカフェ

WordPressの入門書に出てくるサンプルサイトは、どれも架空のサイトで嘘っぽいテイストのものが多いので、実在するサイトを作れるっていうのはテンション上がります。

実際に目で見ることでこんな感じなんだぁと実感も湧くと思うので、実在のサイトをサンプルにするのはとてもアリ。

知識ゼロからはじめるWordPressの教科書の惜しいところ

知識ゼロからはじめるWordPressの教科書はおすすめの入門書だと思うのですが、ちょっと惜しいなと感じるところもいくつかあったので紹介します。

レンタルサーバーがさくらインターネット

別にさくらインターネットが悪いというわけではありません。以前、私も使っていましたから。

でも他社のレンタルサーバーならもっと手軽にWordPressをインストールすることができ、解説に割くページ数を減らすことができたんじゃないかと思っただけです。

漫画形式のページが最初のみ

上記の特徴として挙げた漫画形式のページは、最初のたった2ページのみ。
その後はフキダシによる問答形式で進んでいくので、漫画形式に惹かれた私としては非常にガッカリなポイント。

各章ごとに漫画ページを用意するとかしてあると、もっとストーリーやイメージが膨らんで書籍として面白いモノになったはず。そこは非常に残念でした。

後半がちょっと早足気味

前半のレンタルサーバーやWordPress操作画面の解説はものすごく親切なのに、おすすめプラグインの紹介や最後の章はちょっと早足気味に感じました。

今までせっかく同じペースでゆっくり歩いていたのに、いつのまにか早足で先に進んで行かれたイメージ。

プラグインのいくつかは使い方が解説されていたので、そこは良いです。
ただ、おすすめプラグインを紹介してあるだけだと全部使った方が良いのかとか、どれを選べばよいかがわからないなどといった弊害もあると思います。
ビシッっと使うのはコレです!と絞ってあったほうが良かったかなぁ。

また最後の追加CSSや子テーマに関しては、HTMLやCSSの知識がないとチンプンカンプンだと思うので、読まずに飛ばしてしまっても構いません。
とりあえずコピペだけしておき、知識を蓄えてから改めて読んでみるのもいいかもしれません。

値段の安さも魅力のひとつ

知識ゼロからはじめるWordPressの教科書は、ド初心者向けのWordPress入門本です。

基本的なWordPressの使い方だけでなく、SNSを利用した運営方やセキュリティについても配慮されてあり、この1冊を読めば自分でお店のホームページをつくるのも造作ないでしょう。

定価1,518円と技術書としては値段が抑えめなのも手に取りやすく、初心者にはありがたいところ。

ド初心者でも自分のホームページが作れる「知識ゼロからはじめるWordPressの教科書」Yochix2.comで公開された投稿です。

]]>
技術書を売るならブックオフの宅配買取が良いかも https://yochix2.com/bookoffonline/ Wed, 05 Feb 2020 10:00:00 +0000 https://yochix2.com/?p=5982 読まなくなった・積んである技術書が増え、自室のスペースを圧迫してきていたため、断捨離を実施することに。 メルカリで一冊ずつ売った方が利益率は出そうですが、手数料と発送の手間を考慮し、今回はブックオフの宅配買取を利用しまし…

技術書を売るならブックオフの宅配買取が良いかもYochix2.comで公開された投稿です。

]]>
読まなくなった・積んである技術書が増え、自室のスペースを圧迫してきていたため、断捨離を実施することに。

メルカリで一冊ずつ売った方が利益率は出そうですが、手数料と発送の手間を考慮し、今回はブックオフの宅配買取を利用しました。

ブックオフオンラインの宅配買取について

ブックオフの宅配買取サービスは、不要になった本やCDなど箱に詰めて送るだけの買取サービスです。

ネットからかんたんに申し込むことができ、送料・手数料は無料。集荷も日時を指定でき、自宅まで取りに来てもらえるため、本が厚くて重い技術書を売るのにピッタリ。

スピードコースだと査定後すぐに振込みの手続きが行われ、値段のつかなかった品物は無料で引き取ってくれます。ただし、送付後の返却はできません。

ブックオフオンラインの宅配買取を利用してみた感想

今回、ブックオフオンラインで売却したのは技術書20冊とCD数枚。

自分でやることは申し込み(本人確認書類が必要)と、ダンボールの梱包だけ。
伝票の宛名を書く必要もありません。

申し込んだ翌日に集荷が来て、その3日後には査定結果がメールで送られてきました。

査定の金額結果は

申し込んだ査定結果の金額はというと、書籍買取価格25%UPクーポンを利用して

  • 書籍 → 20点/8,200円
  • CD → 1点/700円
  • 合計 → 21点/8,900円
  • お値段のつかなかった商品 → 5点

でした。

全部あわせて2,000円ぐらいになればいいかなぁと思っていたので、合計金額にちょっとびっくり。

ちなみにいちばん買取価格の高かった書籍は「なるほどデザイン 目で見て楽しむ新しいデザインの本。」で、1,063円(増額前 850円)。

他には「気づけばプロ並みPHP 改訂版 ゼロから作れる人になる!」、「プロを目指す人のためのRuby入門」が876円(増額前 700円) と高額でした。

CDは欅坂46のアルバムが売れただけ。その他は値段がつかず引き取りに。断捨離目的だったので良かったのですが

技術書は人気のある or 専門的なのが高額で売れやすい気がする

タイトルごとの査定金額を見て感じたのは、やはり人気のある書籍に高値が付きやすいです。

また専門的な内容を扱う書籍や在庫量が少なかったりすると、買取金額が高くなる傾向があります。

3~5年前の古い書籍になると、買取金額が10円や100円になるのがほとんど。
ただ比較的発売があたらしい本でも、書籍の人気や内容によって安かったりもします。初心者向けの本だと安値になりやすいかも?

宅配買取が使えるなら紙の技術書で良いかも

購入する技術書を紙ベースから電子書籍へ移行しようかともくろんでいたのですが、手軽に宅配買取ができるのなら、今後も紙の技術書でいいかなぁという気がしてきました。

紙だと重くて厚い、置き場所をとるのが邪魔なんですが、読みやすさはやはり紙の方が上。
読んですぐリセールできるのも考えると、紙の書籍のほうがメリットが多いかも。

要らなくなった本はまとめて宅配買取で売ればいいですしね。自分で処分するのは重すぎてムリ。腰をいわせます。

技術書を売るならブックオフの宅配買取が良いかもYochix2.comで公開された投稿です。

]]>