【HTML+CSS】わずかな自己紹介部分のコードで苦戦した話
題字がとてもダサいのはあえてダサさを極めてみたからです。フォントや色使いは題字ですね。あいや大事ですね。たぶんこれ2000年くらいなら相当スマートなデザインだったと思うんですが、移り変わりは怖いものです。
さて今回は、サイトデザイン大幅変更にあたり、やり残したサイドバーの自己紹介部分のコードで相当苦戦したという話。
まあこの部分ですね。 もうないけど。
前置きとして、HTMLとCSSはろくに勉強したわけではないということだけ記しておきます。本を3日かじって習得し、あとはググって知識を累積していっただけなので、根本的なところが分かってなかったりします。
作りたかったのは、とりあえずメインとなるアバター画像を左に、文章（リード文）を右上に、その下に横並びのSNSアイコン、という感じ。
グーグルウェブデザイナーは専門的すぎる？
制作するにあたりまず当たってみたのがこの「グーグルウェブデザイナー」。
ベータ版ということですが、クライアント型のツールとして、無料でダウンロード可能です。
結果から言えば、向いてませんでした。
最近のAdobe風のダークな感じで一見使いやすそうですが、これは本格的に「動く」サイト、サイトというより動くパーツや一連の組み合わせを作るのに向いています。
ゲームの公式サイトでワチャワチャ動く感じですね。あれをスマートに作りたい場合はこのツールが有用なようです。おそらく。
自分としては、一部分の<div>から</div>が作れればよかったので、少し格闘しましたが出力されるコードもシンプルではないためやめました。
オンライン系のツールも微妙
ロシアかどこかのブラウザで使えるツールも当たりましたが、こちらもパッと置いてコード出力して…という簡単な感じではなく、オブジェクトこそパッと直感的に置けますがその後の動きがダメでした。URLも失念。
コード書けばいいんでしょo(｀ω´*)oﾌﾟﾝｽｶ
というわけで諦め、使い慣れたサクラエディタでシコシコと<div>から書き始めましたとさ。
ただここでも問題があり……
ul liタグは嫌い(；´∀｀)
要するにリストタグですね。
こんな感じのやつですね。下はulではなくolですが。
これをスタイルの変更により横並びにしたりして、それがメニューバーになったりするんですが、どうもこいつが嫌いでして。
こうやって記事中にリストとして使うならまだしも、デザインで横並びにしだしたらもうひどいもんです。
ずれやかぶりや空白やらで格闘して数時間平気で持って行かれます。こういうのは、どこかでちゃんと授業を受けたほうがいいのかもしれませんが……。
完成形
<div class=”jikoshokaiside”>
<div class=”jikoshokaipumbaa”>
<img src=”http://—.jpg” alt=”プンバー”>
</div>
<div class=”jikoshokaibun”>基本的にゲーマー。食レポから時事問題のコラムまで幅広く書いています。TwitterやFacebookなどにも出没。アプリレビュー依頼など随時受け付けています。</div>
<div class=”jikoshokaisnsicons”>
<div class=”jikoshokaiicon”><a href=”https://twitter.com/pumbaa_report”><img src=”http://….png” alt=”Twitter” border=”0″></a></div>
…
…
…
…
</div>
</div>
アイコンの並び部分は…と省略しつつも、こんな感じになりました。当初アイコンはul liでしたが、諦めてぜ～んぶdivに。divは正義。万能選手。
なぜ諦めたかというと、PC版ではちゃんと並んでいましたが、Simplicityが最近スマホ版に導入したスラインドインメニューを使って表示すると、アイコンがTwitterしか出なくなるからです。なので強引かつ原始的ですが、全部div並べたら表示されました。
やったぜ。
ただスライドインメニュー内が左右スクロール必須に。これは、スマホ版では出力方法を変えることで調整できそうですが……
cssに関してはこんな感じです。
/************************************
** サイドバー自己紹介
************************************/
.jikoshokaiside {
overflow: hidden;
width: 330px;
}
.jikoshokaipumbaa {
float: left;
width: 120px;
}
.jikoshokaibun,.jikoshokaisnsicons {
float: right;
width: 210px;
padding-left: 10px;
box-sizing: border-box;
}
.jikoshokaibun {
height: 90px;
font-size: 13px;
line-height: 1.3em;
}
.jikoshokaisnsicons {
height: 30px;
}
.jikoshokaiicon {
float: left;
width: 30px;
height: 30px;
padding-left: 5px;
}
“よく出来ている”自信はまったくないので、偶然ご覧になられた詳しい方がいらっしゃいましたらご教唆願えると幸いです。それが理解できるかはブラックボックスですが。