2021-03-05に投稿2025-03-10に更新

postion属性とは

要素の位置を指定するための属性

指定する方法の種類

relative : 相対位置への配置
- その要素が本来配置される位置からの相対位置
absolute : 絶対位置への配置
- 画面上の座標
fixed : 絶対位置への配置 + スクロールされても位置が固定

指定方法

まずは位置の指定方法を記述する
1
position: relative;
どちらの方向にどれだけ動かすかを指定する
1
top: 200px;

まとめると

.test{
	position: relative;
	top: 200px;
}

relativeとabsoluteの違い

イメージ

コード

<!DOCTYPE html>
<html>
	<head>
		<title>position</title>
			<style type="text/css">

				.first-section{
					background: lightgreen;
					width: 100px;
					height: 100px;
					position:relative;
					left:200px;
					top:200px;
				}
				.second-section{
					background: pink;
					width: 100px;
					height: 100px;
					position:absolute;
					left:200px;
					top:200px;
				}
				.third-section{
					background: red;
					width: 100px;
					height: 100px;
					position:fixed;
					left:400px;
					top:400px;
				}
		</style>
	</head>
	<body>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<div class="first-section">
			<p>1</p>
		</div>
		<div class="second-section">
			<p>2</p>
		</div>
		<div class="third-section">
			<p>3</p>
		</div>
	</body>
</html>

便利な属性

奥行きの指定

z-index属性を使って指定する

- 大きい値を設定したスタイルを適応した要素が上に描画される

.test{
	position: relative;
	top: 200px;
	z-index: 1;
}

.test2{ <!--こっちが上に表示させる-->
	position: relative;
	top: 200px;
	z-index: 2;
}

透明度の指定

opacity属性を使って0~1までの間で指定する

.test{
	position: relative;
	top: 200px;
	opasity: 0.5; <!--透明度を指定-->
}

2021-03-04に投稿2025-03-10に更新

【Shell】出力をそのままクリップボードにコピーする

出力をクリップボードにコピーする

|(パイプ)+pbcopy

pbとはpast boardの略

使用例

カレンとディレクトリのパスをクリップボードにコピーする

1	`pwd \| pbcopy`

ファイルの内容をクリップボードにコピー

1	`cat ファイル名 \| pbcopy`

追記

2021/3/6

zshには、aliasでpbcが設定されているらしく、こっちの方が短くかける

動作的には、aliasなのでpbcopyと同じ
1
cat ファイル名 | pbc

2021-03-03に投稿2025-03-10に更新

インラインCSSと内部CSSいついて

1.インラインCSS : body内の各種タグの中に記述する

一つ一つのタグに設定する必要がある
インラインCSSと呼ばれる書き方で、直接タグの中でstyle属性を指定する
1
style=属性:"属性値"

color属性で色を変える例

1	`<p style="color:blue">今回は、新しくリリースするプロダクトの紹介をします</p>`

複数の属性指定したい場合、;を入力することで指定できる
1
今回は、新しくリリースするプロダクトの紹介をします
2.内部CSS : headタグ内に記述する
headタグの内部に記述するCSS

具体的にはheadブロック内にstyleブロックを作成し、そこにスタイルを記述する

<html>
 <head>
  <style>
   <!--ここにスタイルを記述する-->
  </style>	
 </head>
 <body>

 </body>
</html>

スタイルの記述には２通りの方法がある

タグ全体に適応する
指定した領域のみに適応する

1. タグ全体に適応する

styleブロック内にタグ名のブロックを作り、そこにスタイルを記述する

複数のスタイルを記述する場合、;で区切る

<style>
<!--pタグ内の全てのテキストにここに記述したレイアウトが適応される-->
 p{	
  color:blue;
  font-size:150%;
 }
</style>

2. 指定した領域のみに適応する

class属性を使用する
- 複数のタグに適応できる
id属性を使用する
- １つのタグのみに適応できる
span属性を使用する
- 特定の文字列適応する

1. `class`属性を使用する

class属性にクラス名を指定し、styleブロックに.クラス名でスタイルを記述する

同一のクラス名を他のタグにも割り当てることができる

<html>
 <head>
  <style>
   .A{
    color:blue;
    font-size:150%;
    }
  </style>	
 </head>
 <body>
  <h1 class="A">クラスでスタイルを指定しています</p>
  <p class="A">クラスでスタイルを指定しています</p>
  <p> クラス名を指定していません</p>
 </body>
