20200328のHTMLに関する記事は12件です。

投稿日：2020-03-28T22:20:55+09:00

Bootstrapの画面分割

Bootstrapの基本
html.
<html>
<div class="container">
  <div class="row">
    <div class="col-サイズ-割合">
  </div>
</div>
</html>
containerの中にrow、rowの中にcolを入れていく。
div class="col-サイズ-割合"
サイズ表：

xs sm md lg

~767px 768~911px 912~1119px 1120px~

スマホタブレット PC PC大画面

割合：
画面を12分割し、割合を決めることで画面を分けることが簡単にできる。

例1：
col-lg-4
col-lg-4
col-lg-4
これらは横並びに３列均等に分割できる。

xs	sm	md	lg
~767px	768~911px	912~1119px	1120px~
スマホ	タブレット	PC	PC大画面

　 Tweet
Qiitaで続きを読む

投稿日：2020-03-28T21:12:31+09:00

WSLのディレクトリにあるhtmlをブラウザで開く

意外と分からなかったので、メモ。
terminal
explorer.exe foo.html
explorer.exeを使用すればhtmlファイルを開くことが出来る。
.bashrc
export BROWSER="explorer.exe"
開けなければ、.bashrcに設定する。
.bashrc
alias start="explorer.exe"
楽に開けるようにエイリアスを.bashrcに設定する。
terminal
start foo.html
startコマンドでhtmlを開けるようになる。

参考

Is there a way to open a file in a browser from WSL?

　 Tweet
Qiitaで続きを読む

投稿日：2020-03-28T20:11:06+09:00

指定したエリアだけを印刷する処理

こんな場面で使えます。

　例えば、ユーザーに何らかのアンケートに回答をしてもらうサイトで
ユーザーが自分の回答結果の部分だけを印刷したい場合などに使えます。
普通の印刷では余計な箇所も入ってくるので、必要なエリアだけを印刷できるようにします。
※実際の挙動が確認できるwebアプリのURLを一番下に載せてますので、そちらもご確認ください。

実装の流れ

　１：印刷ボタンを作成
　２：プリントしたいエリアの取得の指定
　３：２のエリア全体のコピーを作成
　４：3以外を非表示にする処理を作成
　５：印刷ダイアログの呼び出し➡︎印刷する
　６：３で作成した印刷用エリアを削除・４で非表示にした要素を表示する

実装スタート

１：印刷ボタンを作成
print.html
<button class="print-btn">
　<span>結果だけを印刷する</span>
</button>
２：プリントしたいエリアの取得

　プリントしたい範囲を以下の「divタグ」で囲む。
print.html
<div class="print-area">
　
</div>
3：２のエリア全体のコピーを作成

　１：プリントしたい範囲を取得
　２：プリント用の要素「#print」を作成。
　３：２の子要素に１を入れる。
print.js
$(function(){
//個別印刷ボタンをクリックした時
$('.print-btn').on('click', function(){

//プリントしたいエリアの取得
var printArea = document.getElementsByClassName("print-area");

//プリント用の要素「#print」を作成し、上で取得したprintAreaをその子要素に入れる。
$('body').append('<div id="print" class="printBc"></div>');
$(printArea).clone().appendTo('#print');

//この下に、以降の処理が入ります。

 });
});
４：3以外を非表示にする処理を作成
print.js
//プリントしたいエリア意外に、非表示のcssが付与されたclassを追加
$('body > :not(#print)').addClass('print-off');
print.css
.print-off {
　display: none;
}
５：印刷ダイアログの呼び出し➡︎印刷する
print.js
window.print();
６：３で作成した印刷用エリアを削除・４で非表示にした要素を表示して終了です。
print.js
//window.print()の実行後、作成した「#print」と、非表示用のclass「print-off」を削除
$('#print').remove();
$('.print-off').removeClass('print-off');
終わりに。

いかがでしょうか。
印刷したいエリアだけを取り出せるのでユーザーにとって不要なエリアが無くなり使い勝手の良いページが作成できると思います。
自作の家庭用備蓄をチェックできるアプリでも、チェックした備蓄情報を印刷できるようにしてありますので
良かったら作業の合間にそちらを見ていただけると具体的な挙動を確認していただけます。
https://saku2stockcheck.herokuapp.com/

では、最後まで見ていただいてありがとうございました！

　 Tweet
Qiitaで続きを読む

投稿日：2020-03-28T19:29:01+09:00

HTMLを理解するコツとは？！ブロック要素でグループ分けをする

HTMLを理解するコツ

HTMLを理解するには、Webサイトの構成について知り、レイアウトを理解する事が必要です。
HTMLでは、1つひとつ細かい要素を囲むタグがありましたね？
知らない方はこちらを参考にしてください
HTMLの基本的な書き方をマスターしよう
実はこれらのタグを上から並べていくだけでは上手にレイアウトはできません。
そこで今回の記事では、上手くレイアウトしていくためのグループ分けについて学んでいきます。

今回の記事

グループ分けとは？

ページ大まかな構成

ヘッダー部分を作る＜header＞タグ

ナビゲーションメニューを作る＜nav＞タグ

メインコンテンツ部分を作る＜main＞タグ

読み物、記事部分を作る＜article＞タグ

テーマを持ったグループを作る＜section＞タグ

メインコンテンツではない、補足部分を作る＜aside＞タグ

フッター部分を作る＜footer＞タグ

意味を持たないブロック要素を作る＜div＞タグ

グループ分けとは？

Webサイトは様々な構成要素を組み合わせて作られています。例えば、ナビゲーションメニュー、本文、関連記事の一覧、Webサイトの紹介文など。それらを一つの塊としてタグで囲みグループ分けしていきます。

下記のコードを見てみましょう。
例１
<h1>明日のお天気</h1>
    <p>明日は晴れるでしょう。</p>
<h2>おすすめコーディネート</h2>
    <p>まだ少し肌寒い日が続きますが、春に向けて明るい色のコートがおすすめです。</p>
見出しと文章が並んでます。「明日のお天気」と「おすすめコーディネート」は別のテーマになっていますので、別グループとしてまとめるのがよいと考えられます。
例グループ分け
 　 <article>
        <h1>明日のお天気</h1>
        <p>明日は晴れるでしょう。</p>
    </article>

    <section>
        <h2>おすすめコーディネート</h2>
        <p>まだ少し肌寒い日が続きますが、
        春に向けて明るい色のコートがおすすめです。</p>
    </section>
ただHTMLでグループ分けしても表示は変わりません

CSSで設定し、色やレイアウトを変更したりすると、グループ分けがわかりやすくなります。CSSは別の記事でで詳しく勉強します!!

なお、＜h1＞,＜p＞タグのように前後に改行が入るものはブロック要素といいます。
＜a＞,＜img＞タグのようにテキストの一部として扱われるものをインライン要素といいます。

ページ大まかな構成

