My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

HTML/CSS

同一ページ 別タブ内アンカーリンクへの移動実現方法

同一ページ内の異なるタブ内アンカーリンクに移動するには 通常、アンカーリンク(同一ページ内)への移動は、以下の方法(アンカーリンク先要素に付けたID名をhrefに設定するだけ)で可能です。 <li><a href="#ID名">リンクテキスト</a></li> しかし、アンカーリンク先が他のタブ内だったりす…

リファラ (REFERRER) 制御方法を確認しました

リファラ (REFERRER) 制御方法を確認しました こちらについてご説明する前に、「リファラって何?」という方のために、以下ご説明いたします。 リファラ (REFERRER) とは? どこから現在のページに来ているか、ユーザーのアクセス元を示す情報のことです。 ※…

CSSで実装する タブ機能

[jQuery不要] ラジオボタン + CSSで出来る タブ機能 以下記事を参考に、Webページにタブ機能を設置してみました。【参考記事】 qiita.com上記にてご紹介いただいたコードで、 おかげさまで思った通りのタブができました。と喜んだのも束の間、一つ問題が発覚…

おススメ Div要素 丸ごと スライド可能なスライダー 「Swiper」

jQuery不要の高機能スライダー 「Swiper」を実装してみました 今日は、ページ内の要素丸ごとスライド可能な高機能スライダー、「Swiper」をご紹介いたします。Swiperのダウンロードはこちらから可能です。 Swiperの使用に至ったキッカケ 見出しやボタン等の…

【Chrome拡張】Local版 CodePenのようなエディタツール、「Web Maker」を使ってみました

Chrome拡張「Web Maker」の機能・特徴について Chrome 「Web Maker」とは? webmakerapp.com Local版 CodePen的Webエディタ Chrome拡張機能のWebエディタ、使い勝手はCodePenに似ています。 CodePen(※)同様、ソースコードの結果がブラウザでその場で確認でき…

CodePenを使ってみました

CodePenを使ってみました 以前から話題になっていたCodePenを使ってみましたちょっと戸惑うところもありましたので、以下より、その使い方(ユーザー登録から本ブログにコードを貼り付けるまでの手順)をご紹介いたします。 1. ユーザー登録 まず、以下のサイ…

数字型リストマーカー (箇条書き)

<目次> 数字型リストマーカー 標準的な数字タイプ (decimal) 2桁数字タイプ(decimal-leading-zero) ローマ数字[小文字] タイプ(lower-roman) 漢数字タイプ (cjk-ideographic) 数字型リストマーカー 今日は以下のような数字型の箇条書きをマークアップする…

【JavaScript】ページ遷移元情報取得用 パラメータ引き継ぎスクリプト

パラメータ引き継ぎスクリプト 今日は、現在のページに埋め込まれたリンクから遷移先にジャンプした際、遷移先で遷移元ページURLをパラメータで取得するためのJavaScriptをご紹介します。【目的】 遷移元URL情報が引き継がれているため、 どういった被リンク…

【CSS3】 アニメーションボタン

CSS3によるアニメーションボタン No.2 拡大・縮小するアニメーションボタンを作成しました。 Demo css3 アニメーションボタン(拡大・縮小) | WebStock 以下、ソースを記載します。[ソース] html <a href="#"><img class="area-main-topbtnr" src="http://サイト/パス/画像ファイル名" width="100%"></a> ※上記、サイト名、パス、画像ファイル名は適宜変更してくださ…

グローバルナビのテキストをhoverで切り替える方法

グローバルナビのテキストをhoverで切り替える方法 グローバルナビにマウスを重ねた時、文字を変更する方法を確認、実装してみました。ここでは、下図のように、 ↓ 標準時英語表記のグローバルナビメニュー ↓ (マウスホバー) ↓ 日本語表記するという動作を実…

【CSS3】 アニメーション(ゆらゆらバナー)