</html>

2. `id`属性を使用する

id属性を定義してid名を指定して、styleブロックに#id名でスタイルを記述する

1つのタグにしか適応できない

<html>
 <head>
  <style>
   #B{
    color:blue;
    font-size:150%;
    }
  </style>	
 </head>
 <body>
  <h1 id="B">クラスでスタイルを指定しています</p>
  <p><クラス名を指定していません/p>
  <p> クラス名を指定していません</p>
 </body>
</html>

3. `span`属性を使用する

spanタグ(\\)を定義してclass属性にクラス名を指定して、styleブロックに.クラス名でスタイルを記述する

class idとの違いは、タグに対するレイアウトではなく、文字列に対するレイアウトである点

<html>
 <head>
  <style>
   .C{
    color:blue;
    font-size:150%;
    }
  </style>	
 </head>
 <body>
  <h1>クラスでスタイルを指定しています</p>
  <p>クラス名を<span class="C">指定</span>していません</p>
  <p>クラス名を指定していません</p>
 </body>
</html>

2021-03-02に投稿2025-03-10に更新

cssにつて

CSSとは何か

正式名称 : Cascading Syle Sheets(カスケーディングスタイルシート)
ページレイアウトを形成するためのスタイルシート
HTML = マークアップ,CSS = レイアウト

記述方法の種類

インラインCSS : body内の各種タグの中に記述する
- インラインスタイルシートと呼ぶ場合もある
内部CSS : headタグの中に記述
- 内部スタイルシートと呼ぶ場合もある
外部ファイル(.css)
- 外部スタイルシートと呼ぶ場合もある
- コンテンツとデザインの分離ができるので、外部ファイルに記述するのが基本

1.インラインCSS : body内の各種タグの中に記述する

一つ一つのタグに設定する必要がある
インラインCSSと呼ばれる書き方で、直接タグの中でstyle属性を指定する
1
style=属性:"属性値"

color属性で色を変える例

1	`<p style="color:blue">今回は、新しくリリースするプロダクトの紹介をします</p>`

複数の属性指定したい場合、;を入力することで指定できる
1
今回は、新しくリリースするプロダクトの紹介をします
2.内部CSS : headタグ内に記述する
headタグの内部に記述するCSS

具体的にはheadブロック内にstyleブロックを作成し、そこにスタイルを記述する

<html>
 <head>
  <style>
   <!--ここにスタイルを記述する-->
  </style>	
 </head>
 <body>

 </body>
</html>

スタイルの記述には２通りの方法がある

タグ全体に適応する
指定した領域のみに適応する

1. タグ全体に適応する

styleブロック内にタグ名のブロックを作り、そこにスタイルを記述する

複数のスタイルを記述する場合、;で区切る

<style>
<!--pタグ内の全てのテキストにここに記述したレイアウトが適応される-->
 p{	
  color:blue;
  font-size:150%;
 }
</style>

2. 指定した領域のみに適応する

class属性を使用する
- 複数のタグに適応できる
id属性を使用する
- １つのタグのみに適応できる
span属性を使用する
- 特定の文字列適応する

1. `class`属性を使用する

class属性にクラス名を指定し、styleブロックに.クラス名でスタイルを記述する

同一のクラス名を他のタグにも割り当てることができる

<html>
 <head>
  <style>
   .A{
    color:blue;
    font-size:150%;
    }
  </style>	
 </head>
 <body>
  <h1 class="A">クラスでスタイルを指定しています</p>
  <p class="A">クラスでスタイルを指定しています</p>
  <p> クラス名を指定していません</p>
 </body>
</html>

2. `id`属性を使用する

id属性を定義してid名を指定して、styleブロックに#id名でスタイルを記述する

1つのタグにしか適応できない

<html>
 <head>
  <style>
   #B{
    color:blue;
    font-size:150%;
    }
  </style>	
 </head>
 <body>
  <h1 id="B">クラスでスタイルを指定しています</p>
  <p><クラス名を指定していません/p>
  <p> クラス名を指定していません</p>
 </body>
</html>

3. `span`属性を使用する

spanタグ(\\)を定義してclass属性にクラス名を指定して、styleブロックに.クラス名でスタイルを記述する

class idとの違いは、タグに対するレイアウトではなく、文字列に対するレイアウトである点