グループ化するためのタグはそれぞれ意味がありました。用途に合わせて、どのタグで囲むのか考える必要があります。Webサイトの大まかな構成を知り、グループ分けをうまくしていきましょう。
以下のようなページがあったとします。

WEBページの構成
上部の青い部分...ヘッダー＜header＞
真ん中の赤い部分...メイン＜main＞
サイドの緑色部分...サイド＜aside＞
下部の黄色い部分...フッター＜footer＞

ヘッダー部分を作る＜header＞タグ

ページ上部の要素を囲みます。多くの場合、ロゴ画像や、ページタイトル、ナビゲーションメニューなどが含まれます。HTMLファイルの冒頭に記述するhead要素とは異なるものなので気を付けましょう。
ヘッダー全体コード例
<header>
        
        <img src="img/logo.jpg" alt="ロゴ画像">

        
        <nav>
            <ul>
                <li><a href="#">HOME/</a></li>
                <li><a href="#">ログイン/</a></li>
                <li><a href="#">お問い合わせ</a></li>
            </ul>
        </nav>
</header>
ナビゲーションメニューを作る＜nav＞タグ

メインのナビゲーションメニューを囲みます。＜nav＞タグは＜header＞タグの中に含まれることが多くあります。基本的にメインではないメニュー部分には使いません。

今回の場合ですと、ヘッダーの右部分がナビゲーションメニューです。
ナビゲーションメニュー
        
        <nav>
            <ul>
                <li><a href="#">HOME/</a></li>
                <li><a href="#">ログイン/</a></li>
                <li><a href="#">お問い合わせ</a></li>
            </ul>
        </nav>
メインコンテンツ部分を作る＜main＞タグ

ページの核となるコンテンツ全体は＜main＞タグで囲みます。この中には様々なグループが入ることも多々あります。
メインコンテンツ
<main>
    <article>
        <h2>HTMLの基本的な書き方をマスターしよう</h2>
        <p>HTMLの基本的な書き方を身に着けよう
            今回はWebページの土台となるファイルを作成する言語であるHTMLにフォーカスしていきます。
            HTMLをどんなルールで書きすすめていくのか、また書き方について見ていきます。
            ※プロジェクトとHTMLファイルは作成済みとします。
            こちらの記事でHTMLのファイルを作成しました↓
            HTML/CSS/JSデモ
        </p>
    </article>

    <section>
        <h2>その他おすすめ記事</h2>
        <ul>
            <li><a href="#">初心者に優しいAndroidアプリの公開の手順、初めてのリリースに大苦戦⁈</a></li>
            <li><a href="#">初めてのチーム制作!!コード管理編～EclipseでGitHubを使いこなそう～</a></li>
        </ul>
    </section>
</main>
メイン部分全体のコードを＜main＞タグで囲っています。
メイン部分を細かく見ていきましょう。

読み物、記事部分を作る＜article＞タグ

「article」は英語で「記事」を意味します。そのため、HTMLでもページ内の記事となる部分、そこだけ見ても独立したページとして成り立つような内容には＜article＞タグが使われます。ニュースサイトや、ブログサイトの記事部分をイメージしてもらうとわかりやすいです。
メイン記事部分
     <article>
        <h2>HTMLの基本的な書き方をマスターしよう</h2>
        <p>HTMLの基本的な書き方を身に着けよう
            今回はWebページの土台となるファイルを作成する言語であるHTMLにフォーカスしていきます。
            HTMLをどんなルールで書きすすめていくのか、また書き方について見ていきます。
            ※プロジェクトとHTMLファイルは作成済みとします。
            こちらの記事でHTMLのファイルを作成しました↓
            HTML/CSS/JSデモ
        </p>
    </article>
テーマを持ったグループを作る＜section＞タグ

＜section＞は意味のあるグループをまとめるためのタグです。＜article＞タグと似てますが、記事とは異なり、その部分だけ見ても完結しません。そのひとかたまりに1つのテーマがあるということが重要です。
テーマを持ったグループ
    <section>
        <h2>その他おすすめ記事</h2>
        <ul>
            <li><a href="#">初心者に優しいAndroidアプリの公開の手順、初めてのリリースに大苦戦⁈</a></li>
            <li><a href="#">初めてのチーム制作!!コード管理編～EclipseでGitHubを使いこなそう～</a></li>
        </ul>
    </section>
メインコンテンツではない、補足部分を作る＜aside＞タグ

本文ではない補足部分は＜aside＞タグで囲みます。この例ではサイドバーに＜aside＞タグを使っています。作者の自己紹介などが載っていることが多いです。
補足部分
<aside>
    
    <img src="img/face.jpg" alt="">
    <h3>作者ってこんな人</h3>
    <p>1995年生まれ、神奈川県出身
        好きな食べ物はラーメン。
        趣味はジムで筋トレすること。
        プログラミングを始めて1年未満。
    </p>

    
    <form method="get" action="">
            <input type="text" size="25" placeholder="キーワード検索">
            <input type="submit" value="&#xf002">
    </form>

    
    <h2>カテゴリー</h2>
        <ul>
            <li><a href="#">Java</a></li>
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">Android</a></li>
            <li><a href="#">Github</a></li>
        </ul>
</aside>
フッター部分を作る＜footer＞タグ

ページ下部にある部分を囲みます。多くの場合コピーライトやSNSリンクなどを含んでいます。
フッター部分
<footer>
        <p>Copyright 2020 Yuriko</p>
        <ul>
　　　　　　　　<li><a href="https://twitter.com"><i class="fa fa-twitter"></i></a></li>
　　　　　　　　<li><a href="https://facebook.com"><i class="fa fa-facebook"></i></a></li>    
        </ul>
</footer>
ちなみに＜i＞タグは本来イタリック体にするタグですが、ここでは、SNSアイコンを入れるのに使用しています。CSSの勉強の際に、アイコンの入れ方を学びます。

意味を持たないブロック要素を作る＜div＞タグ

ここまでは、なんらかの目的を持ったブロック要素を紹介しました。しかし、中にはどの用途にも当てはまらなかったり、デザインのためだけにグループ化する必要がある場合があります。そんな時使えるのが＜div＞タグです。とにかくひとまとめにしたいが、どれが適切わからないといった場合に使えます。

最後に

Webページのグループ分けや大まかな構成についてなんとなく理解できたのではないでしょうか。次回からは、CSSをやっていきますが、今回の記事のレイアウトやグループ分けが重要になってきますので、しっかり復習しておきましょう

　 Tweet
Qiitaで続きを読む

投稿日：2020-03-28T19:00:02+09:00

100日後にエンジニアになるキミ - 8日目 - HTML - HTMLの基礎3

本日もHTMLの続きです。

前回はHEAD要素で用いられるタグについてやりましたので
今回はBODY要素で用いられるタグについて説明します。

bodyタグ

<body>コンテンツ</body>

HTML の <body> 要素は
HTML 文書のコンテンツを示す要素です。

