- 1. HTMLとCSSの記述順序を意識することはデザイナーとの対話をなめらかにするという話
- 2. Buttonの作り方
- 3. haml データベース取得 投稿機能表示
- 4. htmlテーブルのDOM操作の罠
- 5. 模写コーディング その2 FaceBook ログイン画面
- 6. 転職１日目
- 7. 【初心者でもわかる】横並びにする3つの方法を、ナイフとフォークでやってみる
- 8. 初心者によるプログラミング学習ログ 358日目
- 9. ある条件に一致した時だけCSSで枠線を表示するにはoutlineを使うのがよさそう
- 10. スクロール率表示とおしゃれなスクロールバーを実装 9日目【WEBサイトを作る30日チャレンジ】
- 11. 背景画像を左右反転させたい。 transform: scale() ;を使おう
- 12. 【Rails】Font Awesomeの使い方
- 13. 【コピペOK】hoverしたら動き出すCSSボタンアニメーション４６選
- 14. 【コピペOK】hoverしたら動き出すCSSボタンアニメーション３０選
- 15. 【初心者向け】1pxのズレもなくコーディングするための便利ツール
- 16. プログラミングでよく見かけるhogeとは
- 17. 模写コーディングその１ FaceBookログイン画面
- 18. [初学者必見]htmlをhamlに変換するツール発見！
- 19. 初心者によるプログラミング学習ログ 357日目
- 20. CSSアニメーションとJSで『崩壊するサイト』を簡単に作る
HTMLとCSSの記述順序を意識することはデザイナーとの対話をなめらかにするという話
## みなさんは記述順序を意識していますか？
こんにちは。ひらやま（[@rhirayamaaaan](https://twitter.com/rhirayamaaan)）です。さて、唐突ですが、Twitter でこんな質問をしてみました。
ちょっと気になったんですが、モジュール単位（Organisms程度）のHTMLとCSSを書くときに、みなさんはどういう順序で書きますか…？
— ひらやま (@rhirayamaaan) July 2, 2020
**※ 2020/07
Buttonの作り方
# Button の作成
今回はaタグを使ってボタンを押すと遷移するようにします### html
buttonタグでaタグを囲みます。“`html:html
“`aはインライン要素なのでボタンの文字列以外の部分を押しても反応しない。
cssでaタグをブロック要素にすると解消されるらしい。
それでも無理ならblock要素にした後aタグのheight widthをボタンタグと同じにする。
“`css:css
button {
width: x;
height: x;
}a{
display: block;
width: x;
height: x;
}“`
haml データベース取得 投稿機能表示
アウトプット用です。
簡単な投稿機能の実装をしていたのですが若干詰まりました。
下記コードです。
“`top_page_controller.rb
class TopPageController < ApplicationController def index @toppages = TopPage.all end def new @toppage = TopPage.new end def create TopPage.create(TopPage.params) redirect_to top_page_index_path end def show en
htmlテーブルのDOM操作の罠
# 罠とは
htmlのテーブルのdom操作について、罠があります。端的に言いますと、テーブルの木構造のことですが、どうも隠れている要素があり、それを無視してしまうと、うまくDOM操作できません。
通常ですと、以下のhtmlコードについて“`html
test
test1 test2 test3 test4