ECサイト設置用 CSS3のアニメーションバナー ECサイト設置用にCSS3のアニメーションバナー、 作りました。 ※以下はDemo用ダミーです。Demo 以下、サンプル用のソースを共有します。 <style> /* 基本設定 */ html, body { margin: 0; padding: 0; } body { font-fami…

CSSで実装するハンバーガーメニュー

ハンバーガーメニュー CSSで開閉動作付きハンバーガーメニューを作成しました。 Demo 備忘録として、ソースを掲載しておきます。【ソース】html <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <link rel="stylesheet" href="/css/style.css" type="text/css" /> <script></link></meta></meta></head></html>

【CSS3】transparent で右向き三角を表現する

CSSで右向き三角ボタンを作る transparentを使って下のボタンを作ってみました ECサイトなどに使えそうなボタンです。 備忘録として、ソースを記載します。 [ソース] html <a href="#" class="see_detail">詳細を見る</a> [ソース] css a.see_detail { width: 160px; font-size: 16px; } .see_de…

6/24 CSS確認テスト / Webフォントの活用 / Zen-coding(Emmet)の活用

本日の授業テーマ CSS3確認テスト Webフォントの活用 SVG画像の活用 Syntax Highlighter Zen-coding(Emmet)の活用 本日の学習内容 CSS3確認テスト 【問題】【問1】CSS3で影をつける場合の、2つのプロパティ名を書きなさい答え: box-shadow text-shadow参…

6/16 [PHP] 確認テスト(データベースへの接続) / [HTML5/CSS] レスポンシブサイト(可変レイアウト)/ [CSS3] シャドウ

[PHP] 確認テスト(データベースへの接続) [HTML5/CSS] レスポンシブサイト(可変レイアウト) [CSS3] シャドウ(ボックス・テキスト) [PHP] 確認テスト(データベースへの接続) 前回の授業の復習として、以下の課題を実施 【課題】 ブラウザの画面に、以…

6/10 [HTML5] レスポンシブWebデザイン

[HTML5] レスポンシブWebデザイン 参照: http://d.hatena.ne.jp/web-0127/20140701/p1 レスポンシブWebデザイン デバイスごとのマルチソースではなく、ワンソースで対応する参考: slideshare 「レスポンシブWebデザインの基礎」 http://www.slideshare.net…

3/31 ①[CSS] HTML5でグリッドスタイルのページを作成 / ②[Illustator] ペンギン画像を作成

[CSS] HTML5でグリッドスタイルのページを作成 [Illustator] ペンギン画像を作成 グリッドスタイルのページを作成 【見本】 【HTML/CSS模範例】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>演習:HTML5でCSSレイアウト</title> <style> article, section, figure, header, nav { display: block; } </style> </meta></head></html>

3/18 カラムレイアウトの設計B

- カラムレイアウトの設計[CSS]【見本】 今日の課題は以下のレイアウトを再現すること 【習作】 以下、自身の習作です。 自己の感想: 見比べてみると、フォントの種類・サイズ、レイアウト内の間隔等、まだ修正の余地があることに気づきます。 なお、以下が…

3/11 2カラムレイアウト(応用)

2カラムレイアウト 応用 [Photoshop]境界線を調整(複雑な選択範囲) 【演習】2カラムレイアウト 応用 課題:昨日の2カラムレイアウトに以下変更を加える -ロゴとビルボードの空きを「10px」に変更 -ナビボタンの縦の面積を広げる -#contentのデザインを変更…

3/5 ①floatを使ったレイアウト / ②Flashの復習

本日の授業テーマ floatを使ったレイアウト Flashの復習 本日の学習内容~まとめと感想~ CSS対象ブラウザ IE8以上 (IE6) CSSがほとんど認識できない。 例えば、「auto」が分からない。 参考記事: IE6でよく遭遇するCSSのバグとその解決方法 | コリス [演習…

2/25 CSS基礎確認テスト / はじめてのFlash

本日の授業テーマ CSS基礎確認テスト Flashについて 本日の学習内容~まとめと感想~ CSS基礎確認テスト 基礎確認テストとして、以下の課題に取り組みました。[課題04] 素材: [HTML] <html lang="ja"> <head> <meta charset="utf-8"> <title>課題04 ナビボタン</title> <link rel="stylesheet" href="css/style4.css"> </head> <body> <div id="nav"> <ul> <li id="service"><a href="#">サ…</a></li></ul></div></body></html>

2/19 復習 2カラムレイアウト(1) - レストランサイト

復習 2カラムレイアウト 復習 2カラムレイアウト レストランサイト作成 課題:以下のレストランサイトを2カラムで作成します。[見本] [ポイント] 写真挿入 pタグ内文頭に以下タグを使用して挿入 <img src=""> pタグの前方に置いた画像はfloatで回り込ませる headerの背景…

2/17 [HTML] class と id

class と id class と id 原理原則では、汎用性(class)と個別性(id) 現実的には必ずしもその通りではない横並びの時 divが必要 縦並びの時 divが不要 【演習】floatを使ったレイアウト 問題:以下のように表示されるように記述しなさい 各空き(白色部)は「…

2/12 ①CSS(CSSによるページ構築) / ②Photoshop(写真の補正)

本日の授業テーマ CSSによるページ構築 Photoshop(写真の補正) 本日の学習内容~まとめと感想~ CSSによるページ構築 文章構造によるグループ化 → DIV要素 - グループ化とは、div要素によるコンテンツのブロック化 - 見出しと本文のまとまりとを一緒に構造化…

2/10 ①[CSS] リセットCSS / ②[PS] 起動と各種設定・選択範囲

CSS(リセットCSS) Photoshop(起動と各種設定・選択範囲) リセットCSS 全称セレクタ(ユニバーサルセレクタ)による手法: 以下記入例のように、プロパティ直前に * (アスタリスク) を用いて記述する方法。HTMLの全要素に同じスタイルを適用することがで…

2/5 [CSS] 記述と使い方 / [Illustrator] 長方形・楕円を使ったロゴ

CSS(記述と使い方) Illustrator(長方形を使ったロゴ・楕円を使ったロゴ) CSSとは CSS (Cascading Style Sheet) CSSの語源・意味 cascade 岩にぶつかって流れるような滝 親(上位)を継承して機能 便利なadd onツール HTML Validator Web Developer Style…

1/31 [HTML] 画像・表組み・リンク / [Illustrator] 変形・直線・曲線

HTML(画像・表組み・リンク) Illustrator(変形・直線・曲線) HTMLについて学ぶ テキストエディタに文字コードを設定 メニューバー「表示ーオプション」 「文字コード」タブ 初期文字コード UTF-8N 初期改行コード LF 保存文字コード UTF-8N 保存改行コー…