初出勤

今日初出勤。

いろいろなことを覚えました。

覚えているか不安ですが。

思っていた業務内容ではりませんでしたが、まずここからと感じました。

Web業務でコーディング、画像加工の前にどのようにして更新作業が行われているか。

その基盤を学べたと思います。

その他、オフィスワークをするにあたってのメールの仕方、業務報告、社内SNS(掲示板など)の仕組み、など様々教わりました。

どれもまだ複雑と感じますが、これが会社というものですね。

早くなれるように頑張りたいと思います。

そして部署の皆さまやさしい。

担当の人事の方もやさしかった。

しばらく周りに迷惑かけながらの業務となりそうだけど、期待に答えられるように努力します。

そしてあまりタグやPhotoshopを使わない分、今まで通りWebの勉強はしなければならないと実感。

とりあえずこれから忙しいなー

目標は辞めないこと！絶対に辞めない！そして上を目指す！

CSSだけでプルダウンメニュー

マウスを重ねると下にニュルっと出てくるプルダウンメニュー。

一般的にJavaScriptで設定しますがCSSだけでやってみます。

個人的にこれは必要かと思ったのでメモ。

まず

次にCSSを設定

・大きな項目の<li>を設定

#gNav li {
float: left;
width: 200px;
position: relative;　/*親という意味*/
}

・詳細の<ul>を設定

#gNav li ul {
text-align: center;
display: none;　　/*何もないときは非表示*/
}

・オンマウスの時の<li>の設定

#gNav li:hover ul {
display: block;
position: absolute;
z-index: 100;
top: 40px;
}

これでオンマウスでプルダウンメニューが出てきた

ここからはレイアウトの設定

・リンクの文字色や背景など（）

#gNav ul a {
color: #FFF;
text-decoration: none;
background: #9BA198;
display: block;
height: 20px;
width: 200px;
border-top: 1px solid #FFF;
}

・詳細メニューにマウスが重なった時のリンク

#gNav ul a:hover {
background: #7A8079;
}

こんな感じで、まぁシンプルですができました。

<li>要素にも hover とか出来たんだなぁと驚きました。

でもやっぱりJavaScriptでもっとニュルっとしたのがいいですよね＾３＾；

早くJavaScript覚えなきゃです！

モバゲーのＴＯＰページを作ってみた

前回の宣言通り携帯版モバゲーのTOP画面を画面メモして見ながら作成した。

まず携帯のXHTMLを理解するのに3時間くらいかかったかも。

それ含めてトータル6時間くらい。

いろいろトラブルがありました。

簡単に流れをメモしとく。

・まずＴＯＰを画面メモ

・画像をコピーしてＰＣに送って、同じサイズの真っ白画像作る

・XHTMLの宣言などする

<?xml version="1.0" encoding="Shift_JIS"?>

<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

☆検証デバイスはdocomoだけど一応共通宣言

・画面メモ見ながらテキスト入力

・<div>で囲んだりフォームを作ったり画像を埋め込む

・インラインCSSでレイアウトする

☆XHTMLとうことで内部CSSや外部CSSが使えるが、怖いのでインラインにしました

・絵文字入力ソフト「ｉ絵文字」でdocomoの絵文字をポンポン追加してくhttp://www.nttdocomo.co.jp/service/imode/make/content/pictograph/tool/

今回はdocomoだけどほかのキャリアの場合大変だな＾３＾；

・念のため<span>で絵文字の色をつける

理由：Dreamweaverのライブビューで出てこない→わかりにくい→私的な理由です→容量の無駄使い？＾３＾；

・リンクの作成

携帯サイトはリンクが多い！今回はTOPページだけなのですべてリンク先は「#」で！

内部CSSのところにリンクのスタイルだけ記述しました＾３＾；

・ファイアーモバイルシュミレーターをｉモードHTMLシュミレーターで検証！

Firefoxのファイアーモバイルシュミレーター

http://firemobilesimulator.org/?%A5%C0%A5%A6%A5%F3%A5%ED%A1%BC%A5%C9

ｉモードHTMLシュミレーターで検証http://www.nttdocomo.co.jp/service/imode/make/content/browser/html/tool2/index.html

