【第2段】久々のWEBのコーディングでググって調べた基礎の基礎のまとめ
GWはWEBのコーディングをし続けて終わっていきましたが、本日、スケジュール通り納品することができました。作業の折り返し地点ぐらいで、「久々のWEBのコーディングでググって調べた基礎の基礎のまとめ」という記事を書いたのですが、自分で書いて自分で後からまた見ることが何度もあり、大変役に立っています。あれから今日の納品まで、また色々な基礎知識をググったのでまとめ記事第2段を書いておきます。
tebleに関すること
オーソドックスな企業サイトなどを、WEBスクールの課題でしか作っていなかったので全くHTMLで表を作っていませんでした。きれいさっぱり忘れていたので、本当に基礎の基礎からググりながら作成することになりました。
HTMLタグ/テーブルタグ/表を作る – TAG index WebサイトHTMLタグ/テーブルタグ/セルを結合する – TAG index Webサイト
スタイルシート[CSS]/テーブル/表の境界線を指定する – TAG index Webサイト
CSSで作るシンプルなテーブル
formに関すること
サバイブログでも簡単なお問い合わせフォームは作っていますが、WordPressの便利なプラグイン「Contact Form 7」で作られたもので、自分ではformに関する記述をしたのは…。これもWEBスクールの課題以来ですね…。ということで表同様にググりまくって作りました。
HTMLタグ/フォームタグ/テキストの入力欄を作る – TAG index Webサイトスタイルシート[CSS]/フォーム/フォーム部品の大きさ指定する – TAG index Webサイト
フォームのsubmitボタンのデザインを変更する方法(CSS) | monopocket blog
for 属性に対する属性セレクタの IE7 での挙動 · terkel.jp
CSSの細かいこと
作業をしていると、これはCSSでどうにかできるのかなぁ!?ということが頻繁にあります。
- リセットCSSでリセットされたリストの丸ポチを復活したい
- バックグラウンドをここでは無しにしたい
- 文字が長いので長体をかけたい
- テキストの天地中央揃え
- 吹き出しをCSSだけで作りたい
- なぜか配置が思うようにいかない… 等々
どれも同じことをググる可能性大なのでまとめておきます。
リストタグ(ul,ol)のスタイルをを元に戻す – CSSテクニック – acky infoCSS: 背景色をなしにする | BmathLog
CSS3のtransformで、文字を長体や平体で表示する方法 [ホームページ作成] All About
CSSで幅や行数が一定でないテキストを上下左右中央に配置する方法 | REFLECTDESIGN
CSS吹き出し-ジェネレーター | WEB道
CSSでレイアウトするなら絶対覚えておきたい配置のルール:フロートや絶対配置、z-index とかいろいろ
jQuery Masonryの実装の仕方
今回唯一(自分で)使ったjQueryのflotした要素が良い感じに並べられるプラグインの「Masonry」。これは卒制でも実装したので、思ったよりも簡単に実装できましたが、細かいことわからないことがポロポロあったので、結局、Google先生の力を借りることに。
可変グリッドレイアウトのプラグインjQuery Masonryを実装する | FSFIELD LabsjQuery Masonryを実装 …
float をキチッと整列 jQuery Masonry | Webデザイナーの備忘録
3/3 jQuery Masonryでサイズの異なるBOXをタイル状に整列 [ホームページ作成] All About
まとめ
あらためてコーディングは数をこなすしかないなぁと実感しました。まだまだ、記述して「あれ、おかしい!?」と止まって調べてを繰り返すことが多いので、早くコーディングできる人からみれば、どれだけ遅いんだろう…と思うと悲しくなってきます。
しかし、やればググれば大抵のことはわかりますし、どうにか出来ることはわかったので、簡単なものからコーディング案件や自習で学ぶ機会を設けて「コーディング空白期間を長く作らない」ようにしようとおもいました。体で思えるくらいまでいってしまえば楽になると思うので、とにかく記述します!