バイオリン応援団*いちろーたのブログ

弦楽器奏者に役立つカラダのやさしい使い方をレッスンしています【自然な動きで弦楽器演奏を極める】がモットー。音楽活動のこぼれ話、Mac・iPhone、食べ物のこと書いてます。

*

TABLEタグでレイアウトしてた時代遅れの僕がHTML/CSSを本気で勉強しなおすことにした理由~デザインは《言いたいこと》から生まれてくる

   

先日のエントリに書いたように、HTMLとCSSを勉強しなおしています。

なにしろTABLEタグでレイアウトしていた頃の知識までだったんで。
 
ロミオとジュリエットで学ぶWebデザイン再入門…【HTMLとCSSで基礎から学ぶWebデザイン】を買ってきて読んでみたら名著の予感! 
HTMLは文章をコンピュータに解釈させるための標識だという立場に徹して、著者は書いています。「一般的なサイトでこうやるといいよ」なんてことは出てきません。そのかわり、「このタグにはこういう意味・文化的 …
HTMLは構造を与えるために、CSSは構造を読ませやすくするために使う。
で、実際にデザインをいじり始めてます。

なぜ、デザインが必要か?

この本に書いてあるのは《もともとの文章を構造化して、意味に合わせて仕分けて、装飾とレイアウトを行う》ということ。なぜそうするのかといえば、わかるように読ませるため。
このことを、簡単な例に始まって、長い文章を使って修練できるような根気をもって書かれた本です。たから、タグや属性のひとつひとつを、どう使い分けていけばいいのかがちょっとずつ分かってくる。
ふとこんなことを思った。
デザインは、言いたいこと・伝えたいことがあるから生まれてくる。
この本を読んで、僕はデザインは必然だと思った。言いたいことを練りあげていくと、デザインという問題にぶつかるからだ。Webでの表現をするときに、その基礎技術であるHTMLを知っておいて損はないと思う。知らなくても文章はかけるし、出来合いのブログサービスを使っていれば、なんとなく見栄えが整ってるので伝えることは達成される気もする。

モノを作る面白さ

そこで僕が感じていたモヤモヤ……違和感はなんだったのか。現状で、執筆の道具たるブログサービスで書き上げたHTMLのソースを読んでみると、意味不明な・無駄なタグが並んでいるからだ。僕の理解がブログサービスを提供している人の考え方や、HTML/CSSの理念やらを捉えきれていないために感じているものが、違和感の正体かもしれない。違うかもしれないけど、いまの僕はそう思っている。
初めは見た目だけを追ってCSSに関心を持って、出来合いのテンプレートをいじり始めたものだ。今は、この違和感を解消したいために、自分でツギハギして歪ませてしまったテンプレートを読み解くことからやり直している。実に面白い遊び道具を与えてもらった。

著者・園田誠さんとのやりとり…

著者の園田誠さんに、購入したときにブログ記事をTwitterでお知らせしたらその日のうちにお返事をいただいた。こんなに面白い遊び道具を与えてくださってありがとうございます!


▼感謝を込めてご紹介

コツコツ努力が報われるメール講座《奏法リノベーション365》

 自分でできる演奏フォーム矯正のヒントをメール講座形式で毎日365日お届けします! 「読んでるだけなのに、なぜか演奏が楽になっちゃった」 「練習が楽しみになった」 というお声が届いてます。やったー!   読んでみませんか? 演奏が見ちがえるメール講座《1日5分の新習慣♪奏法リノベーション》

☆☆

バイオリン奏者のためのお役立ちヒント「弦楽サプリ」YouTube

読んでわからないことも、話を聞いたり、動きを見るだけでわかっちゃうこともありますよね〜 チャンネル登録すると、更新情報をキャッチできます。 いますぐ登録どうぞ♪
↓ ↓

 - ブログ書きの道具箱/Blog便利帳

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  関連記事

【マインドマップ超入門〜おすすめドリル】紙とカラーペンで始めようマインドマップ!~仕事がスムーズになる・趣味が深まる『マインドマップ FOR KIDS 勉強が楽しくなるノート術』

 マインドマップを身につけるには、練習が大事です。どう練習すればいいか。子どもに …

no image
【マインドマップ超入門】テンプレートを埋めるだけ☆マインドマップ日記をはじめてみよう

 マインドマップを続けるために、どうしたら良いかな?とおもって思い浮かんだのが「 …

【TextExpander】便利だと噂のFill-In機能と、省略入力の展開がうまくいってなくて調べてたら哲人セネカに「人生の短かさについて」お説教をいただいてしまった件

テキスト入力支援ツール【TextExpander】を使い始めてはや3日が経ちまし …

大人も使える!ジャポニカ学習帳のA6版「連絡帳」が1日1ページのToDoリストにちょうど良い

 ジャポニカ学習帳のA6版「連絡帳」が、大人でも使いやすいです!なぜなら、子ども …

no image
WP Social Bookmarking Lightでfacebookの「いいね!」ボタンの位置がずれる……は、これでなおった!ありがとー(・∀・)

いますぐなおしたい人はこれを読めばOK!  WP Social Bookmark …

【マインドマップ超入門】初心者向けのペンはこれがいいぞ!!~公認インストラクターおすすめの7つ道具を使ってみた

 マインドマップまだまだ初心者いちろーた(@ichiro_)です。  初心者がマ …

slooProImg_20140610210405.jpg
【450円で始める・ラバーグリップつき3色ペンが気持ちいいっ♪】外資コンサル・東大合格者が書き味で選ぶ《ハイテックCコレト》

 質問があります。 あなたはノートを取るとき、色をいくつ使っていますか? 3色で …

no image
【TextExpander】入れてみた~プロ・ブロガーの道具箱を真似してゆくぞ!

ずーっと気になっていたTextExpanderをインストールしました! Text …

no image
やってみた!~ Chrome が重い~と感じたらすぐチェック! : actyway

登場当時は爆速ブラウザの名をほしいままにしていた「ちょろめ」ことGoogleのC …

no image
WordPressプラグイン【Tweet Old Post】で、件名・タイトルが表示されずに「…」となってしまう件が解決できた!(設定項目の日本語訳あり)

Tweet Old Post とは? 【Tweet Old Post】というのは …