<body> 要素は文書中に一つだけ配置できます。

<body>要素を書くのに<body>タグを用います。

その中に加えられる要素がコンテンツそのものになります。
<body>
    <p>見出しなど</p>
</body>
<body>要素はその構成から以下のような部分に
分けることができます。

ヘッダー部
サイトの上部に配置される部分。
メニューやリンクなどを配置することが多い。

コンテンツ部：
コンテンツサイドバーなどを表示させて
複数カラムで構成されるサイトのメインコンテンツ。

フッター部：
サイトの下部に配置される部分。
コピーライトや連絡先などを配置することが多い。

ヘッダータグ

<header></header>

html5から追加されたタグで
サイトの上部にヘッダーメニューを配置する場合に用いるタグ。
headタグとは全くの別物なので、混同しないようにしましょう。

<header>タグを用いなくてもHTMLとしては問題ありませんが
見栄えや使い勝手の良いサイトを作りたい場合は
header部分を分けておく方が得策です。
<header>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="navbar-inner">
      <div class="navbar-header">
        <h1 class="navbar-brand"><a href="http://x.com">x</a></h1>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="http://x.com/contact">お問い合わせ</a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>
header部にはたくさんのメニューを配置できます。
メニューごとにタグを配置していきますので
インデント(字下げ)してソースコードを分かりやすくしておきましょう。

フッタータグ

<footer></footer>

HTML5から追加されたタグで
webサイトの最下部に配置し、サイト情報や著作権注記などを加えたい場合に
よく用いられます。
<footer>
  <div class="footer-inner">
    <div class="footer-top">
      <div class="row">
        <div class="col-sm-4 col-xs-6">
          <h4>MENU</h4>
          <ul><li><a href="http://x.com/about">メディア</a></li>
            <li><a href="http://x.com/ads">広告掲載</a></li>
            <li><a href="http://x.com/con">お問い合わせ</a></li></ul>
        </div>
      </div>
    </div>
  </div>
</footer>
<header>タグと同じく用いなくても良いものですが
大手のサイトではほとんど存在しますので
押さえておいたほうがよいでしょう。

見出しタグ

<h1> ~ <h6>

見出しを書くために使用するタグです。

<h1>が一番大きな文字となり
サイトのメインとなるような見出しに使用します。

<h2>～<h6>というように数値が増えるほど小さな見出しになります。
<h1>h1の見出し</h1>
<h2>h2の見出し</h2>
<h3>h3の見出し</h3>
<h4>h4の見出し</h4>
<h5>h5の見出し</h5>
<h6>h6の見出し</h6>
見出しは検索エンジンの最適化(SEO)などで重要な役割を持つタグとなり
数値の小さい方の見出しタグの方がそのページにとって重要と認識されます。

見出しの配置や個数なども重要な関わりを持つので
文字を大きくしたいから使用するなど、
むやみに使用するのは得策ではありません。

Googleなどの検索エンジンなどにとって好ましい見出しのつけ方を
する必要があります。

コンテンツにとって、より重要なキーワードを含む部分などに使用し
読みやすいコンテンツになるように利用してみましょう。

段落タグ、改行タグ

<p></p>
<br>

<p>タグは段落を作るために使用するタグです。
<p>What does that mean?
This is a pen.</p>
<p>The pen is a pen but a shaun pen</p>
What does that mean? This is a pen.

The pen is a pen but a shaun pen

HTMLでは打ち込んだ文字列はそのまま反映されますが
改行を行うには、タグを用いなければなりません。

タグによる改行がない場合
全て1行で表示しようとしてしまいます。

<br>タグはこのタグの後すぐに改行を行います。
<p>What does that mean? <br>This is a pen.</p>
What does that mean?
This is a pen.

<br>タグは文章の途中で改行表示されるため
使い分けることが必要になります。

イメージタグ

' < img>'

画像を貼り付ける際に使用します。
終了タグは不要です。
<img src="./img_1.png" width="120" height="100" alt="img1" border="2">
src属性で画像のパスを指定します。
絶対リンクか相対リンクを指定し、外部サイトの場合は画像のURLを指定します。

画像の配置や大きさの設定などは属性値を用いるかCSSなどで行うことができます。

width属性
画像の横幅を指定

height属性
画像の高さを指定

alt属性
画像が表示できない時に代わりに表示するテキストを指定

border属性
画像の枠線の幅を指定

そのほかの注意点として
画像は静止画として表示できるものを指定します。

ファイルの拡張子がGIF,JPG,PNGなどの画像ファイルを指定できます。

GIF : 可逆圧縮、簡単な動画なども扱える
JPG : 非可逆圧縮、ファイルサイズを小さくするならこれ
PNG : 可逆圧縮、透過などが使える、ファイルサイズが大きい

動画タグ

<video></video>

HTML5で追加された動画を配置するためのタグになります。

<source>タグ　もしくは
src属性で動画のパスを指定します。
imgタグなどと同じ指定です。
<video controls autoplay poster="sample.jpg" width="320" height="240">
<source src="sample.mp4">
    <p>動画を再生するにはvideoタグをサポートしたブラウザが必要です</p>
</video>
そのほかの属性としては

poster属性
サムネイル画像を表示

preload属性
動画をあらかじめ読み込む（auto、metadata、none）

autoplay属性
動画を自動再生

loop属性
ループ再生を指定

controls属性
インターフェースを表示

width属性
横幅を指定

height属性
高さを指定

動画の形式はmp4 , ogv , webmなどの拡張子のファイルを指定できます。

mp4 : ビデオやオーディオによく用いられ、字幕や静止画なども格納できる,MPEG-4規格の一部
ogv : マルチメディア用のファイルフォーマット
webm : Googleが開発しているオープンでロイヤリティフリーな動画フォーマット

アンカータグ

<a></a>

ほかのページへのリンクを貼るために使用するタグ。
タグ内にはリンクを貼り付けたいテキストや画像を入れます。
<a href="a.shtml">相対パスリンク</a>
<a href="http://sample.com/a.html">絶対パスリンク</a>
<a href="../index.html">ひとつ上のディレクトリ</a>
href属性にはリンク先を書きます。
絶対リンクか相対リンクを指定し、外部サイトの場合は画像のURLを指定します。

他にも

width属性
画像の横幅を指定

height属性
画像の高さを指定

alt属性
画像が表示できない時に代わりに表示するテキストを指定

border属性
画像の枠線の幅を指定

などの属性があります。

リストタグ

<ol></ol>
<ul></ul>
<li></li>

コンテンツのリスト表示を作る際に使用するタグです。
それぞれの役割としては

<ol>タグ : ordered list , 順番有リストを作成する際に使用
<ul>タグ : unordered list,順番無リストを作成する際に使用
<li>タグ : list item , <ol></ol>,<ul></ul>内に記述

