サイトのタイトル部分などを変えるときの
一括置換方法！
①書き換えたい文字をコピーする
②【CTRL+F】で置換入力画面を出す
③さきほどコピーした文字と、書き換える言葉を
それぞれ置換前、置換後に入力する
④範囲を「サイト内の選択した範囲」にして
右のフォルダリストから該当するフォルダを選ぶ
※このとき一番上部のフォルダにすると、下層ページを一度に
すべて置換ができる
あとは置換ボタンを押せば一発変換。
インクルードしていないけど、全ページ変えないと
いけない、というときに便利。
PCデータをレスポンシブデザインで表示すると
端末の機能でどうしても画像が小さくなる。
コツは、縦幅60pxくらいを目安に文字・デザインを拡大すること。
それにあわせてPC用でデザインしていたものを
デザインし直しが必要。
ここで注意なのが、必ず画像はシンボル化しておくこと。
スマホサイトにする場合、拡大することもあるので
画像を取り扱うときには気を付けよう。
現在かかわっている案件で、今後に覚えておきたいcss。
▼場所を特定するとき
ひとつめのコンテンツ【○○：first-of-type】
ふたつめ以降のコンテンツ【○○：nth-dhild(○○)】
あいだのコンテンツを消したいとき【display：none】
既存のHTMLやCSSをするときに、常に検証しながらやると
場所の特定がきちんとできるので見ること。
すこしずつできることが増えてきて、成長が実感できるようにしたい。
webのコーディングをしているときに、何かとブックマークしておくと便利なサイト。
原色辞典
http://www.colordic.org/
見本とコードが一度に確認できるため、デザインの時点では
指定のなかった色を足したりするときになにかと便利なもの。
icooon-mono
http://icooon-mono.com/
フリーアイコンがたくさんあるサイト。
ほかにもシルエットやフレーム、パターン背景など
いろいろなものもＤＬできるので覚えておくといい。
コーディング中に調べものをするときに
何度も使用しそうな場所はブックマーク必須。
調べなおす手間を省いて効率のいい仕事をしよう。
例えば、ヘッダーとCSSをまとめてインクールド(入れ込み)する場合
入れたい位置へ下記のようにPHPファイルを差し込んでいく。
【HTMLファイル】
＜?php $Path = “../”; include(dirname(__FILE__).’/../inc/header.php’); ?＞
フォルダ名は「inc」が一般的で、その中にphpファイルを作成、保存し
表示させたい場所に上記のタグでを差し込む。
見本の場合、ヘッダーを読み込むようにしている。
このようにすると、ヘッダー部分に変更があったとき
phpファイルを変更するだけですべてのページが変わる。
ただし、テスト用サーバなどにUPしないと起動しないので
オフラインテストの場合には注意が必要。
新しい単語を聞いた。
「インクルード」というものが何なのかわからず調べてみると
”ソースの先頭などで、別のソースファイルなどを読み込んで
一つにまとめてくれる言語処理系の機能のことを指す。”
ということがわかった。
他ページでおなじデザイン部分があるとき、それを用いれば
容易にデザインができるというものだ。
ヘッダ部分に変更がある場合など、一括で処理できるので重宝される。
マスターするべく積極的に使っていこうと思う。
ボタンなどを作成するとき「スタイル」というウィンドウをひらくと
様々なグラデーションなどのパターンデータがある。
パターンでイメージを固め、色味を調節するのが
デザインをするうえで時間短縮につながる。
気に入ったパターンを登録することもできるので
納得のいく色味ができたときには保存をしておくといい。
ひとになにかを頼むとき、に続いて頼んだ人との連携についての思ったこと。
まず、共有する可能性のあるデータはわかりやすくタイトルをそろえる。
だれが見てもわかるフォルダ構成にする。
まずさいしょの構築でそれを考えていると、あとから急に引き継がなければいけない
そんなときでもスムーズに説明ができる。
コーディングをしているときなど、資料フォルダが散らかることが多いけど
そこさえきっちりしていれば自分でも見やすいものになる。
資料とデザインに共通の番号をふるとかっていうのは有効な手段かもしれない。
ひとに何かを伝えるとき、口頭で伝える・文書で伝えるなどいろいろな方法がある。
今回行った作業はエクセルにて説明書を作成する、というもの。
文章だけではわかづらい部分をスクリーンショットで画像にしたり
だいじな部分は赤文字や太字にすることで
よりわかりやすいものができたと思う。
文字以外にも伝える手段がたくさんあるので、それらを駆使して
よりひとに伝えやすいかたちにすることが大切だと改めておもう。
のちにコーディングがしやすいように
あらかじめデザインの時点で空白などの幅は揃えるなどしておく。
コーディングの際にこの幅は…などと迷うことがない。
ビジュアルやバナーを作成するときにもそれを考慮したうえで
デザインしていくと、コーディングの担当が違うときにも
指示がしやすく組みやすいものになる。
デザインがシンプルであればあるほどこのやり方が活きてくるので
心がけているといい。