初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

HTML

HTML Webページ内のリンクを各ソーシャルサービスに投稿(追加)する為のURL設定方法

Twitter,Facebook,Google+,mixi,Hatenaブックマークなどの投稿(追加)する為の URL設定方法を記述します。順次追加予定です。 Twitter http://twitter.com/home?status=[任意のテキストやURL] 入力したいテキストやURLを渡す方法です。 http://twitter.com…

HTML Dreamweaverでテンプレートを作成する

Dreamweaverでのテンプレートの作り方を記述する新規作成→テンプレートから作成を選択

HTML CSS Javascript スマフォサイトナビをクリックすると表示・非表示にする

<html lang="ja"> <head> <meta charset="UTF-8"> <title>モバイルサイト</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no, email=no"> <link rel="apple-touch-icon" href="touch-icon.png"> </link></meta></meta></meta></head></html>

Googleフォームで任意のメールアドレスに通知する方法

Googleフォームで問い合わせがあった場合に、任意のアドレスに 通知をする方法を記述します。 GoogleのアカウントにログインしGoogleドライブからフォームを 回答先を選択します。 「ツール」→「スクリプトエディタ」を選択ファンクション欄に 下記を入力し…

HTML 「.htaccessファイル」を使った自動振り分け

PC用とスマフォ用のサイトをそれぞれ作成したときに、 ユーザーを各デバイス用のサイトに誘導出来るように したものが「.htaccessファイル」です。これはユーザーエージェントを読み取りPCで見た場合にはPC用サイト、 スマフォで見た場合にはスマフォ用サイ…

HTML CSS バックグラウンドに動画を使用する

最近動画がバックグラウンドに流れていてなおかつコンテンツを 見せるサイトが多々あるかと思います。その作り方を記述します。HTML5のvideoタグを使用します。動画を用意します。 下記が無料でクオリティーが高い動画が ダウンロードできます。poster属性は…

HTML Atom 縦の線を消す方法

こんな線がAtomにはデフォルトで入っています。 これを消すにはデフォルトで導入されているPackageの 「Wrap Guide」を無効化すればOKです。線が邪魔だと思っている方は是非試してみてください

HTML スマフォで閲覧される際の記述方法

作成したPC用のホームページがスマフォで閲覧される可能性がある場合には 必ず下記の記述をHTMLで記述します。 閲覧されるデバイスの画面の幅によって自動で対応する記述になります。initial-scale=1.0 この記述は作成したページの幅が100%だとするとそれを…

HTML Dreamweaverでクリッカブルマップの作成する

画像のある部分をリンクを貼る方法をクリッカブルマップと言います。 その方法を記述します。 まずhtmlファイル内にimgタグで画像を用意します。 コードビューを分割かデザインビューに切り替えます。 メニューからウィンドウ→プロパティを選択します。 HTML…

HTML5で追加された主な要素