うん！画像が白だと違和感あるけど出来てる！ＯＫ！

忍者ツールのドメイン使ってFFFTPアップロードしてみよ！

（画像消してるし、固有情報は変えたし、何より商用じゃないから大丈夫だよね？＾３＾；）

あれ！？

レイアウト崩れてる・・・・

左に寄ってる

背景色がでてない

フォームがないよ・・・・

てかフォーム以外のバグってインラインＣＳＳのじゃん！！

考えられる原因

１：この携帯がXHTMLに対応していない

　→本家のモバゲーがきれいに出ているのでそれはない！？もしや本家はHTMLで作成してるの！？

２：忍者ツールが勝手にHTMLにしている

　→試しにｉモードHTMLシュミレーターでソース表示してみる・・・・

　　忍者ツールの広告のところに・・・・<div align="center">・・・・・あ・・・・・HTMLだ・・・・・

これかーっ！！

自分はXHTMLで作成したつもりが、忍者ツールの広告はHTMLで表示しいる！！

そらおかしくなるわ！！

ってことで、せっかく作ったXHTMLのコードを全部HTMLに直す；３；

めんどくさいよ～

XTMLの複雑な宣言消して～

Ctrl+Fで置き換えして～

HTMLのスタイル定義に書き換え～

フォームのバグは後回し！！

いろいろHTMLって制限されてんだね～

まず苦戦したのは「色」

Dreamweaverだと「#」をうつとカラー一覧が出てきてマウスでちょこっと選べばでますね

XHTMLは#FFFFFFを#FFFのように略すことができます

そのノリでHTMLでも#FFFにしたら適応されませんでした！！

なんとゆうことでしょう！勉強になった！テキストに参考サイトものってなかった！

てかDreamweaverでHTML作成の設定にして「#」押して色選んだら略されずにちゃんと６ケタでてるし＾３＾

次に苦戦したのが背景色

XHTMLのインラインCSSだと

のように簡単にできたけど、HTMLはこれが使えません！！

一見

bodyタグ

のように

でいけんじゃね？じゃね？って思えますがだめです！実際ダメでした！

テキストを見る限りでは

<marquee>を使うか<table>でテーブルを組むかしかダメとのこと

<marquee>を使うと簡潔に済み見ますがテキスト動いてる＾３＾；はいボツ～！

ってことでテーブル組んで背景色を設定

<tr>

</tr>

</table>

ここで注意！

<th>を<td>にするとテキストが中心に来なかった！

tabel の align="center" はあくまでテーブル全体の位置なので注意！

でも<td align="center">でいけるのか？

その他注意はページ全体のフォントの大きさを変えたい場合

～略～

</font></body>

としてみた！ライブビューやシュミレーターでは変わるが、自分の実機では変化なし！

微妙な文字の変化は無効にするのかな～？

未定義から、size="3"　だったから大差ないのかな～？

とまぁこんな感じでなんとか書き換え終了！

次にフォーム！

前回適当に作ったHTMLのモバイルサイトはフォームが表示されていたので検証！

修正前

修正後

送信方法とかだったわ＾３＾；

この辺はPHPとかのCGI絡んでくるからわからなーい！

結論！XHTMLのほうが便利！身をもって知った！

携帯サイトって表現限られてて単純でいいじゃんって思ってたけど、タグ限られてたり、独自のタグあったりする

からまた違う難しさ！意外とコーディングおもしろかった！

リンクにクリックするとテレビ電話かけちゃう属性あんだよ！すげーよな！まずつかわねーけど！

こんな感じでとりあえず終わり！

結果的にXHTMLとHTML作っちゃったけど勉強になりました！

トータル時間：12時間ほど

次は自分でレイアウトしたサイトを作りたいな～あと掲示板とかのＣＧＩも♪おわり＾３＾

<< 前ページ次ページ >>

意識高い系のニートがメモ代わりにするブログ

意識高い系のニートです。一応Web関係のフリーランスをしてますが壊滅的な状態のためニート同然です。仕事下さい。どんなホームページでも作ります。

初出勤

CSSだけでプルダウンメニュー

モバゲーのＴＯＰページを作ってみた