<ol><ul>タグの属性情報としては
type属性がありマークの指定を行えます。
ol(I , 1 , A , a)
ul(disc , circle , square)
<ol type="A">
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ol>
A.項目1
B.項目2
C.項目3
<ul type="circle">
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ul>
○ 項目1
○ 項目2
○ 項目3

マークや数字などは<li>タグに自動で付与されます。

Divタグ , Spanタグ

<div></div>
<span></span>

divもspanもタグ自体には特別な機能はありません。

ただし、この囲むことでデザインを切り替えることが出来るため
HTML上では多用されます。
これは<div>例文</div>です<BR>
これは

例文
です
これは<span style="background-color: #0099FF">
例文</span>です
<div>と<span>の違いです

1.<div>はCSSで幅と高さを指定できる , <span>は反映されない
2.<div>はまとまりの後に改行有り , <span>は前後に改行なし
3.<div>タグの中に<span>タグは入れるが , 普通は<span>の中にdivを入れない

ということが挙げられます。

<div>はブロック要素のため大きなまとまりに使用し
<span>はインライン要素のため小さなまとまりで使用する、といった感じで使い分けます。

<div>と<div>で使用できるタグ

<div> : なんでも(div,p,h1-6,ul, ol,li,span,img,strong,em, etc)
<span> : span , a , img など

タグの中で使用するタグにも少し違いが出てくるので、使い分けを意識しながら
書くのが望ましいと思います。

テーブルタグ

<table></table>

表を作るのに用いられるタグです。
表の大枠は<table>で定義し
行と列は<tr>,<th>タグで定義します。

<tr> table row,テーブルの行に使用
<td> table data,テーブルのセルに使用
<th> table header,テーブルの見出しセルに使用
<table border="1" width="500">
    <tr><th bgcolor="#EE0000">メニュー</th>
    <th bgcolor="#EE0000" width="150">説明</th></tr>
    <tr><td bgcolor="#99CC00">カルボナーラ</td>
    <td bgcolor="#FFFFFF"">玉子とベーコンのパスタ</td></tr>
    <tr><td bgcolor="#99CC00">ペスカトーレ</td>
    <td bgcolor="#FFFFFF" width="150">エビとあさりのパスタ</td></tr>
</table>
<tr> タグを先に用いて行を作り
列数は<th>,<td>タグの個数で決めます。

<th>タグはヘッダー部(1つ目)にのみ使用します。

tableは子要素として

<thead>,<tbody>,<tfoot>を<table>の子要素として指定できます。

また<tbody>は複数指定できます。

属性値としては以下のようなものがあります。

border属性
外枠線の幅を指定

bgcolor
テーブルの背景色を指定

width
テーブルの横幅を指定

height
テーブルの縦幅を指定

align
テーブルの揃えを指定(left , center , right)

background
テーブルの背景画像を指定

bordercolor
枠線の色を指定

cellpadding
セルの枠と文書の間隔を指定

cellspacing
セルの枠の幅を指定

フォームタグ

<form></form>

入力フォームなどを作成するタグです。
<form action="sample.cgi" method="post">
    一行入力<input type="text"><BR>
    選択肢<select name="blood">
    <option value="A">A</option>
    <option value="B">B</option>
    </select><BR>
    複数行入力<textarea rows="4" cols="40"></textarea><BR>
    <input type="submit" value="送信">
    <input type="reset" value="リセット">
</form>
フォーム内では様々なタグを使用できます。

<INPUT> : 入力部品を作成 , type属性で形式を変えられる
<SELECT> : セレクトボックスを作成
<TEXTAREA> : 複数行入力を作成

formの属性情報には以下のようなものがあります。

action="URI"
送信先プログラムのURIを指定

method="HTTPメソッド"
送信の際の転送方法を指定

enctype="MIMEタイプ"
送信の際のデータ形式を指定

accept-charset="文字セット"
文字コードを指定

accept="MIMEタイプ"
受けてで処理可能なMIMEタイプを指定

name="名前"
名前を指定

target="フレーム名"
送信結果を表示するフレームかウィンドウ名を指定

次はフォーム内で使えるタグについてです。

インプットタグ

<input>

テキスト入力やボタンなどを作成するタグです。
type属性の値で入力形態を指定します。
<form action="sample.cgi" method="post">
    パスワード<input type="password"><BR>
    チェックボックス<input type="checkbox" name="a" value="1">1
    <input type="checkbox" name="a" value="2">2<BR>
    ラジオ<input type="radio" name="1" value="1">1
    <input type="radio" name="1" value="2">2<BR>
    ファイル<input type="file">隠し要素<input type="hidden"><BR>
    ボタン<input type="button">画像ボタン<input type="image"><BR>
</form>
指定できるtype属性は以下の通りです。

type="text" : 1行テキストボックス
type="password" : パスワード入力ボックス
type="checkbox" : チェックボックス,checked属性指定で初期チェックがつく
type="radio" : ラジオボタン , checked属性指定あり
type="file" : 送信するファイルを選択
type="hidden" : 隠しデータ送信に使用,画面に表示されない,valueの値を送信
type="submit" : 送信ボタン
type="reset" : リセットボタン , 入力した情報を初期状態に戻す
type="button" : 汎用ボタン
type="image" : 画像のボタン , 画像ファイルはsrc属性で指定

inputタグを使うにはformタグが必要で閉じタグは不要です。

セレクトタグ,オプションタグ

<select>

セレクトボックスを作成するタグです。
選択項目は別途<option>タグで指定をします。
<select>タグを使うにはformタグが必要です。
<form action="sample.cgi" method="post">
    選択肢<select name="blood">
            <option value="A">A</option>
            <option value="B" selected>B</option>
            <option value="C" disabled>C</option>
    </select><BR>
</form>
<select>の属性情報は
name="名前" で名前を指定します。

<option>タグは、選択項目を指定するタグで
値とテキストをセットにして使います。

<option>の属性情報は
value="値" : 値を指定
selected : 初期選択状態となる
disabled : 選択できなくなる

などがあります。

valueに指定するものと、タグの要素に書くものは別でも大丈夫です。
javasciprtなどで取得する値になるので、きちんと指定をしておきましょう。

IFRAMEタグ

<iframe></iframe>

サイトに別ウィンドウを作成しインラインのフレーム表示をさせることができます。
他サイトの内容なども表示させることができます。
<iframe width="500" height="300" 
    src="https://www.youtube.com/embed/nIMPBlEJAsg" 
    frameborder="0" allow="accelerometer; autoplay; 
    encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen>
</iframe>
Youtube動画などを貼り付けたりする際にも用いたりします。

特殊記号について

タグを書く際には　<　>　などを用いているため
大なり小なり記号を書くと、タグとして認識されてしまいます。

ソースコードを書く際に、特定の文字を書きたい場合
代わりとなる文字を書かないと反映させることができないものがあります。

