タグ別アーカイブ: html

sm2014

2014-01-10 勉強会

今年最初の勉強会はジェイコさん、キイさんが仕事で製作中のサイトやこれから取りかかるサイト制作の質問など。

あと、前からあるのに意外と知らないテーブルレイアウトについて。

今日ではサイトの見た目をいじるのはCSSでやるのが当たり前ですよね。テーブルでレイアウトした昔のサイトを見ると古くさく思いますよね。テーブルでレイアウトするのは、良くない!とされています。理由は「SEOに有効なマークアップが出来ない」「タグが入れ子になりすぎて見にくい」「面倒くさい」などなどです。

しかし、コンテンツに出てくる内容が表組の場合、テーブルはありです。
例えばhttp://juicyeyes.com/access.html(この場合はdl, dt, ddでも良いと思う)

そのテーブルのレイアウトについてです。

役職 氏名 所属
会長 山田 一郎 営業
副会長 山田 次郎 営業
幹事 野比 ノビタ 営業
幹事 小山 順三郎 営業
幹事 岸野 太郎 営業
幹事補佐 来如意 営業

以下のようにtheadとtbodyに分けると見やすいです。ちなみにtfootというのもあります。

こちらのサイトに詳しく解説してあります。

——————————–
ご覧の皆様、今年もよろしくお願いします!

iflameタグについて

iflameで動画をhtmlに埋め込む

http://phussa.net/index.html
こちらのサイトの作業をしています。トップページのニュース欄にYouTubeの動画をiflameタグで貼付けていました(これをAとします)。今回の依頼はトップページにUSTREAMを埋め込むという事ですので、配信停止中はクロスフェード画像表示にして埋め込みました(これをBとします)。YouTubeもUSTREAMも各サイトの自動埋め込みタグ生成機能を利用しました。

????????
ustreamを埋め込んだらAもBも、もともと最初にあったAが表示されました。2カ所同じものになってしまいました。あれれ?と思い、Aを削除してBだけにしました。そしたら今度はBの部分にはustreamが表示されるはずなのにAのYouTubeの内容が表示されています。

一回タブを閉じて新しいタブで開いたら直りました。

他のPCでも確認しました。ブックマークからサイトに入ると、やはりBにはA(YouTube)が表示されてました。タブを閉じて新しいタブでブックマークから入らずにアドレスを打ち込んで入ると直りました。(Bには、ちゃんとUSTREAMが表示された)

これは、どういう事がおきているのでしょうか?
1つのhtmlファイルにはiflameは1つしかいれられないのでしょうか?そんなわけないですよね。

どうぞよろしくお願いします。

文字参照でhtmlタグをhtmlファイルに表示させる

文字参照で htmlタグを htmlファイルに 表示させる。

2013-10-25の勉強会で、僕がタカハシ先生に質問をして解決した事の1つを説明します。

htmlタグをhtmlファイルに表示させたい場合は、このサイト(WordPress)だったら「crayon」というプラグインを使えばいいのですが、そういうシステムが無い場合の対処法です。
jQueryや自動生成サービスなどもありますが、ほんの数行なら自分でどうにかしたいものです。(例えば議事録に1行書きたいとか)

文字実体参照で解決!

<section >
ほげほげ
</section >

上記の「<」と「>」は文字参照で表示させていて、htmlタグではないので<section >と表示されているわけです。
WPプラグインの「crayon」はそれを自動生成してくれているわけです。

サイト制作で、&とか©など使った事ありますよね。

文字参照でググるとたくさん出てきます。

ccc1

サイトリニューアルについての注意点(.htaccessと404.html)

お仕事で、あるお店のサイトリニューアルをしました。サーバー・ドメインは昔のままでということで。

そこで1つ問題があり、解決したのでメモしておきます。

