2012-05-01から1ヶ月間の記事一覧
Wants Cake 長い記事になったので目次を付けてみました。 目次 リンクをクリックすると記事内の指定箇所に移動できます。 HTML index.html products.html item.html order.html shop.html CSS base.css style.css index.html ↓画像をクリックすると作成した…
記述実践 以下の指示通りに表示するよう記述しなさい。 DTD・セレクタ名・背景色は、自由選択 ナビゲーションは、擬似クラスを設定すること 各ブロック同士の空きは、「0」 可変しないものとする 引用：確認テスト（2） - 求職者支援訓練（基金訓練）Webデザ…
確認テスト（1） - 求職者支援訓練（基金訓練）Webデザインの勉強｜講師日和 ↑挑戦してみました。 Webページについて 以下の問に答えなさい。 見出しや段落であることを表すための[HTML]を記述します レイアウトなどの見た目は[CSS]で記述します Webサーバー…
Twitterのタイムライン上にある特定のツイートを表示させないような方法がないか気になったので検索したところ、 Google Chromeの拡張機能『Open Tweet Filter』を使えばいいことが分かりました。 実際に拡張機能を追加してみましたのでその手順を残しておき…
iPad用コードエディタアプリ【Diet Coda】を購入してみたのでその使い方を解説してみたいと思います。 Diet Coda カテゴリ: 仕事効率化 サイズ: 18.5 MB 価格：￥1,700 サイト/サーバーの設定 ↑「＋」ボタンをタップします。↑サイト/サーバー設定をします。…
横ナビゲーションを復習してみました。 「nav1」display:inlineを利用した横ナビ。hover時の文字色を指定。 「nav2」float:leftを利用した横ナビ。hover時の背景色を指定。 「nav3」float:leftを利用した横ナビ。hover時の背景色を指定。 「nav4」float:left…
Webのプロを目指すべく効率の面も考えてPhotoShopなどAdobe系ソフトの購入を検討してみました。※以下の商品はアカデミック版です。現在、学生・教職員の方が対象です。 ※価格は執筆時確認したものです。 単品の場合 学生・教職員個人版 Adobe Illustrator CS…
課題 container幅：800px 引用元：復習：header - Webデザインの勉強｜忘筌 解答 forked: header部のレイアウト（2） - jsdo.it - share JavaScript, HTML5 and CSS HTML <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style2.css" type="text/css" media="screen,print"> <title>Information World</link></meta></head></html>
課題 container幅：800px 引用元：復習：header - Webデザインの勉強｜忘筌 解答 header部のレイアウト（1） - jsdo.it - share JavaScript, HTML5 and CSS HTML <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css" type="text/css" media="screen,print"> <title>header（1）</title> </head> <body> …</body></html>
ポイント HTML5ではContent-Style-Typeは記述しなくてもよい CSSが長くなったら外部ファイルとして読み込むようにする 矢印などの意味のない画像はCSSで背景として指定する contentの背景を表示させるために1px余分に幅を確保する img要素に対してwidth、hei…
通常、はてなダイアリーのスタイルシートを変更するには、 管理画面から「デザイン」→「デザイン編集」に進み、スタイルシート欄にCSSを書いて 「プレビュー」または「この内容に変更する」を選択します。しかしいちいちスタイルシートを書いてはプレビュー…
ポイント border-collapse: collapse; 隣接するセルのボーダーを重ねて表示する コード tableを使ったform - jsdo.it - share JavaScript, HTML5 and CSS <html lang="ja"> <head> <meta charset="UTF-8"> <title>tableを使ったform</title> <style type="text/css"> #myform { font-size: 0.875px; width: 500px; } #myform label { font-siz…</meta></head></html>
ポイント label要素に対してfloat:leftを指定する コード CSSによるform基本形(2)｜float - jsdo.it - share JavaScript, HTML5 and CSS <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSによるform基本形(2)｜float</title> <style type="text/css"> #myform label { font-size: 0.875px; display: block; float: left; width: …</meta></head></html>
ポイント display: block; を指定する コード CSSによるform基本形(1) - jsdo.it - share JavaScript, HTML5 and CSS <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSによるform基本形(1)</title> <style type="text/css"> #myform label { font-size: 0.875px; margin: 0 0 3px 0; display: block; } </style> </head>…</html>
form要素はお問い合わせなど入力フォームを作成するときに使用します。 実際にデータの送受信をするためにはCGI等が必要です。 主な属性 属性名内容action送信先プログラムのURIを指定methodサーバーにデータを送る形式をgetまたはpostで指定enctypeエンコー…
1週間後の検索順位結果 制作しているJimdoサイトですが、先生からのリンクを1度受け、タイトル＆ディスクリプションを変更しただけで上位表示されるようになりました。1週間足らずで効果が出るとは驚きです。開設してから半年以上手を付けていなかったサイト…
ポイント 配置したいものがabsolute それを囲むものがrelative positionを使ったレイアウト例 positionを使ったレイアウト - jsdo.it - share JavaScript, HTML5 and CSS
floatを使ったレイアウト - ウェブ学のすすめで書いたHTMLを授業で習ったことを踏まえてもう一度書き直してみました。 解答ver2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> </html>
ブックマークに入っていた 有料写真素材配布サイト7選 無料写真素材配布サイト13選 をご紹介します。※以下の写真素材を利用する際は各サイトの利用規約を要確認 有料 写真素材ならアフロ｜ストックフォト・ロイヤリティフリーのフォトライブラリーストックフ…
課題 引用元：確認テスト05/14 - Webデザインの勉強｜忘筌 解答 floatを使ったレイアウト - jsdo.it - share JavaScript, HTML5 and CSS
課題 【CSS11】 以下の画像と同じように表示させるCSSを記述しなさい リセットは、全称セレクタで 記述場所はエンベッド XHTML 1.0 Transitional テキスト無し（すべて画像で、代替文字は空） 引用元：CSS10〜11 float - Webデザインの勉強｜忘筌 解答 実践…
課題 【CSS10】 以下の画像と同じように表示させるCSSを記述しなさい リセットは、全称セレクタで 記述場所はエンベッド XHTML 1.0 Transitional 背景画像は作成する（アプリケーションは自由選択） メニューは擬似クラスで指定 引用元：CSS10〜11 float - W…
課題 【CSS09】 以下の画像と同じように表示させるCSSを記述しなさい リセットは、全称セレクタで XHTML 1.0 Transitional 記述場所はエンベッド フォームボタンを設定（できなければ、段落内に画像２つ） 引用元：CSS08〜09 - Webデザインの勉強｜忘筌 解答…
課題 【CSS08】 以下の画像と同じように表示させるCSSを記述しなさい リセットは、全称セレクタで XHTML 1.0 Transitional 記述場所はエンベッド 石垣島観光ガイド 石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。 沖縄からは、空路で…
課題 【CSS07】 サイズは適宜、調整すること 定義型リストに「float」の設定が必要 XHTML 1.0 Transitional インテリアショップ a Interior インフォメーション インテリアショップ「a Interior」での商品入荷情報、イベント、HPの更新など。 2012年4月27日 …
課題 【CSS21】 以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 幅は適宜設定 引用元：CSS18〜21横ナビ - Webデザインの勉強｜忘筌 解答 擬似クラス（10）〜横ナビ〜 - jsdo.it - share JavaScript, HTML5 and CSS
課題 【CSS20】 以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 幅は適宜設定 引用元：CSS18〜21横ナビ - Webデザインの勉強｜忘筌 解答 擬似クラス（9）〜横ナビ〜 - jsdo.it - share JavaScript, HTML5 and CSS
課題 【CSS19】 以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 幅は適宜設定 引用元：CSS18〜21横ナビ - Webデザインの勉強｜忘筌 解答 擬似クラス（8）〜横ナビ〜 - jsdo.it - share JavaScript, HTML5 and CSS
課題 【CSS18】 以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 幅は適宜設定 引用元：CSS18〜21横ナビ - Webデザインの勉強｜忘筌 解答 擬似クラス（7）〜横ナビ〜 - jsdo.it - share JavaScript, HTML5 and CSS
課題 【CSS17】 以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 背景画像は作成する 上・左からの位置は適宜設定 <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head></html>
