ブクマしとくと役立つHTML or Bootstrapリンク集

desing707 / Pixabay

スポンサーリンク

CSS|bootstrapのclassの記述の注意事項

bootstarapのclassを使う時は必ず先頭(最左)に記載すること。

そうしないと、cssをカスタムでキャンセルしようと思っても、効かなくなってしまうため。

この作法を間違えると、延々レイアウト崩れに気が付かないままスパイラルになってしまう

 

HTML|OGPタグの解説、設置、確認方法

OGP設定のHTMLソースと Facebook, Twitter Cardsの設定を全部まとめてメモ!

HTML|bootstrap|導入とテンプレートの表示イメージ

■bootstrap導入
http://bootstrap3-guide.com/base/prepare.html

■bootstrap.cssのみを使用した例
http://bootstrap3-guide.com/base/prepare_demo_no_theme.html

■bootstrap-theme.css(テーマ)を使用した例
http://bootstrap3-guide.com/base/prepare_demo_theme.html

■実際のbootstrap提供元(英語サイト)
http://getbootstrap.com/getting-started/

HTML|bootstrapの概略(初心者向け)

http://qiita.com/akatsuki174/items/53b7367b04ed0b066bbf

https://techacademy.jp/magazine/6270

画面サイズやグリッドシステムについて、分かりやすく解説してある

HTML|bootstrap|画像をレスポンシブ表示させる

http://crossbridge-lab.hatenablog.com/entry/2015/11/26/232526

画像をセンタリングしたまま、レスポンシブ表示も可能。
※領域外にはみ出す場合は、overflow : hidden で隠す。

HTML|CSS|bootstrap リファレンス

http://bootstrap3.cyberlab.info/

HTML|bootstrap|visible/hiddenの記述方法

http://studio-key.com/Bootstrap/glidDecoration03.html

どうしてもレイアウトが難しい場合は、visible/hiddenで別のレイアウトを作って切り替えるべし

HTML|bootstrap|ナビバー(ハンバーガーメニュー)の実装方法

http://bootstrap3-guide.com/compornent/navbar.html

結局、bootstrapで予約されたコードが最も安定

SVG | svgの指定について

http://qiita.com/ka215/items/f9834dca40bb3d7e9c8b

HTML|bootstrapの基本的な作法(container、row、col)

https://www.xmisao.com/2013/10/20/bootstrap-container-row-col-tips.html

container、row、colの正しい使い方はこちら!

HTML|マークアップのNG作法まとめ

https://www.mdn.co.jp/di/articles/4040/?page=5

<section>タグはレイアウトのために使ってはいけない。
読み物コンテンツなど、章立てする必要があるものに対して使う。
章タイトルはそれぞれの<section>に付ける。

HTML|html5 最小単位コード

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title>HTML 5 complete</title>
<!–[if IE]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js“></script>

<![endif]–>
<style>
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<p>Hello World</p>
</body>
</html>

http://www.html5.jp/html5doctor/html-5-boilerplates.html

HTML5の雛形

<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title></title>
</head>
<body>

</body>
</html>

 

HTML|PHP|インクルードファイルの書き方

■html内にphpを呼び出すインクルードファイルの記述方法

<?php include ($_SERVER[‘DOCUMENT_ROOT’].’/header.php’); ?>
`————————————————————————————–
※この時、環境変数|$_SERVER[‘DOCUMENT_ROOT’]は、絶対パスでサーバーのドキュメントルートまでのパスを呼び出しているため、その後に続けるファイルへのパスは、./ などと書いてはいけない!パスエラーが起こる

 

HTML/bootstrap

Posted by mori