【問題となった事】
サーバーはそのままなので、昔のサイトのデータ(色んなフォルダやhtmlやcssファイルなど全部)をサーバー上から削除します。次に新しいサイトのデータ一式をサーバーにアップロードします。初めてサイトにアクセスするユーザーは問題なくリニューアルしたサイトを見る事が出来ます。しかし昔のサイトをブックマークしているユーザーがブックマークをクリックするとどうなるでしょう。サーバーが昔のページを開こうとして、その結果ページが無い事が判明して以下のような画面が表示されます。(ロリポの場合)

ccc

これは、そんページないよ~!というロリポのデフォルトのページです。これでは、困ってしまいますよね。昔からのユーザーに「あれ~、サイトなくなっちゃったの?!」「何かあったのかな?!」と思われてしまいます。指定されたページ(URL)が見つから無い場合、「この度リニューアルしました!新しいサイトはこちらでーす!」と言った感じでリンクを貼ってあるページが表示されると親切&安心ですよね。

2ステップで問題解決!

【①オリジナルのNot Foundページを作る】
404.htmlというファイルを作ります。そこにリンクを貼ったり、リニューアルの説明を載せます。デザインはcssで好きに出来ます。これをサーバーにアップロードします。index.htmlとかがあると思われる一番上の階層に。このファイルは、ユーザーが指定したページが無い場合に表示されるようになります。
【②.htaccess】
404.htmlというファイルを作ってサーバーにアップロードしただけでは、機能しません。「指定されたページ(url)がサーバーになかったら404.htmlを表示する事!」という命令をしなければいけません。テキストエディタで新規ファイルを作成して下さい。名前は「htaccess.txt」で、中身は ErrorDocument 404 /404.html と書きます。それを一番上の階層にアップロードします。アップしたら右クリックでファイルの名前を変更して下さい。
htaccess.txt → .htaccess(.から始まる。拡張子なし。)名前を変更したら属性を「604」にして下さい。これも右クリック。

以上です。

参考サイトhttp://oxynotes.com/?p=159
この他にも、ロリポ404やredirect htaccess で検索するといろいろ出てきますよ。

タカハシ先生、ありがとうございました。

ちなみに制作したサイトはこれです。http://juicyeyes.com/
試しにhttp://juicyeyes.com/boyoboyo.htmlという、ありもしないアドレスを入力すると440.htmlが表示されます。

favi

htmlファイルにfaviconの設定しよう

WPでは簡単にファビコンの設定ができます。以前、記事にも書きました。
WP Twenty Twelve 簡単にファビコンを設置出来るプラグイン”All in one Favicon”

WPではなく普通にhtmlで作成した場合は、上記の様に簡単ではありません。(とは言っても簡単です)

イラレ等で作成したイラストを自動でファビコン用のファイルに生成してくれる無料のサービスがあります。僕はいつも、こちらにお世話になっております。
http://ao-system.net/favicon/index.php

是非チャレンジしてみて下さい!

hover

hoverした時に疑似要素で画像やテキストを出現させる。

↑アイキャッチ画像の様に、hoverした時に画像や文字が出現するようにしたいのですが、どんなやり方がありますでしょうか?

ぱっと思いついたのはcssで疑似要素です。これでいけますでしょうか?
あとは、jQueryで適当なのがあるのかなあ。

よろしくお願いします。

2013-06-21の勉強会で「hoverした時に疑似要素で画像やテキストを出現させる。」が出来ました!

僕のサーバーにアップしました。タカハシ先生ありがとうございました!

http://nobu-69.com/study/after_201306/after.html

IE8対策

いろんなブラウザで確認しましたが、ie8は、ホバーもしてないのに↓こうなって(全部見えている)しまいます。(ちなみにie7はホバーしても疑似要素が出現しませんが、今回は切り捨てます。ie9はtransformが効きませんが、ホバーで疑似要素が出現するのでOKとします。)
ie8

ie8だけが読み込むie8.cssを作り以下を指定。

もとがこんな感じ

ie8用css

nav ul li a:hover:afterは上書きされますが、nav ul li a:afterの方は何にも指定がないので上書きされません。この場合どうしたらよいでしょうか?
気持ち的にはnav ul li a:after{all-clear}こんなのあったらいいなあ。

