CCで楽にウェブサイトができる!BPDスタッフのたけしたてつおです。CC」でWebサイトを構築していきます。CCは、アドビ社が提供しているWebサイト構築のソフトウェアです。楽にHTML/CSS等のコーディングができるそうです。今回は前回崩れたウェブサイト全体を調整します。ウェブサイト全体を調整します。class=”utility<内のリストにハイパーリンクを設定する。50px;」を追加し、フォントのスタイルを修正する。3.サイドバーの余白などを調整するして見栄えをよくする。class=”sidelist<でマークアップする。それに伴ってCSSも「.sidelist_first」を「#sidelist_first」に修正する。スニペットを追加する。id=”sidelist_first<を選択し、スニペットタブから「マイスニペット」をダブルクリックして「新規スニペット」のスニペットを追加するボタンをクリックする。「スニペットの種類」をブロックの挿入にチェックしてOKメニューを追加する。挿入するヵ所の</div<の後にカーソルを置き、追加する「スニペット」をダブルクリックすると同じ物が挿入される。4.メインコンテンツの文字の大きさと余白を調整して見栄えをよくする。5.フッターの余白などを調整するして見栄えをよくする。ソースコードでコピーライトをでマークアップする。フッターのメニューを増やすためにスニペットを追加して複製する。フッターメニューのリンクのデザインを設定する。「プロパティ」にアンダーラインを選択したいが、無いので取り敢えず「background-color」を選択して「トランジションを制作」をクリックする。a:hover」を以下のように修正する。2em;」を設定する。その他の修正コンテンツの上に「div」を追加してサイトの要約をいれる。フッターの背景色をロゴに合わせて変更。修正が終わったらライブビューで全体を確認してみる。CCで楽にウェブサイトができる!」は今回で一旦終了します。CCの感想ソースコードをいちいち入力しなくていいので楽にWebサイト構築できるのがいい。CCに慣れていないと入力した方が早いって思うので、これから慣れていこうと思う。)ライブビューとソースコード、CSSが一度に確認出来るので作業の効率がいい。CCなら楽にWebサイトの構築ができると思います。(参考書が一冊あれば)まだまだ奥が深そうなので、暇があればちょくちょく触っていきます。お付き合いありがとうございました。CCで楽にウェブサイトができる!BPDスタッフのたけしたてつおです。CC」でWebサイトを構築していきます。CCは、アドビ社が提供しているWebサイト構築のソフトウェアです。楽にHTML/CSS等のコーディングができるそうです。今回はヘッダーとフッターを調整します。ヘッダーを調整します。class=”utility<を調整して、サイドバー同様にリスト項目に画像を表示させます。inline-block;」を設定してますので、リストマークが表示されていませんので、背面に画像を表示させます。いうことで、CSSを以下のように修正します。10px;}2.ヘッダーのタイトルロゴを調整します。ヘッダーの上が少し窮屈なので空きを作るために高さを調整します。120px;」を追加します。次にヘッダーのタイトルロゴをヘッダーの一番下に配置させます。「セレクター」に「#site-id」を追加し、「プロパティ」で以下を追加します。0px;}これで、ヘッダーロゴの上に少し空きができました。フッターを調整します。フッター全体の背景に色をつけます。CSSのフッターを以下のように修正します。class=”clearfix<」に変更(class=”clearfixを追加)します。ウェブページ全体を調整する。ウェブページ全体の表示フォントを変更する。sans-serif;」を追加する。※「プロパティ」の「font-family」に色々なフォントセットが用意されていますので、好きなフォントセットを選択する。フォントセットを変更するだけで見栄えが全然ちがいます。グローバルナビを設置する。class=”clearfix<を追加します。CSSで以下を追加します。id=”global_nav<を追加します。グローバルナビに設置する項目を入力します。id=”global_nav<を選択し、「メニュー」→「フォーマット」→「リスト」に設定して<ul<と<li<でマークアップします。3.リストを横並びに変更します。以下のように設定します。block;」を追加します。block;」を追加してブロック要素として表示させます。各要素(箱)の余白を調整する。各要素(箱)の周りに余白があるので、削除します。「body,div,ul,li,p,ah1,h2,h3,h4,h5,h6」を追加して以下のように設定します。0;}※body,div,ul,li,p,ah1,h2,h3,h4,h5,h6は今後要素が増えるごとに追加していきます。余白を削除したことでレイアウトが崩れてしまいましたので、次回調整します。CCで楽にウェブサイトができる」第6回目でした。更新は遅いですが地道に更新していく予定です。CCで楽にウェブサイトができる!BPDスタッフのたけしたてつおです。CC」でWebサイトを構築していきます。CCは、アドビ社が提供しているWebサイト構築のソフトウェアです。楽にHTML/CSS等のコーディングができるそうです。今回はサイドバーとフッターを表示させます。サイドバーにメニューを表示します。id=”sidebar>内に必要なテキストを入力します。id=”sidebar>内にCONTENTSと入力して「フォーマット」で見出し3に設定し<h3>でマークアップします。改行して、無料イラストダウンロードと入力して<h4>でマークアップします。改行して、リンクするテキスト部分を入力して、「フォーマット」→「リスト」で<ul>と<li>でマークアップし、リスト形式で表示させます。リスト項目をダブルクリックしてハイパーリンクを設定します。フッターにコピーライトを表示します。id=”copyright>を挿入します。reserved.を入力する。2.コピーライトをセンターに配置します。center;」を追加する。3.フッターにもリストを表示します。id=”footer_list01>を挿入し、サイドバーと同じリストを挿入(コピー&ペースト)する。サイト全体をセンター配置にします。現状ではサイト全体が左に寄っていて、センター配置になっていません。いうことで、サイト全体をセンター配置にするために少し修正します。「#wrap」の幅を「100%」に修正します。960px;」を設定します。これで、ウェブサイト全体がセンター配置になります。auto;」を設定します。サイト全体の見栄えを調整します。1.各要素(箱)の罫線を削除して全体の表示を確認します。各要素(箱)の罫線を削除して全体の表示を確認するために、CSSで各要素のセレクターを選択し、「border」を削除します。2.サイトの説明文(description)の位置を修正します。relative;」を追加します。CSSでセレクター「#description」を追加し、「プロパティ」で以下を追加します。13px;3.ウェブサイト上下左右の余白を削除します。現状ではウェブサイト上下左右に余白がありますので、これを削除します。「セレクター」に「body」を追加し、「プロパティ」で以下を追加します。0;4.CSSを整理します。CSSがぐちゃぐちゃなのでここで一旦整理します。※リアルでもモニターの中でも整理整頓は大事ですよ!5.サイドバーのリストを画像に変更します。現状では標準の●になっているリストマーク(リストの先頭にあるやつ)を画像に変更します。「セレクター」で「.sidelist_first」を追加する。url(../images/listmark-01.png);」を追加する。2em;」も追加する。6.メインコンテンツの余白を調整します。メインコンテンツの余白が狭いので少し調整します。※レイアウト崩れ防止のためにすこし少なめに設定します。(計算では「15px」でピッタリなのですが「14px」にしておく。)今回はここまでです。CCで楽にウェブサイトができる」第5回目でした。更新は遅いですが地道に更新していく予定です。CCで楽にウェブサイトができる!BPDスタッフのたけしたてつおです。CC」でWebサイトを構築していきます。CCは、アドビ社が提供しているWebサイト構築のソフトウェアです。楽にHTML/CSS等のコーディングができるそうです。今回はメインのコンテンツ部分を3段組みで表示します。id=”top_content01′′>を挿入する。id=”top_content01′′>を挿入する。id=”top_content01′′>の中に画像を挿入する。Image」で画像を挿入し、alt=””代替テキストを入力する。画像を選択し「フォーマット」→「段落フォーマット」→「見出し2」で<h2>でマークアップする。改行して〜内にリンクテキストと関連する文章を入力する。3.箱(要素)の幅を「210px」に変更する。「プロパティ」で「width」を「210px」に設定する。CSSで見栄えを調整する。)やリンク先などを設定する。サイズや色は「プロパティ」で設定する。<strong>タグは強調したい(太字にしたい)キーワードがあるときに使います。使いすぎると検索エンジンにスパムとして判断されることがあるので注意です。スニペットを追加してパーツ(箱(要素))を複製する。1.「新規スニペットフォルダー」を追加する。「スニペット」で「新規スニペットフォルダー」ボタンをクリックして「新規スニペットフォルダー」を追加する。2.「新規スニペット」を追加する。追加したスニペットフォルダーをダブルクリックして「新規スニペット」でスニペットを追加するボタンをクリックする。「スニペットの種類」をブロックの挿入にチェックしてOK3.箱(要素)を追加する。挿入するヵ所の</div>の後にカーソルを置き、追加する「スニペット」をダブルクリックする。id=”top_content01′′>のidを02と03に変更する。4.箱(要素)を横並びに設定する。left;」を設定して横並びにする。10px;」を設定して空きを調整する。5.追加した箱(要素)の内容を変更する。複製した箱(要素)の画像とテキストを変更する。他の箱(要素)も追加する。CCで楽にウェブサイトができる」第4回目でした。更新は遅いですが地道に更新していく予定です。