特殊記号は以下です。
&amp;    アンパサンド
&lt;     小なり
&gt;     大なり
&quot;   ダブルクォーテーション
&nbsp;   空白
&copy;   コピーライト
ソースコードに上記のような特殊記号を打ち込みすると
画面を見た際には元の記号で反映されます。

まとめ

BODY要素で使用できる様々なタグを試して
どのような表示になるのかを確かめておこう。

開始タグ、終了タグがあるものは
忘れないように終了タグで閉じておこう。

君がエンジニアになるまであと92日

作者の情報

乙pyのHP：
http://www.otupy.net/

Youtube：
https://www.youtube.com/channel/UCaT7xpeq8n1G_HcJKKSOXMw

Twitter：
https://twitter.com/otupython

　 Tweet
Qiitaで続きを読む

投稿日：2020-03-28T17:18:53+09:00

画像を右クリック→「TinyPNGで圧縮」を実現する

完成形

圧縮用のコマンドをインストール

タイトルでは分かりやすいよう「TinyPNG」と書きましたが、実際にはTinyPNGが使っている「pngquant」というコンプレッサーを使います。

インストール
$ sudo apt install pngquant
使い方

下記オプションで圧縮＆上書きします
$ pngquant --ext .png --force filename.png
アルファチャンネルありのPNGでも綺麗！

Original (239.8kB) Compressed (51.9kB)

コンテキストメニューを拡張

Ubuntu 18
$ sudo add-apt-repository ppa:daniel-marynicz/filemanager-actions
$ sudo apt update
$ sudo apt install filemanager-actions-nautilus-extension
Ubuntu 19以降
$ sudo apt-get install filemanager-actions
FileManager-Actionsでアクションを作成

色々項目がありますが、新規作成後、「Command」タブで実行したコマンドを設定すればひとまず動作します。

↓*.pngファイルを右クリックしたときだけに限定します。

ファイルマネージャーで*.pngファイルを右クリックしてみましょう。

FileManager-Actions actionsというメニューでラッピングされてPNGで圧縮が追加されているはずです。

出てこない場合は再起動が必要と思われます。

FileManager-Actions actionsのラッピングを取り除きたい場合、Edit > Preferences から Create a root 〜 を無効にしましょう。

参考

https://qiita.com/thanks2music/items/309700a411652c00672a
https://askubuntu.com/questions/1049111/add-open-with-vscode-to-context-menu-in-ubuntu

　 Tweet
Qiitaで続きを読む

投稿日：2020-03-28T15:39:29+09:00

ヘッダーを途中から固定させたい！

概要

ポートフォリオサイト作成時、
スクロールしてヘッダーを途中から固定させたいと思い実装していたのですが、
なかなか上手くいかなかったので備忘録としてまとめます。

おかしなところあったらご指摘ください・・・

条件

ビューはHamlで記載
jQuery導入済み

Html

スクロールしてtop-visualを過ぎた後にheaderが固定されるイメージです。

index.html.haml

.top
  .top-visual
    .top-visual__movie-area
      = image_tag "top-image"
  .header
    .header__line
      .header__nav-bar
        .header__container
          .header__title
            My portfolio
          .header__nav-area
            %ul.header__nav-lists
              %li.header__nav-item
                = link_to "HOME", "#"
              %li.header__nav-item
                = link_to "ABOUT", "#"
              %li.header__nav-item
                = link_to "WORKS", "#"
              %li.header__nav-item
                = link_to "SERVISE", "#"
              %li.header__nav-item
                = link_to "CONTACT", "#"
  .main
    .main-content

CSS

index.scss

.fixed {
  // 本来であれば「position: fixed」の「!important」は不要です。
  // 上手く固定されないときは試してみてください。
  position: fixed !important;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  color: #fff;
  margin-bottom: 100px;
  background-color: #1A1A1A;
}

.header{
  // position: absoluteを指定しないと固定させるときにガクンとビューが崩れます。
  position: absolute;
  height: 50px;
  width: 100%;
}

jQuery

index.js

$(function() {
    var $win = $(window),
        $main = $('main'),
        $nav = $('header'),
        navHeight = $nav.outerHeight(),
        navPos = $nav.offset().top,
        fixedClass = 'fixed';

    $win.on('load scroll', function() {
      var value = $(this).scrollTop();
      if ( value > navPos ) {
        $nav.addClass(fixedClass);
        $main.css('margin-top', navHeight);
      } else {
        $nav.removeClass(fixedClass);
        $main.css('margin-top', '0');
      }
    });
  });

完成

CSSとJSは奥が深い・・・！引き続き精進してまいります・・・！

　 Tweet
Qiitaで続きを読む

投稿日：2020-03-28T11:54:10+09:00

Bootstrap縛りで制作するポートフォリオ #1

今回は、この時期にあるといいポートフォリを制作していきます。その際、普通に使うのでは面白くないので、Bootstrapを導入して実装するという縛りで実装していきます。

本来ポートフォリオにはフレームワークなどをどんどん取り入れてくのは良くないと個人的には思います。というのも自身のコードでないとその実力ははかりえないので。。。ということで今回はポートフォリオの簡単な作成の流れとBootstrapの簡単な使い方を紹介することを意図しています。

はじめに

まずは、簡単なレイアウトを決めていきます
このポートフォリオは、誰も依頼したわけでも〜な機能を必要ともされていません。それ故に、自分で決めなければいけません。ではどこで判断基準になるのでしょうか？　

UXが全て

実際にそのサイトをみてどの様に印象を持たせるかが、このポートフォリオで一番大切な点です。
~の機能がないとかは判断されませんが、ある程度の機能があった方がその評価は高くなります。

レスポンシブデザインは行なっているか

今の時代、サイトにアクセスするユーザの大半がスマートフォンからのアクセスです。つまりそのサイトにアクセスする人もPCではなく、画面表示領域の少ないスマートフォンであるかもしれません。
どんなに、hoverされた時のデザインにこだわっていてもスマホではその効果は発揮できないと言っても過言ではありません。
いくら見た目にこだわった、タブメニューを実装してもスマホで押しやすくなければ意味の無いということです。

ブレイクポイントについて

それでは、モバイルデザインを行う上で、必要となってくるメディアクエリ
ブレイクポイントを指定することにより、どの画面表示領域からそのデザインを行うかを指定することができます。
Bootstrapの場合は、デフォルトで4つのブレイクポイントが指定されています。

画面横幅 class名

576px768px以下(スマホ) col-xs-

768px以上992px未満 cos-sm-

992px以上、1200px未満 col-md-

1200px以上 col-lg-

この768pxというブレイクポイントに関してはiPad（横画面）の画面表示領域を表しています。最近のiPadではある程度画面表示領域も多くてスマホと同じスタイリングを行うべきでは無いと思います。

自前で実装する場合はここまでなくても良いかと思います。
smallスクリーンとmidiumスクリーンの二つで今回は実装していきます。

それでは、ある程度決め終わったので次回から作成していきます。