以下を追加することで無事解決!

firefox等に悪影響とかはありません

というわけで、ie8用にcssを作成して、それでどうにか問題解決するという作戦は無しになりました。そんな事をしなくても上記のコードを追加するだけで、解決したからで~す。

calc

css3で簡単横並びレスポンシヴデザイン

2013-06-14の勉強会で、やりました。
width:calcとsizing:border-boxという新しいものであります。
こんな感じ↓

僕のサイトにサンプルと説明をアップしました。
http://nobu-69.com/study/cluc_201306/cluc.html

20080226_IE_logo

IEの印刷プレビューについて

現在仕事で制作中のサイト。2年前に制作したサイトを部分的にリニューアルしています。
自分のサイトにテストでアップしてクライアントさんに確認してもらっています。

1つ指摘された事があります。
IEでの、下記のページの印刷プレビューが出来ないそうです。他のページは問題ありません。ちなみにクライアントさんはwindows7です。
http://nobu-69.com/test_site/nolimits201304/nyukaigo.html

僕も確認してみました.
windows xp でモードをie7にするとプレビューが出来ません。
windows7 でモードをie7にするとプレビューが出来ません。
その他(ie8,ie9)は問題ありません。どうやらie7で見た時だけ印刷プレビューが出来なくなるようです。

原因の検討がつきません。何が考えられるでしょうか?

よろしくお願い致します。

—————————————-
説明不足でしたので追記します。
ie7_preview
上記画像のように真っ白で何も表示されません。そして画面下の赤マル内の数字(ページ数を表す)の分母の部分が1,2,3,4,…….止まらなく増え続けます。
という状態です。

—————————————-
タカハシ先生のアドバイスを基に作業してみました。

①>1.他のサイトのページを印刷プレビューしようとしたらどうなるか?
 制作中のサイトの他のページは問題ありませんでした。
 問題があるのはhttp://nobu-69.com/test_site/nolimits201304/nyukaigo.htmlのページのie7で見た時のみです。

②>2.cssのmedia typeををscreenに限定したらprint時にcssは適用されなくなるはず。
 それでどうなるか確認。
cssが切れた状態でプレビューされましたので、指摘にある通りcssのどこかに問題があるのかと思い調査しましたが、おかしな所は見当たりません。

③対策としてhtmlのheadの中のcssのリンクを以下の様にしてみました。

そしたら上記の「説明不足でしたので追記します。」の真っ白で分母が止まらない状態に逆戻り。

qqq

本日の勉強リクエスト(シンタックスハイライターとWPに動画を貼りつける)

■①シンタックスハイライトされたソースコードを手軽に実装できるWebサービス・syntaxhighlight.inの使い方がいまいちわかりません。
参考サイトhttp://kachibito.net/web-service/syntaxhighlight-in.html

一応やってみました。デザインを選んで、それのcssもダウンロードしてリンクさせたのに効いていない。?!
http://nobu-69.com/study/css_packman/css-packman.html

■■②youtubeをwpに貼りつける。http://kuulei90.com/?page_id=20
 5枚貼りつけてます。上の3つはプラグインで下の2つはプラグインではなく、youtubeのサービスの埋め込みコードをコピペ。
プラグインはPCで問題なしですが、スマホ(iphone4s)で縦長の変な表示になる。これを解消したい!
youtubeのサービスの埋め込みコードをコピペの方はpcで再生&表示、問題なしですが、スマホ(iphone4s)の表示は縦長にならないでちゃんとしてるけど、
再生が出来ない。

ちゃんと表示させて再生するようにしたいです。

—-↓—↓—-↓——勉強会で解決しました。——-↓—–↓—–↓—–

■シンタックスハイライターについて。

①自動で生成されたhtmlのコードをコピーしてhtmlのbodyの中に貼り付けます。
②自動で生成されたjqueryとcssをコピーして自分で作ったファイルに貼り①のhtmlファイルにリンクさせます。
注)jQuery本体を忘れずに!

