MacBook Proとコーヒーとノート

【第2段】久々のWEBのコーディングでググって調べた基礎の基礎のまとめ

【第2段】久々のWEBのコーディングでググって調べた基礎の基礎のまとめ

MacBook Proとコーヒーとノート

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 info

CSS: 背景色をなしにする | BmathLog

CSS3のtransformで、文字を長体や平体で表示する方法 [ホームページ作成] All About

CSSで幅や行数が一定でないテキストを上下左右中央に配置する方法 | REFLECTDESIGN

CSS吹き出し-ジェネレーター | WEB道

CSSでレイアウトするなら絶対覚えておきたい配置のルール:フロートや絶対配置、z-index とかいろいろ

jQuery Masonryの実装の仕方

今回唯一(自分で)使ったjQueryのflotした要素が良い感じに並べられるプラグインの「Masonry」。これは卒制でも実装したので、思ったよりも簡単に実装できましたが、細かいことわからないことがポロポロあったので、結局、Google先生の力を借りることに。

可変グリッドレイアウトのプラグインjQuery Masonryを実装する | FSFIELD Labs
jQuery Masonryを実装 …

float をキチッと整列 jQuery Masonry | Webデザイナーの備忘録

3/3 jQuery Masonryでサイズの異なるBOXをタイル状に整列 [ホームページ作成] All About

まとめ

あらためてコーディングは数をこなすしかないなぁと実感しました。まだまだ、記述して「あれ、おかしい!?」と止まって調べてを繰り返すことが多いので、早くコーディングできる人からみれば、どれだけ遅いんだろう…と思うと悲しくなってきます。

しかし、やればググれば大抵のことはわかりますし、どうにか出来ることはわかったので、簡単なものからコーディング案件や自習で学ぶ機会を設けて「コーディング空白期間を長く作らない」ようにしようとおもいました。体で思えるくらいまでいってしまえば楽になると思うので、とにかく記述します!