My Web道

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

WEBデザイン

はてなブログにメールフォームを設置してみました

はてなブログにメールフォームを設置してみました。 今回メールフォームに使用したのは、忍者ツールズです。以下、その手順をお伝えいたします。 忍者ツールズメールフォーム設置方法 1. 忍者ツールズにログインします。2. メニューから、「その他」-「メー…

レスポンシブサイト制作で役立つツールまとめ (6選)

Blisk レスポンシブサイト制作時に役立つおすすめツール6選 今日は、レスポンシブサイトの制作に役立つツールをピックアップしてみました。いずれも、PC上からスマホ、タブレット等の各種デバイス表示が確認でき、制作の効率化に大いに役立つツールです。以…

タブメニュー(2) (jQueryとCSSで実装する超シンプルタブを作ってみました)

下記記事を参考にさせていただき、超シンプルタブメニューをページに実装してみました。【参考記事】 超シンプルなjQueryタブメニューの実装方法 - クルマ好きの幸福論 : https://hayakawayuki.com/4518 超シンプルなjQueryタブメニューの実装方法 - ハヤカ…

CSSで実装する タブ機能

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

「思わずエントリーしたくなるリクルートサイト 2018」 まとめ

[2017年版] 思わず引き込まれる採用情報Webページ 2018 思わず引き込まれる各社リクルートサイト(2018)、 以下、57 55サイト(2017.9.16 2サイトを追加)をご紹介いたします。 さすがの広告代理店 採用情報ページ 博報堂 求職者に向けての熱いコピー、 シング…

パスワード認証による閲覧制限 2つの方法

<目次> パスワード認証によるページ閲覧制限方法 1).基本認証による方法 2)、JavaScriptによる方法 パスワード認証によるページ閲覧制限方法 1) 基本認証による方法 2) JavaScriptによる方法 1).基本認証による方法 1).基本認証による方法は、4/7の内容を…

「.htaccess」ファイルを設置する(基本認証編)

サイトに「.htaccess」ファイルを設置しました。 「.htaccess」とは Webサーバーに設置すると、設置したディレクトリ以下に対して制御することができます。 ※Webサーバーに「Apache」を使用していることが前提「.htaccess」ファイルでできること 主な用途と…

Bootstrap サイトにメールフォームを作成

Bootstrapテンプレートで作成したサイトに、 メールフォームを設置しました。 《index.php》以下を、htmlの直前に記述

6/17 [HTML5/CSS] レスポンシブサイト(固定レイアウト)/ [CSS3] 角丸 / [PHP] 各種RSSを取得

[HTML5/CSS] レスポンシブサイト(固定レイアウト) [CSS3] 角丸 [PHP] 各種RSSを取得 [HTML5/CSS] レスポンシブサイト(固定レイアウト) 以下リンク先の演習課題によりレスポンシブサイトの作成方法を学びました。[課題] 固定レイアウトパターン:構造 - W…

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…

4/23 [jQuery]タブパネル

[jQuery] タブパネル 【演習】所定サイトのデモプログラムを修正・実装する手順:1.「jquery.com」にアクセスhttp://jquery.com/ 2.「jQueryUI」タブ(画面)を選択http://jqueryui.com/ 3.「Tabs」を選択http://jqueryui.com/tabs/ 4.jQueryの以下所定配布…