以上です。

それと、左横の行数を示す番号が必要でなければ、表示させたいコードをpreタグで囲むのが一番簡単です。
preタグはコードを書いたとおりに表示してくれるのでbrとかいりません。
こんな感じ↓。これはpreで囲んだだけです。

■■youtubeをwpに貼りつけたい!について。
wpのプラグインを使ったりyoutubeのサービスの埋め込みコードを使ったりと試してみましたが、どちらも多少の不具合があるので、一番いいのが
シンプルに動画のアドレス(動画観覧の際に表示されてるアドレス↓)をコピーしてテキストに貼り付ければOKという事になりました。
zz

注)動画のアドレスは独立した行に貼りつけて下さい。

と、ここまで議事録を書いてびっくり!確認の為、僕のiphone4sで貼りつけた動画を見ようとしたら、見れません!(デスクトップでは問題ないです)
プラグインで貼りつけたやつはみれるのに。
なぜだ~!アンテナも最高状態です。はあ~。みなさんのスマホで上記の画像再生できますか?

html5-wordpress

html5で作るWPオリジナルテーマ:1

以下の構想で5/31から開始しました。一回、1.5時間で、全4回くらいを目処にやる予定。

目的

WordPressのオリジナルテーマを作成することで、WordPressのテーマ、テンプレートの理解を深める。

内容(予定)

  1. index.htmlをhtml5とcssで作成する。
  2. モバイルファーストフラットデザインでindex.htmlをレイアウト&デザイン
  3. index.htmlを最小の構成でWPテンプレート化する
  4. メニュー、ウィジェットなどWPの機能を使えるように拡張

必要な心構え

WPへの理解を深める他にも、

  • html5、css、phpのコーディングの練習
  • レスポンシブWebデザインの練習
  • フラットデザインの練習

などの練習にもなります。各自、自分の目的に照らし合わせて、何か利用できる事があるはずです。その事を常に頭の隅に置いておきましょう。

必要な環境

個人で使えるWordPressを用意しておいて下さい。個人で使えるサーバをロリポップなどで契約してWPをインストールしておくか、XAMPPMAMPなど、ローカル環境でWPをインストールしておいて下さい。

html5で作るWPオリジナルテーマ:1

の勉強会から全4回の予定でWPオリジナルテーマを作成します。今回の参加者のスキルレベルは個人でWeb制作を仕事にする人から、html要素やcssをリファレンスを見ながらタイプする人までいますが、まあ何とかなるでしょう。各自、自分の現時点の課題を意識して勉強に望んで下さい。

1-1:ドットインストールの動画を見る

学習を始める前に、ドットインストールさんを見て、作業の概要をつかみました。
#07 ゼロからテーマを作ってみよう
次回の予習としてドットインストールを7回目以降くらいから見ておきましょう。初心者の人は最初からどうぞ。

1-2:作業用のフォルダとindex.htmlファイルを作成

新規フォルダ「wptest」を作って、新規に index.html を作成します。文字コードはutf-8にしましょう。
ドットインストールさんの手順を参考にindex.htmlを書いていきましょう。ただし、この授業ではマークアップにhtml5の要素も使います。

1-2:ブラウザ間の差異をなくす為にnormalize.cssを設置

今回はreset cssを書かずに、normalize.cssを利用します。Downloadをクリックして、開いたページを「wptest」フォルダに”別名でページを保存”しましょう。
normalize.cssについてはコリスさんの記事が分かり易いので、読んでおきましょう。
head要素の最下部に、normalize.cssを読み込んでおきます。

1-3:style.cssを設置

「wptest」フォルダにstyle.cssを作成します。文字コードはutf-8にしましょう。後で、ちゃんと読み込まれているかを確認し易いように、bodyのcolorを変えてあります。

head要素の最下部に、style.cssを追加します。

index.htmlをブラウザで表示して、Firebugなどの開発ツールでnormalize.cssとstyle.cssが読み込まれているか、確認しましょう。

1-4:今回のまとめ