<html>
 <head>
  <style>
   .C{
    color:blue;
    font-size:150%;
    }
  </style>	
 </head>
 <body>
  <h1>クラスでスタイルを指定しています</p>
  <p>クラス名を<span class="C">指定</span>していません</p>
  <p>クラス名を指定していません</p>
 </body>
</html>

2021-03-01に投稿2025-03-10に更新

【Swift】Array内の要素を指定して消去する

注意

この方法の場合、比較する要素に一致するデータは全て配列から消去されます

1.removeAllを使用する

removeAll(where:)メソッドを使用し、要素を比較して一致している値全てを消去する

//	配列定義
var testArray :Array<String> = Array<String>()

//	要素追加
testArray.append("test")
testArray.append("kemono")

//	testと一致する要素を全て消去
testArray.removeAll(where: {$0 == "test"})

2.for文を使用する

for文を使用して配列内の要素を列挙して、要素を比較した結果一致している配列内要素を全て消去する

//	配列定義
var testArray :Array<String> = Array<String>()

//	要素追加
testArray.append("test")
testArray.append("test")
testArray.append("kemono")

//	要素を操作するのでコピーを作成して、それをfor文で列挙する
let copyArray = testArray

//	一致する要素を消去
for i in 0...copyArray.count - 1{
    if(copyArray[i] == "test"){
        testArray.remove(at: i)
    }
}

3.その他の参考

https://qiita.com/fuziki/items/e8b1bb5b2dc8c8f43041

2021-03-01に投稿2025-03-10に更新

【Xcode】EntryPointを変更する方法

0. 環境

MacBook Air M1
Xcode 12.4

1. Entry Pointとは

プログラムの開始される位置
この記事では開始される画面の位置も含まれる
画面上で見ると以下の画像の矢印部分がEntry Pointを表している

アシスタントエディタで確認すると以下赤枠部分

EntryPointのアシスタントエリアでの表示

2. StoryBordから変更する

ドラックアンドドロップで矢印を移動させる

EntryPoint変更(マウス).gif .gif “EntryPoint変更(マウス)”)

Utilites areaから移動させる

Attributes inspector内のIs Initial View Controllerにチェクを入れる
.gif “EntryPoint変更(Inspector)”)

3. コードから変更する

1. Main.storybordの遷移させたいViewControllerに`Storyboad ID`を設定する

Identity Inspector 内のSotryboard IDを設定

今回はこのように設定
- 1画面目 : FirstView
- 2画面目 : SecondView

2. SceneDelegate.swift

何も変更していないデフォルトの状態だとこのようなコードになっていると思います

import UIKit

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?


    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        // Use this method to optionally configure and attach the UIWindow `window` to the provided UIWindowScene `scene`.
        // If using a storyboard, the `window` property will automatically be initialized and attached to the scene.
        // This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead).
        guard let _ = (scene as? UIWindowScene) else { return }
    }

    func sceneDidDisconnect(_ scene: UIScene) {
        // Called as the scene is being released by the system.
        // This occurs shortly after the scene enters the background, or when its session is discarded.
        // Release any resources associated with this scene that can be re-created the next time the scene connects.
        // The scene may re-connect later, as its session was not necessarily discarded (see `application:didDiscardSceneSessions` instead).
    }

    func sceneDidBecomeActive(_ scene: UIScene) {
        // Called when the scene has moved from an inactive state to an active state.
        // Use this method to restart any tasks that were paused (or not yet started) when the scene was inactive.
    }

    func sceneWillResignActive(_ scene: UIScene) {
        // Called when the scene will move from an active state to an inactive state.
        // This may occur due to temporary interruptions (ex. an incoming phone call).
    }

    func sceneWillEnterForeground(_ scene: UIScene) {
        // Called as the scene transitions from the background to the foreground.
        // Use this method to undo the changes made on entering the background.
    }

    func sceneDidEnterBackground(_ scene: UIScene) {
        // Called as the scene transitions from the foreground to the background.
        // Use this method to save data, release shared resources, and store enough scene-specific state information
        // to restore the scene back to its current state.
    }


}

sceneメソッド内に以下のコードのコードを追記します