HTML5で追加された主な要素 文書構造やテキストの意味を明確にするsection要素(複数回使用可能) article要素(複数回使用可能) aside要素(複数回使用可能) nav要素(複数回使用可能)header要素(必要があれば複数回使用可能) footer要素(必要があれ…

HTML Facebookを埋め込む

HTMLでFacebookを埋め込む方法を記述します。個人のページでは出来ず、Facebookページ(旧ファンページ)のみがWebサイトに埋め込む事が出来ます。 なのでFacebookは、Facebookページを作成する所から始まります。Facebookページを作成したら、開発者ツール…

HTML Twitterを埋め込む

今回はSNSのTwitterのタイムラインを埋め込む方法を記述します。タイムラインにも数種類ありますが、今回は一番シンプルな物を埋め込んでみましょう。 Twitterの場合、公開されているものであれば、世界的に有名な人のアカウントのタイムラインでも 埋め込む…

HTML fabicon(ファビコン)を作成する

ファビコンの作成方法を記述します。favicon(ファビコン)とは:ブラウザのタブに表示されている小さな画像です。 ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称です。 favorite…

HTML GoogleカレンダーをHTML内に埋め込む

Googleカレンダーの埋め込み方を記述します。1、GoogleアカウントにログインしGoogleカレンダーを新規作成します。 (※アカウントを持っていない人はアカウントを作りましょう。) 2、一般に公開するにチェックをつけて、作成します 3、カレンダーの設定…

HTML マークアップ 入れ子のルール

HTMLのルール最近HTMLを記述するのにも少し慣れてきましたが基礎に戻ってタグの入れ子ルールについて記述します。入れ子のルールを理解するには、HTMLに【インライン要素】と【ブロックレベル要素】という2つの要素があることを知る必要があります。簡単にい…

HTML CSS positionを使ったレイアウト 実践編

先日記述したpositionを実際に使ってレイアウトしました。positionの練習のため使わなくてもいいところまで使っていますが 練習ということでご了承ください。 素材も起きましたので実践してみたい方は是非練習してみてください。素材置き場HTML <html> <head> <meta charset="utf-8"> <title>デザート</title></meta></head></html>…

HTML CSS ヒーローヘッダーを作成する

色々なサイトで見受けられる大きな画像が画面いっぱいに広がり スクロールしても写真が動かず他の部分が動くレイアウトがあります。 一般的にこういったレイアウトをヒーローヘッダーと呼ばれるそうです。 HTMLとCSSでヒーローヘッダーを簡単に記述すること…

Javascript 画像置換 マウスオーバー・マウスアウト

Javascriptで簡単に画像置換をする方法を記述します。 モノクロ画像の上にマウスを乗せるとカラー画像にする方法になります。 写真加工・Javascriptを分けて記載していきます。 写真をトリミングする。モノクロ画像にする まず何でも良いので画像の素材を用…

HTML Formの基本構造

フォームの基本枠組み コントロール:データを入力するための手段 form要素: action属性:データを受け取るプログラムを指定。「どこに」 method属性:データの送信方法を指定。「どうやって」 input要素:type属性を様々に変える事が出来る。 textタイプの…

HTML table要素 1

table要素の概要を記述します。 HTMLにおけるて表(テーブル)はtable要素を使用して表現します。表の中には1つ以上の【行】があり、その行の中にはまた1つ以上の【セル】があるという考え方でテーブルを表現します。 table要素:テーブル(表)を定義する t…

CSS 横メニューの作り方

CSSで横メニューについて作り方について記述します。 先日と同じ下記のbody要素で記述します。 <body> <div id="nav"> <ul> <li><a href="#">Rock</a></li> <li><a href="#">Jazz</a></li> <li><a href="#">Blues</a></li> <li><a href="#">funk</a></li> <li><a href="#">soul</a></li> </ul> </div> </body> CSSの記述手順 いつも通りhtmlファイルを新規で作成し任意のフォルダに保存し基本を入力 メニューを複…

CSS 縦メニューの作り方

縦メニューの作り方をメモしておきます。 今回は画像ではなくHTMLとCSSだけで書けるタイプです。 画像で作るナビは違う日に記述します。 HTMLのbody要素内を下記で作成します。 <body> <div id="nav"> <ul> <li><a href="#">Rock</a></li> <li><a href="#">Jazz</a></li> <li><a href="#">Blues</a></li> <li><a href="#">funk</a></li> <li><a href="#">soul</a></li> </ul> </div> </body> htmlファイルを…

HTML 文書構造をマークアップする

文章構造をマークアップする。 先日までHTMLの役割と基本構造について書きました。 HTMLを書くうえでのルール、更にはタグや要素等 覚える事は沢山ありますがやはり一番大事なのは いかに閲覧してくれるユーザーが分かりやすく読みやすい文章を書く事になり…

HTMLの役割と基本構造 3

明けましておめでとうございます。今年もよろしくお願い致します。 改めてHTMLやCSSに関する事を記事に書いていきます。 HTMLの記述の準備 さて去年の記事でも触れましたがHTMLを記述するにはテキストエディタが必要となります。理由は下記になります。 起動…

HTMLの役割と基本構造 2

HTMLのルール 日本語で入力した文字は認識しない。 マークアップという意味付けをすると表示出来る。 HTMLでは、大きさ・色のなどの修復は記述しない Markupとは 目印(荷札:タグ)をつけていくこと コンピュータが文書の構造などを認識するための目印です…

HTMLの役割と基本構造 1

ブラウザに情報を表示するためにはHTMLで記述する 一昨日のブログで書いた通り、ブラウザで何かを表現したい場合には HTMLで記述する必要があります。逆にHTML以外では表示できないと言っても過言ではありません。 HTMLはHyperText Markup Languageの略でWeb…

HTMLに触れてみる。

実際にHTMLを書いてみます。 HTMLを記載するにはDreamweaverやTerapadやSakuraなどのテキストエディタソフトを使います。 ①始めに新規ファイルをindex.htmlで任意の管理フォルダに保存します。 ※名前を変える際には半角英数字のみ使えます。 これはどのサイ…

topへ戻る