画面横幅	class名
576px768px以下(スマホ)	col-xs-
768px以上992px未満	cos-sm-
992px以上、1200px未満	col-md-
1200px以上	col-lg-

　 Tweet
Qiitaで続きを読む

投稿日：2020-03-28T11:09:43+09:00

div要素を横並びにしたいがdisplay: flexが効かない原因

ドットインストールで学習中です。
div要素を横並びにするために
display: flex;
を記述しましたが、効いていないようです。

div要素が横並びにならない原因が分かる方いましたら指摘して頂けるとありがたいです。
よろしくお願いします。

以下が全体のコードです。

<!DOCTYPE html>

JaveScript Practice
<script>
  'use strict';

  const target1 =  document.getElementById('target1');
  const target2 =  document.getElementById('target2');
  const target3 =  document.getElementById('target3');

  target1.addEventListener('click', () => {
    target1.classList.toggle('circle');
  });
  target2.addEventListener('click', () => {
    target2.classList.toggle('circle');
  });
  target3.addEventListener('click', () => {
    target3.classList.toggle('circle');
  });
</script>

　 Tweet
Qiitaで続きを読む

投稿日：2020-03-28T09:01:51+09:00

PHPでポートフォリオ作成：カレンダー

記事の概要

作った背景、工夫したところ、機能をまとめました。

下にコードを記載しました。

背景

一般的なカレンダー（家の壁にかかっているものを想像してほしいです）を作成したときに、自分のスケジュールを書き込めると、カレンダーとしての価値がアップするのでないかなと思い作成にいたりました。

エクセルのようなレイアウトで日付とスケジュールを同時に表示するようなカレンダーを作成します。

工夫としては、当たり前ですが見た目を分かりやすく、使用者が使いやすいようにシンプルにしました。

目的

・PHPを用いて簡単なアプリケーションを作る
・見やすくて使いやすいアプリを作る
・カレンダー機能+スケジュール機能で単純なカレンダーに価値をつける

スペック

言語
PHP 7.4.2
データーベース
MariaDB 10.4.11
開発環境
Apache　2.4.41

ビジュアルスタジオコード使用

主な機能

・今月の日付の表示機能
・来月、前月のカレンダーへのリンク
リンクをクリックすると、来月もしくわ前月のカレンダーに飛びます

・スケジュールの表示機能
カレンダーの日付の横にスケジュールの時間と内容を表示する

・スケジュールの保存機能
日付、時間、スケジュールという情報をデータベースに保存する

・スケジュールの更新機能
スケジュールを更新する

・スケジュールの削除機能
スケジュールを削除する

※データベースのカラムの情報があると説明しやすいので、詳しくは下部で説明します。

開発手順

1、要件定義
2、環境選定
3、データベース設計
4、設計
5、コーディング

1、要件定義

今回のアプリでの主要な機能は
・今月の日付の表示
・スケジュールの表示
・スケジュールの保存、更新、削除

今月の日付が表示できるということは、月（month）の部分を変更することで来月、前月のカレンダーが表示可能になります。
ということは、すべての日付のカレンダーが作成可能になります。

スケジュールの保存には、データベースが必要です。

環境選定

PHP,MySQL,apacheを使用。

Windowsローカル上に環境を構築しました。

データベース設計

記入例

id day time 　 message 　

5 2018-12-15 18:00 予定を書く

スケジュールの情報をデータベースに保存。
スケジュールの情報としては
id,day,time,messageとして
idにはオートインクリメントを設定して、idの値がかぶることはないようにしました。
dayには2020-03-27の形式で年月日を保存
timeにはtextタイプなので時間の表現の仕方は自由です
messageにはスケジュールの内容を保存します

設計

のちほど追加予定

　5.コーディング

設計を書いたのですが、後々変更することは多かったです。
理由は、コーディングしていて「このように表示する方が使用者にとっては、使いやすいのではないか」という考えの結果、レイアウトの変更をしました。

5.1データベース作成

ローカル環境のMysqlサーバーに
データーベースを作成。テーブルを作成。

5.2データベース接続確認

PDOを用いて、データーベースの接続。
try~catchを用いて、成功しているか判断

5.3今月の日付の表示機能

urlに?t=2020-04のような表記があれば、その年月（この場合2020-03）で取得し、表記がなければ今月の年月を取得する
これで、年月日の年月の情報を取得したので、年月の情報からDatePeriodを使って、年月日における日の部分の情報を取得します。
これで年月日の情報がそろったのでエクセルや表のような形式で表現します

5.4・来月、前月のカレンダーへのリンク

リンクをクリックすると、来月もしくわ前月のカレンダーに飛びます

5.3にて年月日の情報を取得しています。なのでリンクをその月（month）に+1すれば翌月、-1すれば前月へ飛ぶように設定しました。

5.5スケジュールの表示機能

カレンダーの日付の横にスケジュールの時間と内容を表示する

if文で取得している年月日とデータベースにあるdayの部分で一致するレコード（行部分）が存在したら、そのレコードのスケジュール時間と内容を日付の横に表示する

5.6スケジュールの保存機能

日付、時間、スケジュールという情報をデータベースに保存する
この時、日付の形式が2020-03-27のような形式でない場合はerrorとし
errorが存在する場合はエラーメッセージを表示する

5.7スケジュールの更新機能

スケジュールを更新する

構造上、日付1つに対して1つのメッセージになるため、
更新機能を使う場合、既存のスケジュールの情報を削除してから、また新しくスケジュールをデータベースに保存する方法を使用

※1つの日付に対して、複数のメッセージがある場合はidが新しいメッセージが表示される。
※また、ある日付に対してメッセージが存在するにも関わらず、メッセージを作成した場合は、メッセージは既存のメッセージが表示されるので、新しく作ったmemberテーブルは表示されない

5.8スケジュールの削除機能

スケジュールを削除する

削除ボタンを作って、削除を実行する
この時、日付に該当する箇所を変更した場合、その日付のメッセージが削除される。

5.9レイアウト

新しくスケジュールを作る機能はアイコンにして、右上に固定しました。
これは、下にスクロールしたとしても、スケジュール作成できるためです
配色の統一、シンプルにわかりやすいをこころがけました

課題点

・「1つの日付に対して、1つのスケジュール」でなく複数のスケジュールを表示すべきだが、技術的にできなかった。
・わかりやすく,シンプルに作ったつもりであるが、その分、説明不足で慣れれ宇までに時間がかかる可能性がある
・スケジュールの保存に関して、使用者の制約があり親切でない、
1999-03-20のような形式でなくタイプをradio形式（複数の選択肢から1つを選択する形式）で年、月、日に分けて表現すれば良かったかもしれない。
・スケジュールの削除に関して、入力されている年月日のデータの削除があることを説明していない
・オブジェクト思考がなってない。機能を別ファイルでプログラミングして、呼び出すことができてない

code

index.php
画像
index.php
<?php 
require('dbconnect.php');