この時、guard let _ =の_の部分をwindowに変更しています。

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
	// Use this method to optionally configure and attach the UIWindow `window` to the provided UIWindowScene `scene`.
	// If using a storyboard, the `window` property will automatically be initialized and attached to the scene.
	// This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead).
	guard let windowScene = (scene as? UIWindowScene) else { return }

	window = UIWindow(windowScene: windowScene)
	let storybard = UIStoryboard(name: "Main",bundle: nil)
 	
	//  初めて起動しているか
	if(lanchIsFIrstTme()){
	    window?.rootViewController = storybard.instantiateViewController(identifier: "FirstView")
	    firstLanch()
	}else{
	    window?.rootViewController = storybard.instantiateViewController(identifier: "SecondView")
	}
	
	window?.makeKeyAndVisible()
}

4. [おまけ]初回起動時のみ特定の画面を表示させる

一つ前で実装した切り替え処理とユーザーデフォルト機能を組み合わせて、初回起動かどうかを判定する

確認用メソッドと登録用メソッドを作成

private let STORED_KEY = "lanched"

func firstLanch(){
    return UserDefaults.standard.set(true,forKey: STORED_KEY)
}

func lanchIsFIrstTme() -> Bool{
    return !UserDefaults.standard.bool(forKey: STORED_KEY)
}

一つ前で実装したコードを改変

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
    // Use this method to optionally configure and attach the UIWindow `window` to the provided UIWindowScene `scene`.
    // If using a storyboard, the `window` property will automatically be initialized and attached to the scene.
    // This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead).
    guard let windowScene = (scene as? UIWindowScene) else { return }

    window = UIWindow(windowScene: windowScene)
    let storybard = UIStoryboard(name: "Main",bundle: nil)
    
    //  初めて起動しているか
    if(lanchIsFIrstTme()){
        window?.rootViewController = storybard.instantiateViewController(identifier: "FirstView")
        firstLanch()
    }else{
        window?.rootViewController = storybard.instantiateViewController(identifier: "SecondView")
    }
    
    window?.makeKeyAndVisible()
}

こんな感じになればOK

最終確認

参考

https://stackoverflow.com/questions/10428629/programmatically-set-the-initial-view-controller-using-storyboards/47691073

2021-02-28に投稿2025-03-10に更新

XcodeでVimキーバインドを使う「XVim2」

1. 証明書の発行

アプリケーションのKeychain Access(キーチェーンアクセス)を起動
Keychain Accessウィンドウの左側のデフォルトチェーン内のログインを選択
画面上部のメニューバーから、キーチェーンアクセス->証明書アシスタント->証明書を作成を選択
以下と同じ情報を設定して、作成ボタンを押下
- 名前 : XcodeSigner
- 固有名のタイプ : 自己署名ルート
- 証明書のタイプ : コード署名
作成時の警告が出るが、続けるを選択
以下の画像のような画面が表示されれば証明書の発行は成功

2. XVim2のインストール

この作業では、任意の場所にリポジトリをクローンして作業を行ますが、今回はDesktopで作業することとして解説します。

Xcodeのパスの確認

インストール作業を行う前に、Xcodeが配置されているファイルパスの確認をします。

以下のコマンドで、/Applications/Xcode.app/Contents/Developerというパスが表示されればOKです。それ以外のパスが表示されてしまった場合は、以下コマンドで、パスを設定してください。

1	`xcode-select -p`

それ以外のパスが表示されてしまった場合は、以下コマンドで、パスを設定してください。

1	`xcode-select -s /Applications/Xcode.app/Contents/Developer`

インストール

注意 : この作業を行うときは、Xcodeを完全に落として(タスクキル)から行ってください

ディレクトリを移動
1
cd ~/Desktop

リポジトリをクローン

1	`git clone https://github.com/XVimProject/XVim2.git`

クローンしてきたリポジトリのディレクトリに移動
1
cd XVim2/
makeコマンドでプラグインをビルド
1
make
出力がたくさん流れたあと、に以下のような文字が表示されれば成功
1
** BUILD SUCCEEDED **

3. XcodeにXVim2を読み込ませる

Xcodeを起動すると、以下の画像のようなウィンドウが表示されるので、Load Bundleを選択する
上部メニューバーのEditメニューの一番下にXVimが表示されて入れば導入成功

間違えて、`Skip Bundle`を選択してしまった場合

一度XCodeを閉じて(タスクキル)して、以下コマンドをターミナルで実行してから再度XCodeを実行するとまた確認ウィンドウが表示さる

