おぼえられないから

ただただ自分の覚え書きのためです。

2018年07月

今まで、ページ構造にこだわらずにホームページを作ってきたが、
HTMLも5になりCSS3も主流になってきたので
にわかSEO対策として、マークアップを考えなおしてみた

基本は、他サイト様で紹介されているので、
あくまでも、自分サイト用に適したマーックアップを考える

PCサイトにはカラムデザインが必須になるので
にflexboxを使用したマークアップ
そのため、各コンテンツには「親box」と「子item」が入っている



参考サイト
SEO対策として最低限押さえておきたいHTML/HTML5マークアップの大事な6つのポイント
 続きを読む

下へスクロールすると
「トップページへ戻る」のアイコンを少し表示。
クリックしようとすると アイコン全体を表示する
ちょっと可愛いjQery

参考サイト
jQueryでページトップへ戻るを実装!初心者でも超簡単作成 
続きを読む

Flexbox

HTML
<ul class="親要素名”>
    <li class="子要素名">アイテム1</li>
    <li class="子要素名">アイテム2</li>
    <li class="子要素名">アイテム3</li>
    <li class="子要素名">アイテム4</li>
</ul>


親要素がflexコンテナーであれば自動で子要素アイテムとして扱われます。とも言われていますが、うまく動作しなかったので、上記要素名にしてあります。

CSS
.要素名 {
    display: flex;
}

これだけで、縦列で並んでいた子要素が左から順に横ならびになります。

リストタグは子要素の前に「●」がつくので
親要素のスタイルに 
list-style: none; 
を書いて消す。 



続きを読む

スクリプトだけで簡単に設置できる。

まずは<head></head>に外部スクリプトのリンクを貼る
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

その下に続けてスクリプトを書く
<script type="text/javascript">
$(function(){
$('a[href^=#]').click(function(){
var speed = 600;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});
</script> 

たったこれだけでページ内のアンカーリンクのスクロールがスムーズになる。
唯一のカスタマイズが
var speed = 600;
小さい数字ほど早く動く

段組を簡単にcolumnsプロパティ

CSS3で作る簡単なマルチカラム
長い文章を読みやす段落に分けるスタイル

[ HTML ]
<div class=“任意のクラス名”>
   <p> カラムA </p>
   <p> カラムB </p>
   <p> カラムC </p>
</div>

※カラムにした文書を<p>で囲う

カラムの数を指定 、column-countプロパティ
[ CSS ]
カラムの数を指定
.任意のクラス名 {
   column-count: 3;
}
数字はカラム数で「3」で3カラムになる


続きを読む

↑このページのトップヘ