CSSに関するネタを中心に色々書いてます。
ブログを書けって大先生に怒られたので、仕事も落ち着いてきたんで以前から書きたかった事でも。
今更なネタなんですけど、「Sassの教科書で一番読んで欲しいところ。はこちら」みたいな感じで、「こちら」にだけリンクになってるケースがいまだに結構多くて、色々な面でよろしくないので、そろそろやめません？と。
普段から使っていると、「こちら」以外の文言がパッと浮かばない場合なんかも有りますし、コーダー的には下手に文言を変更して色々言われるのが面倒的な理由も有るので、その場合は、こちらも含めてリンクにするのがよろしいかと。
例えば、
って感じですね。
んでは、「何で、こちらにだけリンクするのは良くないの？」的な部分を色んな視点から書きたいと思います。
珍しく、Photoshopネタでも。
コーディング関係だからこのブログの主題っぽい！
今回は、PhotoshopCS6を利用したスライスに関するアレコレです。
コーディング時にはスライスは必須ですし、一番面倒な部分なので少しでも効率良くスライス出来ると良い感じですよね。
内容としては、スライスの基本からって訳じゃないので、最低限スライスツールが使えてる方を対象にしたような感じになってると思います。たぶん。
ちなみに、面倒な説明しなくていいから分かりやすい様に動画ベースでやっていきます！
このブログの主題が何なのか忘れかけているhirasawaです。どうも。
して今回は、フリーランスになった際に、ボクみたいになーなーでスタートした人や、色々調べたりしないでとにかくやってみよう！でスタートした人なんかは、後から色々知ることが多く、もっと早くに知ってたら良かったかもね！って事を書いてみようかなと。
フリーランスになる人って、制作上がりが多いから、お金周りの事が弱いと思うので、内容としては主にお金周りの事でも触れていくです。
ボクも法律に特別詳しいとかじゃないので、間違ってる部分有ればご指摘頂けると助かります。
ブログの主題と全然関係ないけど、ウェブ制作な人とかイラスト描いてご飯食べてるフリーランスの人には意味の有る内容なのかなーと思ったので簡単にでも書いておくです。
ちなみに、現状で年間20万以上払ってる人が安くなる内容です。
20万って言うと、所得ベースで年間200万ちょい稼いでれば超えてしまう額だと思われますが、住んでいる地域によっても差が大きいので、その辺りはちゃんと調べた方が良いかなーと。
Web屋の私がブックマークしているサイト65 | Webクリエイターボックス の、CSSんところにちゃっかり、CSS HappyLife ZERO が載ってて嬉しい＞＜
さて、今回はフォームです。
お問合わせフォームとか資料請求フォームとか、ウェブサイトには結構な確率で何らかのフォームが有るかと思います。
このフォームの使い勝手の良し悪しが、とても重要なのは言うまでも有りません。
でもまぁ、ビミョーなフォームが多いですよね。
本気でやり出すと、サーバーサイドに手を加えたりして云々だと大変なので、コストがかかるとかで出来ない場合も有るかも知れません。
しかし、フロントエンドで出来ることも有るので、フォームを実装する際に何事もなかったかのように極々自然と使い勝手が良くなる（だろう）機能を盛り込んだらステキですよね。きっと。
しれっとコーダーが、フォームに今回紹介する機能を実装しておけば「おー！イイね！」と言ってもらって評価が上がっちゃうかも知れません！
データのバックアップはフリーランスの場合、何かしら必ず行っていると思いますが、皆さまはどうやってバックアップを取っておられますか。
ちょうど、低コストで簡単にできるフリーランスの Web 屋の人に知ってもらいたいデータバックアップ方法いろいろ | ウェブルを読んだ時に自分のバックアップ方法でも書こうかなと思い早2ヶ月・・・。
こちらの記事は、TimeMachine を使ったバックアップとか、Windowsユーザーが読んだらちょっと(´・ω・`)な感じなので、Windowsユーザー向けと言うことで。
ボクも、見事にデータが吹っ飛んだ経験が有ります。
原因はSSDの破損で、復旧は不可能な状態でした。
勿論、仕事用のデータは最低限バックアップしていたので、最悪の事態には陥っていませんが、データの復旧や環境の再構築に時間が取られてしまい、かなり痛い思いをしました。
バックアップする以上は、外付けハードディスクとかNASとか、PC本体とは別で何かしら用意するのは最低限ですが、問題はそのバックアップをどうやって行うか。
データが吹っ飛ぶ前までは、Windows標準のバックアップでやっていたんですが、設定の方法とかイマイチ分かりにくかったり、処理が重かったりと微妙でした。
正直、作業中はバックアップが作動して欲しくない感じだったりしたので、バックアップのスケジュールを遅らせたり、作業中とスケジュールが被った場合一旦止めたりしてたので、データに数日分のズレが生じたりしてました。
大丈夫だろうと安心して、バックアップに対してあまり慎重になってなかったんですよね。
世の中、油断してる時に限ってって感じで、実際にデータが吹っ飛んでしまい、それからちゃんとバックアップを取るようにしました。
あ、ここから本題？
8月は働くよー！お盆休みってなぁに？おいしーの？
ボーナスってなぁに？それっておいしーの？
さて、Webサイトを作成するときに、ルートパス（絶対パスとまとめられる事もありますが）で記載されてたり、SSIによるインクルードをしてたり、デフォルトインデックスのファイル名（index.htmlとか）を省略してたりすると、そのままローカルで確認するには不便があったり、場合によってはそもそも確認できない訳です。
そういう場合に、じゃあどうやって確認するか。となる訳ですが、毎回テストサーバとかにアップロードして確認していたら効率が悪いので、自分のPC（Windowsとして）で確認できたら嬉しいですよね！
じゃあ、どうしたら良いかって言うと、やっぱりWebサーバをローカルで構築するのが一番良いのかなと。
そうすると、自分のPCでちゃんと見れちゃう訳です。ンマーなんて素敵！
で、Webサーバって聞くと、サーバ関係の知識が無い場合はよく分かんないですよね？
ボクの脳内で生成された、「最近ウェブサイト制作を始めたT子ちゃん（誰」的な印象はこんな感じです。
確かに、何もせずに構築は出来ないですし、何も知らずに構築も出来ないので、多少の手間と多少の知識は必要ですが、最低限確認できるようにするだけならとっても簡単に出来ます。
「5分で出来るWebサーバ構築！」みたいなノリで出来ると思います。
そもそもローカルで見れるようにってのは、サイトの性質によっては確かにそれでもOKかなと。
ランディングページみたいな、1ページで完結するサイトとかならむしろその方が良いと思いますが、ここではある程度ページ数があるサイトの場合で考えてもらえると嬉しいなーと。
時々、ローカルで確認するのはどうしてますか？ と聞かれる事が有るんですよね。
という訳で、別段目新しい内容では有りませんが、結構前から書いておきたいと思ってたのも有り、いい加減書きますと言う感じで。
CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。
制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したりとか、このデザインはどういう意図なんだろう？ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは毎回違っていたり、当然ディレクションをする人も違うので最初に確認しておきたい事が有ったりします。
って事で、その辺りをまとめてみたり、デザインを渡されたときにこのデザインの意図は？って思う事とかもばーっと書いてみます。はい。
なので、デザイナーさんもコーダーにデザインを渡すときに気をつけて欲しい点とかもわかってしまうすばらしい内容（だと良いな）！
現在、フリーランスとしてやってるんですが、そっちの屋号が「underHat」に変わったので、もしリンクとかしてくれてる方が居ましたら変更してもらえると幸いです。
さて、今回はブログ記事のダミーエントリーとかに使えそうな、マークアップ済みダミーテキストです。
何気に今まで使ってたのが有ったんですが、メインPC逝ったりしてる内にどっかに消えてしまったので作り直したのを忘れないようにブログにアップです。
一応それなりに出てきそうな要素を使ってマークアップしております。
h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, a, q, blockquote, table, td, th, pre 辺りです。
ダミーテキストだけならジェネレータとか何か色んなサービス有るんですけど、イマイチ自由に使っていいのか分んなかったりしますし、結局テキストだけじゃダメなんで、マークアップする必要があってその作業が何気に時間掛かるんですよね。
なのでまぁ、差し支えない感じの適当なテキストが入っててマークアップもされていると楽だったりすると思うので作ってみました。はい。
基本的にはclassとかidを振っていないのでとてもプレーンな感じになってます。（imgにだけちょとクラス振ってますが）
使用条件とかは特に無いのでお好きに使ってください。
html5 関係無いのも有るかもですが、個人的にhtml5の要点をまとめたメモ。
ほんとにざっくり書いているので、何か期待しても何も出ません＞＜