X.X = 自分が使っているXcodeのバージョン

1	`defaults delete com.apple.dt.Xcode DVTPlugInManagerNonApplePlugIns-Xcod-X.X`

4. .xvimrcでカスタマイズ

ホームディレクトリ直下に.xvimrcファイルを作成して、.vimrcと同じように記述していく

1	`vim ~/.xvimrc`

5. 参考

2021-02-28に投稿2025-03-10に更新

【Linuxコマンド】よく使うlsコマンドオプション

普通に`ls`を使った場合

1 2	`% ls Memo_App Memo_App.xcodeproj README.md`

1. 隠しファイル`.ファイル`まで表示させる

オプション-aをつける

ls -a

実行例

1
2
3

%ls -a
.                  .DS_Store          .gitignore         Memo_App.xcodeproj
..                 .git               Memo_App           README.md

2. ファイル詳細を表示させる

lsコマンドのオプションに-lをつける

ls -l

実行例

% ls -l
total 8
drwxr-xr-x  12 daiki  staff  384  2 28 01:39 Memo_App
drwxr-xr-x@  5 daiki  staff  160  2 28 02:03 Memo_App.xcodeproj
-rw-r--r--   1 daiki  staff   10  2 27 22:39 README.md

3. １列１ファイルで表示させる

lsコマンドのオプションに-1をつける

ls -1

実行例

% ls -1
Memo_App
Memo_App.xcodeproj
README.md

4. カンマ区切りで表示させる

lsコマンドのオプションに-mをつける

ls -m

実行例

1 2	`% ls -m Memo_App, Memo_App.xcodeproj, README.md`

2021-02-27に投稿2025-03-10に更新

【Vimプラグイン】囲う記述を楽にする「vim-surround」

postion属性とは

指定する方法の種類

指定方法

relativeとabsoluteの違い

イメージ

便利な属性

奥行きの指定

透明度の指定

出力をクリップボードにコピーする

使用例

カレンとディレクトリのパスをクリップボードにコピーする

ファイルの内容をクリップボードにコピー

追記

2021/3/6

1.インラインCSS : body内の各種タグの中に記述する

2.内部CSS : headタグ内に記述する

スタイルの記述には２通りの方法がある

1. タグ全体に適応する

2. 指定した領域のみに適応する

1. class属性を使用する

2. id属性を使用する

3. span属性を使用する

CSSとは何か

記述方法の種類

1.インラインCSS : body内の各種タグの中に記述する

2.内部CSS : headタグ内に記述する

スタイルの記述には２通りの方法がある

1. タグ全体に適応する

2. 指定した領域のみに適応する

1. class属性を使用する

2. id属性を使用する

3. span属性を使用する

もくじ

注意

1.removeAllを使用する

2.for文を使用する

3.その他の参考

もくじ

0. 環境

1. Entry Pointとは

画面上で見ると以下の画像の矢印部分がEntry Pointを表している

アシスタントエディタで確認すると以下赤枠部分

2. StoryBordから変更する

ドラックアンドドロップで矢印を移動させる

Utilites areaから移動させる

3. コードから変更する

1. Main.storybordの遷移させたいViewControllerにStoryboad IDを設定する

2. SceneDelegate.swift

4. [おまけ]初回起動時のみ特定の画面を表示させる

こんな感じになればOK

参考

目次

1. 証明書の発行

2. XVim2のインストール

Xcodeのパスの確認

インストール

3. XcodeにXVim2を読み込ませる

間違えて、Skip Bundleを選択してしまった場合

4. .xvimrcでカスタマイズ

5. 参考

目次

普通にlsを使った場合

1. 隠しファイル.ファイルまで表示させる

実行例

2. ファイル詳細を表示させる

実行例

3. １列１ファイルで表示させる

実行例

4. カンマ区切りで表示させる

実行例

目次

カテゴリ

最近の記事

アーカイブ

タグ

広告

1. `class`属性を使用する

2. `id`属性を使用する

3. `span`属性を使用する

1. `class`属性を使用する

2. `id`属性を使用する

3. `span`属性を使用する

1. Main.storybordの遷移させたいViewControllerに`Storyboad ID`を設定する

間違えて、`Skip Bundle`を選択してしまった場合

普通に`ls`を使った場合

1. 隠しファイル`.ファイル`まで表示させる