テキストエディタの操作に慣れておこう

学習の際にはテキストエディタを使いこなす事が大事です。Dreamweaver、TeraPad真魚mi(Mac)など、なんでも良いのですが、初期文字コードはUTF-8Nにしておきましょう。また、普段から学習に使うテキストエディタをどんどん使って、操作に馴れておくのが良いです。自転車の運転と同じで、どうしても一定の練習時間が必要ですから、それは覚悟しておくように。

高性能な開発環境について

EclipseやAptana Studioなど、高性能な開発環境は、基礎が身に付いた人が効率を上げるために使うものです。html要素やcssプロパティがスラスラ書けるようになってから使うのをお勧めします。

便利なWebサービスについて

cupmen
また、便利なWebサービスの中には「簡単なドラッグ&ドロップ操作でWebサイトを構築できる」というものがありますが、これはhtmlやcssを勉強したくない人や、基礎が身に付いた人が仕事などのカンプ制作目的で使うツールです。学習中の人は無視しましょう。
例えば、カップ麺はおいしいくて便利ですが、料理が上手になりたいなら、カップ麺は排除すべきです。食材や味付けの知識や、調理道具の使い方を学ぶ機会を自ら逃してしまうだけです。

キャラメルメープルポップコーンのパッケージをhtml5とcssで再現

2013-3-8勉強会で行った「マークアップとcssの筋トレ」は、キャラメルメープルポップコーンのパッケージを取り上げました。

マークアップとcssの筋トレ とは?

チラシ、パッケージ、書籍などの印刷物や、看板などをhtmlとcssで再構築することで、マークアップとcssのスキルをアップする為の練習です。

手順

まず、題材を用意します。

今回はこれ。

セブンイレブンで買いました

セブンイレブンで買いました


選ぶ題材は、文書量があまり多くないものが良いでしょう。

文字要素を抜き出します。

お好きなエディタでマークアップする

この段階では以下に留意して下さい。

  • 印刷物をWeb上に再現するつもりで、SEOを考慮すること。
  • マークアップに不要な要素(div,span,br)や、属性(id,class)は使わない。これらはcssで装飾する段階で使う
  • doctypeを指定する。html5推奨。
  • title要素も忘れずに

ここで、メンバー同士で、各自のメークアップを発表します。比較・検討すると面白いです。
マークアップには、厳密な意味での正解はありません(明らかな間違いはあるでしょうが)。
例えばこの題材では次の様なパターンがありました。

この場合は、パターン3の方が妥当性が高いです。hgroup内の見出し要素は、最も数字の小さいものがアウトラインとして採用され、その他は省略されてしまいます
「キャラメルメープルポップコーン」は、一つながりの商品名で、要素としても「キャラメルメープル」と「ポップコーン」で分けるべきではありません。「ポップコーン」の方が大きい文字になっているのは、cssで調整しましょう。

cssで装飾する

まずは題材を出来るだけ再現してみます。
その上で、Webならではの工夫を加えると、より良いです。
ここで、必要ならば、divやspanを追加したり、idやclassなどの属性を追加しましょう。

こんな感じにしてみました

screenshot-html5-popcorn-package

cssはこんな感じ。

実装は以下のリンクから開けます。
html5-popcorn-package
SEVEN&iのロゴマークや、VALUE PRICE 100 YENのマークは、本来なら画像にすべき所ですが、練習でcssだけで描いています。

スクロールバーカスタマイズ

パソコンのデフォルトのスクロールバーってダサいですよね。変な青いやつ。
コンテンツ内にoverflow-y:scroll;などとしてスクロールバーを表示させた時
あの青いのが出てくるとデザインが台無しです~。

jQでいいのがないか探してみたら
http://kachibito.net/web-design/tiny-scrollbar.html
が良さそうなんですが、使い方がいまいちわかりません。
本サイトのダウンロードボタン押しても????だし。
http://baijs.nl/tinyscrollbar/

今度の新年会の授業でお願いしまーす。 続きを読む