//セキュリティ対策
function h($s){
  return htmlspecialchars($s,ENT_QUOTES,'UTF-8');
}
//

//今月を取得する
try{
if(!isset($_GET['t']) || !preg_match('/\A\d{4}-\d{2}\Z/',$_GET['t'])){
  throw new Exception();
}
  $thisMonth=new DateTime($_GET['t']);
}catch(Exception $e){
  $thisMonth = new DateTime('first day of this month');
}


//今月から来月と翌月を取得する
  $dt= clone $thisMonth;
  $prev = $dt->modify('-1 month')->format('Y-m');
  $dt= clone $thisMonth;
  $next=$dt->modify('+1 month')->format('Y-m');
//


$yearMonth=$thisMonth->format('F Y');

//日付、メッセージの表示機能
  $period=new DatePeriod(
    new DateTime('first day of'.$yearMonth),
    new DateInterval('P1D'),
    new DateTime('first day of'.$yearMonth.'+1 month')
  );

  //複数のメッセージをつけたいがつけれなかった
  $body='';
  $today=new DateTime('today');
  foreach($period as $day){

    $messages=$db->prepare('SELECT * FROM posts WHERE day=?');
    $messages->execute(array($day->format('Y-m-d')));
    $message=$messages->fetch();

    $todayClass=($day->format('Y-m-d') === $today->format('Y-m-d'))?'today':'';
    $body .= sprintf('<tr><td class="youbi_%d %s">%d</td><td>%s</td><td class="message"><a   href="message.php?t=%d-%02d-%2d">%s</a></td></tr>',$day->format('w'),$todayClass,$day->format('j'),$message['time'],$day->format('Y'),$day->format('n'),$day->format('d'),$message['message']);
  }
//




//cssでのレイアウト
//オブジェクト思考


//終了。前月次月のリンク.todayのリンク,データベースに保存する
//今日を太文字、土日は色変える,時間の指定もあり、消去、変更

?>



<!DOCTYPE html>
<html lang='ja'>
<head>
  <meta charset='utf-8'>
  <title>カレンダー</title> 
  <link rel='stylesheet' href='styles.css'>
</head>
  <body>
      <a class='write' href="message.php" name='write_message'><img  src="write.png"  alt="写真"></a>
    <table>
      <thead>
        <tr>
          <th><a href="/test/index.php?t=<?php echo h($prev); ?>">&laquo;</a></th>
          <th><?php echo $yearMonth; ?></th>
          <th><a href="/test/index.php?t=<?php echo h($next); ?>">&raquo;</a></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>day</td>
          <td>time</td>
          <td>message</td>
        </tr>   
        <?php echo $body;?>
      </tbody>
    </table>
  </body>
</html>
message.php
画像
message.php
<?php
require('dbconnect.php');


//入力機能は取得して、それをインサートするだけ

if(!empty($_POST)){
    //すでにメッセージが存在する場合、そのメッセージを消去する
    //先に消去をおした場合にはメッセージを消去してexitする
    if($_POST['delete'] ==='1'){
      $deletes=$db->prepare('DELETE FROM posts WHERE day=? ');
      $deletes->execute(array($_POST['day']));
      header('Location:index.php');
      exit();
    }


    if(!empty($_POST)){

      $posts=$db->prepare('SELECT * FROM posts WHERE day=?');
      $posts->execute(array($_POST['day']));
      $post=$posts->fetch();

      if(!empty($post['message'])){
      $deletes=$db->prepare('DELETE FROM posts WHERE day=? ');
      $deletes->execute(array($_POST['day']));
    }


  //日付の設定はシビアで形式が決まっているので、形式が違えばエラーをだす
  if( preg_match('/\A\d{4}-\d{2}-\d{2}\z/',$_POST['day'])){
    $message=$db->prepare('INSERT INTO posts SET day=? ,message=?,time=?');
    $message->execute(array(
      $_POST['day'],
      $_POST['message'],
      $_POST['time']
    ));

    header('Location:index.php');
    exit();
  }else{
    $error['day']='format';
  }

}


}
//messageの再取得、
  $messages=$db->prepare('SELECT * FROM posts WHERE day=?');
  $messages->execute(array($_REQUEST['t']));
  $message=$messages->fetch();

?>
<!DOCTYPE html>
<html lang='ja'>
<head>
  <meta charset='utf-8'>
  <title>カレンダー</title> 
  <link rel='stylesheet' href='styles.css'>
</
head>
  <body>
    <div class='title'>
      <a href="index.php"><<　ホーム</a>
    </div>
    <div class='content'>

      <form action="" method='post'>
        <p class='delete_p'>メッセージを消去＞＞<button type='subimt' class='delete'  name='delete' value='1'>消去</button></p>
        <p >日付　（※2020-01-01の形式で入力してください）</p>
        <input name='day' type="text" value="<?php echo $_REQUEST['t'];?>" >
        <?php if($error['day'] === 'format'): ?>
          <p class='error'>※2020-01-01の形式で入力してください。</p>
          <?php endif;?>
          <p>時間</p> 
          <input name='time' type="text" value='<?php echo $message['time'] ?>'>
          <p>メッセージ</p>

          <textarea name="message" id="" cols="30" rows="10" ><?php echo $message['message']; ?></textarea>
          <button type='submit'>メッセージを保存する</button>




    </div>
  </form> 

  </body>
</html>

id	day	time	message
5	2018-12-15	18:00	予定を書く

　 Tweet
Qiitaで続きを読む

投稿日：2020-03-28T05:19:36+09:00

ブログをはじめるならGitHub Pagesがおすすめ

ブログをやるならGitHub PagesかGitLab Pagesがおすすめです。

私は、少し前にGitLabでブログをやっていましたが、その後、GitHubに移行したというか、戻りました。経緯としてはGitHub -> GitLab -> GitHubという流れです。

syui.github.io

割と長くGitHub PagesやGitLab Pagesでブログをやってきたので、今回は、両者の違いをまとめてみます。

GitLabはプライベートリポジトリが無制限で、HTMLソースを公開しなくていい

Web Serverは、GitHubのほうが安定していて速い

GitLabのほうがドキュメントが充実しており、公式テンプレートがわかりやすい

どちらもCIを回せるけど、GitLabはGitLab CIを回して、public/にビルドするという形態と採用するため、CIが成功しないとページが公開、更新されない。ユーザーが.gitlab-ci.ymlを書く必要がある

GitHub PagesはデフォルトでJekyll Buildを実行しページが公開される仕組み。ただし、リポジトリルートに.nojekyllを置くことでJekyll Buildを実行しないオプションも存在する。よって、HTMLを直に置いてページを作ることもできる

GitHubは、${USER}.github.ioというリポジトリ名を作成することで、当該ドメインが与えられる。branch:masterにHTMLをpushすると更新される。複数のページを用意したい場合は、リポジトリを作ったうえでbranch:gh-pagesにjekyll buildが通るHTMLを置くことでページを公開する

