現役WEBコーダーのコーディングテクニックをまとめていますので参考にしてみてください。ドリームウィバー(Dreamweaver).dwtを更新したらCSSがリンク切れになった時コメントをどうぞホームページ制作の効率化のためにサイドバーやヘッダー、フッターをテンプレート化することがあります。更新すると全部のページに反映されるはずですが、されないときの対処法は以下です。「ファイル名.dwt」その他「ファイル名.html」cssを修正。ここで「ファイル名.dwt」を保存すると、ファイル名.htmlが更新される。完成したら、この時点でファイルサーバーに保管する。テンプレートを更新して、htmlを全部書き換えるのには成功したら、画像やcssがリンク切れを起こした!ときの対処法です。?やり直しになるので、サーバーからローカルにデータをコピーしなおして始めます。→テンプレート.dwtを作業します。ここで、一気に反映させない。保存した瞬間このテンプレートを使うローカルサイト内部の全ドキュメントを更新しますか?とウィンドウがでるので「いいえ」にしておく。→そのあと個別にhtmlを開いて、一個一個テンプレートを更新して、反映させる。これならうまくいきます。Bw46MtQGL5LeDreamweaver-パネルでcssを作成しよう!-カテゴリ「ボックス」コメントをどうぞ「Dreamweaver-パネルでcssを作成しよう」第4回目はカテゴリ「ボックス」プロパティを見直していきます。(前回のカテゴリ「ブロック」はこちら)width横幅を指定します。height高さを指定します。Float配置を指定します。left左寄せの指定をします。その後に続く要素に関しては、左寄せに指定した要素の右に回り込みをするよう指定します。right右寄せの指定をします。その後に続く要素に関しては、右寄せに指定した要素の左に回り込みをするよう指定します。none特に何も指定しません。clear回り込みの解除を行います。left左寄せされた要素の回り込み解除を指定します。right右寄せされた要素の回り込み解除を指定します。both右又は左寄せされた全ての要素の回り込み解除を指定します。none回り込み解除はしません。padding余白の指定をします。marginはある領域とある領域の間の余白であるのに対し、paddingはひとつの領域の中での余白です。top上の余白を指定しますright右の余白を指定しますbottom下の余白を指定しますleft左の余白を指定しますmargin余白の指定をします。paddingはひとつの領域内での余白であるのに対し、marginはある領域とある領域の間の余白です。top上の余白を指定しますright右の余白を指定しますbottom下の余白を指定しますleft左の余白を指定しますmarginやpaddingはショートハンドプロパティを使用することで表示を簡潔に整理することができます。(上下は0、左右はauto)指定をします。webサイト全体が画面の左寄せで表示されているサイトが今でもよくみられますが最近では画面センターで表示されるよう設定するのが通常です。Bw46MtQGL5LeDreamweaverでテンプレートが更新されないとき1件のフィードバックこんばんは!Dreamweaverでとても便利な機能「テンプレート」にて更新されないときの解決方法をご紹介いたします。1、これは使用しているDreamweaverのバージョンが古いときに試してみてください。進んで行き、下から二番目にある「テンプレート」をクリック。そこに「ドキュメントの相対パスを上書きしない」にチェックが入っていたら、外す。2、これは初歩的ですが、「テンプレートタグがきちんと閉じているか」を確認してみる。3、テンプレートの元データである「dwtファイル」がTemplatesフォルダから移動していないか。4、テンプレートのパスが間違えている可能性がある。更新できるか試してみる。リンク切れが無いかを置換機能を使用して、探す。最後の可能性としては、一度テンプレート内の何かを変更したくて、サーバーからテンプレートファイルをダウンロードしてしまうと、リンクが切れてしまうことがあります。テンプレート内を修正したいときは保存してあるローカルのテンプレートファイルを修正し、サーバーへアップというのがリンク切れが起こらない方法となります。それでもだめなら、最終手段でテンプレートページを作成して、今までのをすべてコピーして、貼り付けをしてみるということになります。テンプレートはとっても便利ですが、何か不具合があって壊れてしまうと一気にやらなけらばいけないことが増えてしまうので、扱いには気を付けたいですね。Bw46MtQGL5LeDreamweaver-パネルでcssを作成しよう!-カテゴリ「ブロック」コメントをどうぞ「Dreamweaver-パネルでcssを作成しよう」第3回目はカテゴリ「ブロック」プロパティを見直していきます。(前回のカテゴリ「背景」はこちら)word-spacing単語と単語の間の間隔を指定します。(値で数値を指定)letter-spacing「word-spacing」が単語間の間隔なのに対し、「letter-spacing」は文字と文字の間隔を指定します。vertical-align親要素に対して、縦方向の位置を指定する際に使用。こちらはインライン要素とテーブルのセルにのみ適用でき、ブロック要素には適用できません。top上揃えmiddle中央揃えbottom下揃えtext-topテキストの上揃え(テーブルでは無効)text-bottomテキストの下揃え(テーブルでは無効)super親要素の上付き文字の位置に表示(テーブルでは無効)sub親要素の下付き文字の位置に表示(テーブルでは無効)text-alignテキストの配置位置を指定。left左寄せright右寄せcenter中央揃えjustify均等割付。「text-justify」との併用が必要。text-indent最初の段落、一行目のインデント(字下げ)幅を指定する際に使用。white-spaceテキストを自動で改行、空白についての指定します。normal自動改行pre自動改行せず、空白・タブ・改行はそのまま表示。nowrap自動改行せず、複数の空白・タブ・改行をひとつの空白に置換して表示。displaynone表示されませんinlineインライン要素として表示blockブロック要素として表示inline-blockインライン要素のように前後に改行はなしですが、横幅縦幅の指定は可能list-itemリストとして表示run-in前後の状況により、インラインまたはブロック要素になります。compact前後の状況により、インラインまたはブロック要素になります。tableテーブル要素になります。inline-tableインラインテーブルになります。table-row-groupテーブルのtbody要素になります。table-header-groupテーブルのthead要素になります。table-footer-groupテーブルのtfoot要素になります。table-rowテーブルのtr要素になります。table-column-groupテーブルのcolgroup要素になります。table-columnテーブルのcol要素になります。table-cellテーブルのth要素、td要素になります。table-captionテーブルのth要素、caption要素になります。Bw46MtQGL5LeDreamweaver-パネルでcssを作成しよう!-カテゴリ「タイプ」コメントをどうぞ以前の職場ではドリームウィーバーがはいっておらず、ずっとテキストエディターでコーディングをしていたドリームウィーバー初心者コーダーです。当時、テキストエディターに慣れはじめていた私は「タグの意味もCSSの意味も覚えられるし、手入力でよかったかも~ドリームウィーバーなんていらなわ~」と思っていました。ここしばらくはコーディングそのものから遠ざかっていたため、相変わらずめったにドリームウィーバーは使用していなかったのですが、この数ヶ月コーディングに携わる機会があり、ドリームウィーバーを見直していたところ、それまでの考え方が180度間違っていたことに気がつきました。「ごめんなさい、ドリームウィーバーさん、あなたはスバラシイです...」そんなわけで、ドリームウィーバーの機能を初心者目線で改めて見直していきたいと思います。今回は、これまで全くもって無視し続けてきたパネルです。パネルを使用しての新規CSS入力機能を使用することで、劇的に効率を上げていくことができます。みると、「このプロパティってどういう意味?使ったことないけど...」なんてものがちらほら。そこで、今回はカテゴリ「タイプ」に表示されるプロパティの意味を見直していきます。ちなみにパネルを使用してのCSS入力は、以下の図の赤いまる枠「新規CSSのルール」をクリックするとダイアログボックスが表示され、クラスなどの名称を入力して進めます。?カテゴリのタイプに記載されているプロパティfont-familyフォントの種類を指定する際に使用。)で区切って複数の種類を並べることが可能です。ダブルクオーテーションで囲むことも忘れずに!font-sizepxやemなどの単位をつけて文字サイズを指定。font-styleフォントのスタイルを指定する際に使用。「normal」標準の表示形式。「italic」イタリック体。「oblique」斜体。日本語フォントの場合、イタリック体と斜体の表示はほとんど同じ表示のようです。line-height行の高さを指定する際に使用。line-heightが30pxでfont-sizeが12pxの場合、30px(line-height)から12px(font-size)を引いた、残り18pxが行間として上下に9pxずつ割りあてられるというわけです。font-weightフォントの太さを指定する際に使用。「normal」標準の表示形式。「bold」太字にする。「lighter」一段階細くする。「bolder」一段階太くする。font-variant「normal」標準の表示形式。「small-caps」英字の小文字の表示形式を、小文字サイズのまま、表示形式は大文字とする際に使用。text-transform「none」標準の表示形式。「capitalize」単語の先頭文字を大文字で表示。「lowercase」全てを小文字で表示。「uppercase」全てを大文字で表示。text-decoration「underline」下線付テキスト。「overline」上線付テキスト。「line-through」打ち消し線テキスト。「blink」テキストが点滅しますが、サポートしていないブラウザが多いようです。「none」標準の表示形式。Colorテキストの色を指定。使用頻度が低いものもありますが、一通りの意味は押さえておきたいですね。次回は背景プロパティーについて記載していきます~。Bw46MtQGL5Le「FullCalendar.js」を使用して、Googleカレンダーをもっと美しく-1コメントをどうぞプログラムは私の分野ではない...とずっと避け続けてきた新米コーダーです。プログラムはできなくてもいい...と思いながらも日々業務で対面せざるを得ない「JavaScript」。1から覚えるのは大変だけれどライブラリーを使って試すくらいならできないことではない、ということで、今回は「FullCalendar.js」を使ってGoogleカレンダーをカスタマイズしてみました。Google」なのでデザイン的にはなんともお粗末...なんて思ったことはありませんか?そんなときスバラシイ仕事をしてくれるのが「FullCalendar.js」。Google」デザインとはオサラバ~~~。「JavaScript」わかりません...というあなたでも、きっと簡単に導入できますよ!それでは作成方法を記載していきましょう。その1:「FullCalendar.js」を入手まず、「FullCalendar.js」を公式サイトからダウンロードして、解凍したら自分のサーバーへアップしましょう。今回はGoogleカレンダーのデザインを「FullCalendar.js」のデフォルトデザインに変更します。以下のような内容をhtmlファイルに書き込みましょう。jsファイルやCSSファイルのパスはアップしたディレクトリによって違います。今回は自作の(以下に記載した)htmlファイルをルートに、同階層に「fullcalendar」ディレクトリと「jquery」(ダウンロードしたファイル)をアップロードした場合の例になります。href...」のところのパスの書き方を変更してくださいね。‘ここにあなたのGoogleカレンダーから入手したURLを貼り付けます。id=’calendar’></div></body></html>以上の記載が終わったら、GoogleカレンダーのURLを入手します。このURLは単純なURLではなく、カレンダーの設定から入手できるものです。入手方法は以下の通り。Googleアカウントにログイン後、カレンダーを開きます。(↓の画像参照)カレンダータブをクリックし、自分のアカウントをクリックします。入手したURLは、さきに紹介したhtmlファイルの「ここにあなたのGoogleカレンダーから入手したURLを貼り付けます。」の欄に貼り付けます。以上で終了!また、今回はわかりやすくstyleをhtmlファイルに記載しましたが、もちろんCSSに記載すればhtmlファイルはもっとスマートになりますね。Bw46MtQGL5Leフロートの解除コメントをどうぞまったくもってやっかいなフロート。解除がうまくいかないとレイアウト崩れの原因になってしまいますね。そんなやっかいなフロートに立ち向かうための王道の解除方法をご紹介いたします。clear:both;といった手法での解除ができません。hidden;のスタイルを設定します。厳密にはフロートの解除ではありませんが、レイアウトの崩れなどの不具合を解除することが可能です。Bw46MtQGL5Lejavascript無しでタブ切り替えするコメントをどうぞこんな切り替えをhtmlだけの記述で作ります。リンクさせるだけのhtml入門者向けです。スペシャルエステコース用まずmenu.htmlを作成します。タブの部分はリストで記述します。3つにスライスしておいたタブの画像は背景画像として指定します。href=”special.html”>スペシャルエステコース</a></li></ul>ではulの続きです。内部にfacialの概要テキストを記述します。css背景グラデもここにかかっています。-body.htmlとして次のファイルを作ります。menu.htmlのソースをコピーペーストして開始です。ulタブのcrrentがボディに変わった状態を別途コーディングします。-special.htmlとして最後のファイルを作ります。同様にulタブのcrrentがスペシャルエステコースに変わった状態を別途コーディングします。href=”special.html”>スペシャルエステコース</a></li></ul>前のページと同様にcoursebox1にスペシャルエステコース概要coursebox2にスペシャルエステコース内容を書きます。Bw46MtQGL5LeWEBコーディングのスピードをあげるには?コメントをどうぞコーディングというと、どうしてもHTMLをおぼえなければいけない、CSSを覚えなければいけない・・・と思って勉強が遅くなってませんか?まだこれから勉強している人がこの記事をみているようなら、その考えを改めないと大変危険です。いますぐ改めることをおすすめします。理由としてはそれはただのお勉強であり、自己満足になってしまうからです。ホームページ制作会社のプロのコーダーは必要最低限の知識しかタグを覚えていません。それはアドビのHTMLコーディングソフト、ドリームウィバーが自動で生成してくれるからです。このソフトを徹底的に熟知すると、どんなに手打ちで早いプログラマーよりも早くできいますよ。いいですか・・・現場はいかに早く納品するかが勝負なのです。HTML覚えたからって銭にはなりませんよ。いっても、なかなかそこから抜け出せない方がいますが、それは現場にでて、勤務外に覚えることをおススメします。ドリームウィバーのショートカット、機能を駆使すればプロのコーダーに必ずなれます。コーディングのスピードがあがれば、当然単価もあがります。スピードが勝負なので単価もあげやすいんです。我々、現役のWeb屋がどんどんメモがわりに書いていきますね。今後とも宜しくお願いします。