sanitize.css ってのがあるらしいよ

sanitize.css

最近使ってる、nomalize.cssの次みたいだね。

最初はriset.cssしか知らなくて、それで良いとおもってたけど、 nomalizeを知って、うわー便利ってなりました。

モダンブラウザとか、スマホに対応しているらしい。 リセットじゃあ、全部スタイルなくなっちゃうから色々と不便で。 nomalizeよりもユーザビリティとか意識して作られてて、 いいね。

何か分かんなかった時は

Git こちらを参考にするのが一番かと!

まずは使ってみよう。

マークアップエンジニアとして、立ち振る舞いとか

久々になってしまいましたが。。。

 

最近は、マークアップエンジニアとして一サービスに関わってます。
関わってまだ2ヶ月。

最初は右も左も分からず本当に自信もなかったけど、
ある程度コード書いて、なやんでなやんで。
下っ端からリーダー的なポジションを任せてもらって。
まだまだ未熟だけど打ち合わせにでて、ディレクターさん、プロマネさんと意見交換して。開発からもちょっと変更がきたり笑

 

JSが苦手すぎて自分が嫌にもなるけどw

 

リリースまでは本当に悔いのないように精一杯やろ。
頑張ります。

 

IE7はもういりませんw

WAI-ARIA コーディングの際にアクセシビリティーも気をつけたい、気をつけるべき

コーディングWebアクセシビリティ - WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション

コーディングWebアクセシビリティ - WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション

  • 作者: ヘイドン・ピカリング,Heydon Pickering,伊原力也,太田良典,株式会社Bスプラウト
  • 出版社/メーカー: ボーンデジタル
  • 発売日: 2015/03/27
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る

これを読んでる、途中。 途中でも、かなり学びは多かったと思うので箇条書きにしてみようと思います。

  • button要素に関して、まずは基礎の確認。button要素
    基本中の基本だけど、何気になんでもaタグを使いたくなってて。 このやり方が全部間違えではないけど、formのときはbuttonタグだし、value属性とテキストは必須で、これがなきゃ読み上げられないから、ダメなやつなんだって。 そして最近流行りのWEBフォントを使うときはまた別で、aria-labelというのを使うみたい。とか。

見た目だけに惑わされちゃいけません!
てな感じでね。

なーんか、当たり前のことすぎてちょっと中身がない。

そういえば、この本に書かれてるWAI-ARIAってなんなんだよ! っと思って、 waiで検索したらこんなサイトが。

そもそもこのサイトがちょっと見づらいきもしたけれど笑
力を入れてるんだろうなーって思った。

HTMLの備忘録てきな

本日3記事め。 書きたいことはいっぱいあるのに、どうも毎日書けないのはなぜだろう。

やっぱり、HTMLの構造ってすごく大事で。 正直、誰にでも書ける(私も数ヶ月前までは結構適当にかいちゃってたw)けど、 それだからこそ腕の見せ所といいますか。

綺麗に書くとSEOはもちろんいいけどコンポーネント化もしやすいし、修正もしやすいし。 css命名規則同様今、ちょー勉強に励んでいるところです。

そうだなあ、とはいえ大枠をdivでくくって。 まずはcssあてずに構造だけうまいことなってるか見て。 それでもうまくいってたら、cssあてるよね。

ここ、このタグ使う?みたいなのがあってはならん!
そんな時にはHTML5公式ドキュメント

いろんな人のブログとかがあって、かつ、最初ってどれが正しいんだよ!みたいになりがちだから公式なら安心。なんか文句言われても、たちむかえる笑

cssとかも公式だけど、日本語の理解に苦しむ場合があるからそんな時はみんなのブログを有効活用すべきだと思う。

インデントとか気をつけて、可読性アップに努めよう!

親子関係とか、変にdivで囲みすぎないようにとか大事だと思う。 いくらでもdivで囲めちゃう気がするしw

たくさんコード読んで、書いて、やり方体にしみつかせるのみw

つかえる!WEBブラウザエディタ、LiveCodingツール Liveweave

こんばんは。

基本、仕事ではSublime3使ってるけどWindowsだからかたまにバグがあって。 くっそーってなるわけです。 Macやっぱいいなあみたいな。

最近Atomを導入して、ちょっと最初packageの入れ方がGUIで戸惑ったけど、慣ればやりやすい。 のりかえは検討中です。


でで、本題はここからでして、おすすめなのは

Liveweave

Liveweave

2回言ってみたw

  • HTML CSS JS がリアルタイムで更新される
  • 重くない!
  • jsのライブラリがいっぱい入ってる(最近の流行りのは!)
  • デザインもおしゃれ

インデント等々、仕事に使うのはあれかと思うけど、勉強とか、 ささっとなんか作りたいなーって時にはほんといいよ。

こういう系のいくつかあるけど、これがいいかも。 今のところ。

ごぶさたです。

ご無沙汰になってしまった。。。

1ヶ月くらい間あいて、、、サボりぐせがw

SESで出ている某会社についてでもかこうかな。

ここに来て、早1ヶ月くらいになるよ。 社会人になって、初めて稼働200時間越えというものを経験して。 案外すぐなんだなあとw まあ、3月は営業日も多かったしね。

もう落ち着いたので、逆にやる仕事がなさすぎて!!!ってかんじで。

せっかくだから、やっている事でも書こうかな。

マークアップエンジニアとして、参画中です。 環境は立ててくれてるから、自分のPCにはgit Forkしてそれで開発してるよ。

1から画面作ることがほとんどだったけど、もう今はコンポーネントの使い回しが多いかな。 コンポーネントうまく作れば後々いい感じになるということを初めて実感。 あとは初めてSASS(scssのほう)を使って、虜になったよ。 使いこめてはないw

できるようになったこと(一応)としては

  • sassの使い方の基礎
  • Splite画像のいろんな設定(compass)
  • BEM とかSMACSSとかで命名する、命名規則の大事さ
  • HTMLの構造化
  • Handlebarsの使い方
  • JSONの書き方
  • Gitの使い方

くらいかなあ。ざっと書き出してみると。

今回サーバーは別の人が開発だからがっつりフロントって感じで。 いかにサーバー側で使いやすいか意識して組んでみたよ。

調べつつだけど、あと、やっぱり遅いけど、修正もあんまりなく ちょっとは成長したかな。

デザイン通りにやるのは難しいけど、今回は比較的手の込んだデザインの部分も少なかったし、 マークアップ最初の仕事としてはぴったりだった気がする。

次、ちょっと使えそうな技術的なことかこー。 ちなみに、今回はWindowsでの開発だったよ。

GithubPage を作ってみた

GithubPage を作ってみた

まずはGithubのアカウントを作成

github
これは簡単にできるとおもうー手順通りで問題なかった

その次に、みたのがgithubpagesこの手順を踏めば簡単にできるのかなーと思ったんだけど。。。

404notfoundみたいなのが出続ける。。。

個人のサイトと、projectのサイトみたいなのでURLが違うから注意!! ここで間違うといくら接続してもつながんないよー。

メールが飛んできてて、gitから。でも気づかず。

そして、メールアドレスの部分が書いてなくて、詰まった!

アドレスを許可みたいな動きをしないといけないらしい。github email

ここで確認して、再びプロジェクトをプッシュしたら(10分くらいまつ)表示された!

あとは、カスタマイズしまーす!

おしまい