GitLabも同じく${USER}.gitlab.ioというリポジトリ名を作る。ただし、ブランチは基本的にはmasterを使用する。なお、.gitlab-ci.ymlでソースを置くブランチは制御、変更できる

現在、GitHub Pagesには、GitLab CIに相当するGitHub Actionsがあるのでページの自動ビルド、デプロイに関しての不便はない

GitLab Pagesは複数のドメインを登録できる。GitHubは無理。なので必要なときはGitLab Pagesのドメイン設定を使ってGitHub Pagesにリダイレクトさせるなどのハックに利用させてもらってる

GitLabからGitHubに移行した経緯

私は、GitLab Pagesを2年くらい使っていましたし、特に不満もなかったのですが(たまに不安定で遅かったというのはある)、あるとき突然にページが非公開になってしまうことがありました。

で、運営に連絡してみたのですが、返事がなかったので、GitHub Pagesに同じソースでデプロイしました。つまり、ここで移行という形になります。

その後、GitLabの方で非公開が解除されたのですが、なんだったのかよくわからなかったので、その後、GitLabに戻ることはありませんでした。そのような経緯で、それ以降は、GitHub Pagesを使っています。

ただ、GitHubはCI連携がデフォルトではなかったため、通常は、ビルドしたものをリポジトリにpushしなければ更新できません。したがって、Travis CIを回してページのビルド、デプロイを自動化してましたが、GitHub Actionsが登場したので、今はそちらに移行しています。

GitLab Pagesを使った複数ドメインを利用するハック

例えば、blog.syui.cfとlog.syui.cfというドメインをsyui.github.io/blogに飛ばしたいとしましょう。この場合、GitHub Pagesは一つのページに一つしかドメインを指定することができないので難しい。

そこで、GitLab Pagesで２つのドメインを登録した上で、CloudFlareなどのリダイレクトをGitHub Pagesへ走らせることで、blog.syui.cfとlog.syui.cfを目的の場所に飛ばすことができます。
CNAME : gitlab pages

↓

リダイレクト : github pages
とはいえ、これはあくまでリダイレクトという形なので、アクセスは、トップドメインにとどまります。このような形を実現したい場合のみ利用できるハックです。

簡単にブログを立ててみる手順

GitLab Pages

https://gitlab.com/pages

まず、リポジトリを作りましょう。リポジトリ名は${user}.gitlab.ioです。例えば、私の場合、syui.gitlab.ioですね。

そして、以下のリポジトリをpushしましょう。
$ git clone https://gitlab.com/pages/jekyll

$ cd jekyll

# ${USER}に注意
$ git remote add origin git@gitlab.com:${USER}/${USER}.gitlab.io.git

$ git push -u origin master
GitLab CIが通ったのを確認したら、ページが表示されているはずです。(GitLabの場合、成功しても公開まで少し時間がかかります)

ビルド出力はpublicディレクトリでないといけません。このへんは注意です。それぞれのジェネレーター(静的サイトジェネレーターなど)の実行にオプションから指定しないといけない場合があるかもしれません。publicがデフォルトでない場合はそうですね。

複数のページを作りたい場合は、同じような手順に加えて、.gitlab-ci.ymlを調整しましょう。

GitHub Pages

まず、リポジトリを作りましょう。リポジトリ名は${user}.github.ioです。例えば、私の場合、syui.github.ioです。
$ git clone https://gitlab.com/pages/jekyll

$ cd jekyll

# ${USER}に注意
$ git remote add origin git@github.com:${USER}/${USER}.github.io.git

$ git push -u origin master
複数のページを作りたい場合は、同じような手順に加えて、ブランチをgh-pagesにしてpushしましょう。アクセスは、https://${USER}.github.io/リポジトリ名となります。
# リポジトリを作った上で
$ git remote add origin git@github.com:${リポジトリ名}.git
$ git branch -b gh-pages
$ git push -u origin gh-pages

　 Tweet
Qiitaで続きを読む

投稿日：2020-03-28T05:04:07+09:00

初心者によるプログラミング学習ログ 275日目

100日チャレンジの275日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
275日目は、

おはようございます
275日目
・XDデザインカンプからのwebサイト模写
・セクション1つ作成
・git,sass,FLOU設計#早起きチャレンジ #駆け出しエンジニアと繋がりたい #100DaysOfCode
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) March 27, 2020

　 Tweet
Qiitaで続きを読む

20200328のHTMLに関する記事は12件です。

Bootstrapの画面分割

WSLのディレクトリにあるhtmlをブラウザで開く

参考

指定したエリアだけを印刷する処理

こんな場面で使えます。

実装の流れ

実装スタート

１：印刷ボタンを作成

２：プリントしたいエリアの取得

3：２のエリア全体のコピーを作成

４：3以外を非表示にする処理を作成

５：印刷ダイアログの呼び出し➡︎印刷する

６：３で作成した印刷用エリアを削除 ・ ４で非表示にした要素を表示して終了です。

終わりに。

HTMLを理解するコツとは？！ブロック要素でグループ分けをする

HTMLを理解するコツ

グループ分けとは？

ページ大まかな構成

ヘッダー部分を作る＜header＞タグ

ナビゲーションメニューを作る＜nav＞タグ

メインコンテンツ部分を作る＜main＞タグ

読み物、記事部分を作る＜article＞タグ

テーマを持ったグループを作る＜section＞タグ

メインコンテンツではない、補足部分を作る＜aside＞タグ

フッター部分を作る＜footer＞タグ

意味を持たないブロック要素を作る＜div＞タグ

最後に

100日後にエンジニアになるキミ - 8日目 - HTML - HTMLの基礎3

bodyタグ

ヘッダータグ

フッタータグ

見出しタグ

段落タグ、改行タグ

イメージタグ

動画タグ

アンカータグ

リストタグ

Divタグ , Spanタグ

テーブルタグ

フォームタグ

インプットタグ

セレクトタグ,オプションタグ

IFRAMEタグ

特殊記号について

まとめ

作者の情報

画像を右クリック→「TinyPNGで圧縮」を実現する

完成形

圧縮用のコマンドをインストール

コンテキストメニューを拡張

参考

ヘッダーを途中から固定させたい！

概要

条件

Html

CSS

jQuery

完成

Bootstrap縛りで制作するポートフォリオ #1

はじめに

UXが全て

レスポンシブデザインは行なっているか

ブレイクポイントについて

div要素を横並びにしたいがdisplay: flexが効かない原因

PHPでポートフォリオ作成：カレンダー

記事の概要

背景

目的

スペック

主な機能

開発手順

1、要件定義

環境選定

データベース設計

設計

5.コーディング

5.1データベース作成

5.2データベース接続確認

5.3今月の日付の表示機能

６：３で作成した印刷用エリアを削除・４で非表示にした要素を表示して終了です。

　5.コーディング