Hakrラボ

科学、ITの中でプログラム、Wordpressテーマやプラグイン用途、関連の制作記事、興味のあるテーマに対しての記事、他様々ITと科学のコラボから更なる新しいアイディア等を書き留めています。実際に使えるものから、応用が効きそうな物まで幅広く書いているので、参考に成れば幸いです。

超簡単に作る横並びDIV 超初心者向け

time 2016/11/01

超簡単に作る横並びDIV 超初心者向け

ここに来た人のほとんどは下のような物をやりたいと思うのでまずはサンプルからどうぞ

あああああ
いいいいい
ううううう

display: inline-block;li を横並びにする際にも利用可能です。

CSSについての簡単な説明

コピペだけでも簡単に説明できますが、それだと後々が身にならないので簡単に説明しますね。

DIV(ディブ)やLi(リスト)で横並びのセルを作るときに一番使う手法で最も簡単な手法がセルに

としてクラスにCSSでスタイルを当ててあげる事です。アンダーバー( _ )は使えないので注意。それ以外英語であれば自分がわかり易ければどんな名前を指定しても勿論いいです。

イメージとしては下の様に考えると楽
css-html1

画像をを入れた時に高さを合わせたい場合の書き方

ブログ等のサムネ画像を横幅100%で一定の高さに揃えたい時はスタイルにoverflow: hidden;(オーバーフローははみ出した部分という意味、ヒッデンは隠すという意味)を付けるとはみ出た部分を隠してくれます。

例えば例としては下の様になります。

今回では面倒なのでDivに直接書き込みますが、基本的にはファイルを分けておくと後々同じClassで他のセルを指定したいときに楽なのでそこらへんは使い分けてください。

オーバーフローヒッデン有り

htmlcode

オーバーフローヒッデン無し

htmlcode

まとめ
今回のが身についていれば2割程は自由度の高いサイトを作れるようになると思います。

sponsored link

down

コメントする





*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ソーシャル関連

パソコン

プログラム

個人的なブログ倉庫



sponsored link

Do NOT follow this link or you will be banned from the site!